Phương pháp đầu tiên và phổ biến nhất để triển khai độ trễ trong quá trình thực thi mã JavaScript là sử dụng phương thức setTimeOut[]
- tên chức năng - Tên chức năng cho chức năng được thực thi
- mili giây - Số mili giây
Nguồn đầy đủ. JavaScript
Javascript setInterval[]
Javascript setTimeout chỉ thực thi một lần sau độ trễ trong khi setInterval[] tiếp tục gọi hàm gọi lại sau mỗi mili giây độ trễ. Cả hai phương thức này đều trả về một mã định danh số nguyên có thể được sử dụng để xóa chúng trước khi hết giờ. Phương thức setInterval[] tiếp tục gọi hàm cho đến khi ClearInterval[] được gọi hoặc cửa sổ bị đóng
- tên chức năng - Tên chức năng cho chức năng được thực thi
- mili giây - Số mili giây
Tự mình thử
Nguồn đầy đủ. JavaScript
đầu ra
Chế độ ngủ Javascript[]
JavaScript đã phát triển đáng kể. Bạn có thể sử dụng một số phương pháp để mô phỏng hàm sleep[] trong JavaScript. Các tính năng như lời hứa và hàm async/await trong JavaScript đã giúp chúng tôi sử dụng hàm sleep[] một cách dễ dàng hơn
Mặc dù hoãn JavaScript đẩy tập lệnh xuống cuối trang tải, nhưng thay vào đó, bạn có thể trì hoãn JavaScript dựa trên tương tác của người dùng. Đây có thể là một cách tuyệt vời để tăng tốc đáng kể việc sơn trang cho Google Lighthouse khi chưa cần đến thứ gì đó ngay lập tức. Đặc biệt là các tập lệnh nặng của bên thứ ba như Google Adsense, Google Analytics, pixel chuyển đổi [FB, Google Ads], v.v.
Trì hoãn JavaScript có tác động lớn đến Largest Contentful Paint [LCP] và có thể giúp bạn khắc phục cảnh báo “Giảm JavaScript không sử dụng” trong Google PageSpeed Insights. Nó sẽ giảm Tổng thời gian chặn [TBT] của bạn và giúp khắc phục các cảnh báo “Giảm tác động của mã bên thứ ba” và “Giảm thời gian thực thi JavaScript”
Giảm cảnh báo JavaScript không được sử dụng trong PageSpeed Insights
Nó cũng hoạt động tốt cho những thứ như vấn đề về hiệu suất WooC Commerce phổ biến do thực tế là yêu cầu AJAX không thể được lưu vào bộ đệm. Bạn cũng có thể sử dụng nó với tính năng phân tích cục bộ và Trang tức thì của chúng tôi
Trì hoãn JavaScript
Thực hiện theo các bước bên dưới để trì hoãn JavaScript với Perfmatters. Điều này sẽ hoạt động với thẻ tập lệnh có loại
gtagv4.js6 hoặc không
Bước 1
Nhấp vào cài đặt plugin Perfmatters
Cài đặt plugin Perfmatters
Bước 2
Nhấp vào tab “Tài sản”
Tài sản của Perfmatters
Bước 3
Cuộn xuống và bên dưới phần “JavaScript”, bật “Delay JavaScript. ”
Trì hoãn JavaScript
Bước 4
Sau đó tiến hành chọn của bạn
hành vi trì hoãn
Có hai phương pháp khác nhau mà bạn có thể chọn để trì hoãn JavaScript
Hành vi trì hoãn JavaScript của Perfmatters
1. Chỉ trì hoãn các tập lệnh được chỉ định
Trì hoãn các tệp JavaScript cụ thể bằng cách thêm URL nguồn [_______0_______7] hoặc trì hoãn tập lệnh nội tuyến bằng cách thêm một chuỗi duy nhất từ tập lệnh đó. Sự sắp xếp. Một trên mỗi dòng
Trì hoãn JavaScript được chỉ định với Perfmatters
2. Trì hoãn tất cả các tập lệnh
Tính năng trì hoãn tất cả các tập lệnh sẽ cố gắng trì hoãn tất cả JavaScript, bao gồm cả nội tuyến. Đây là lựa chọn tích cực nhất. Sau đó, bạn có thể loại trừ tập lệnh nếu cần
Loại trừ khỏi sự chậm trễ
Loại trừ các tệp JavaScript cụ thể khỏi độ trễ bằng cách thêm URL nguồn [
gtagv4.js7] hoặc loại trừ tập lệnh nội tuyến bằng cách thêm một chuỗi duy nhất khỏi tập lệnh đó. Sự sắp xếp. Một trên mỗi dòng
Loại trừ JavaScript khỏi độ trễ
Với cả hai tùy chọn hành vi trì hoãn, bạn có thể bật thời gian chờ sẽ tự động tải tập lệnh sau 10 giây nếu không phát hiện tương tác người dùng nào. Đây là tùy chọn và tắt theo mặc định
Hết thời gian trì hoãn JavaScript
Dưới đây là một vài ví dụ về lý do tại sao bạn có thể muốn kích hoạt thời gian chờ
- Giúp cải thiện độ chính xác của dữ liệu của tập lệnh theo dõi, đặc biệt nếu bạn có mục tiêu được liên kết với lượt xem trang nhưng có thể không có tương tác của người dùng. Bạn muốn mục tiêu vẫn kích hoạt
- Bạn có một blog Google AdSense và một người dùng đang mở nhiều trang trong các tab mới ở chế độ nền. Bạn vẫn muốn quảng cáo tắt
Nếu bạn muốn đặt giá trị thời gian chờ trễ khác, bạn có thể sử dụng bộ lọc
gtagv4.js9
Trì hoãn JavaScript nội tuyến
Để trì hoãn JavaScript nội tuyến, hãy nhập một phần chuỗi nằm trong thẻ
analytics-minimal.js0
Ví dụ: giả sử chúng tôi có JavaScript nội tuyến này
Chúng ta có thể thêm
analytics-minimal.js1 vào ô “Delay JavaScript” và nó sẽ trì hoãn nó. Bạn có thể chọn bất kỳ chuỗi nào trong thẻ script, chỉ cần đảm bảo rằng chuỗi đó là duy nhất
Đối với một số JavaScript, chúng có thể có tệp nguồn cũng như thành phần nội tuyến. Trong trường hợp này, bạn sẽ cần trì hoãn cả hai để nó hoạt động bình thường
Ví dụ về các tập lệnh bạn có thể trì hoãn
Dưới đây là một số ví dụ về các tập lệnh phổ biến mà chúng tôi trì hoãn trên các trang web WordPress
Trì hoãn Google Analytics
Để trì hoãn Google Analytics, hãy thêm phần sau vào hộp “Trì hoãn JavaScript”
ga[ ' ga[' google-analytics.com/analytics.js
Nếu bạn đang sử dụng phân tích cục bộ của chúng tôi, bạn cũng có thể trì hoãn các tập lệnh
Phân tích Perfmatters địa phương. js
Để trì hoãn tập lệnh Perfmatters cục bộ, hãy thêm phần sau vào hộp “Trì hoãn JavaScript”
gtag địa phương Perfmatters. js v4
Để trì hoãn tập lệnh Perfmatters cục bộ, hãy thêm phần sau vào hộp “Trì hoãn JavaScript”
gtagv4.js
Các vấn đề hoàn hảo địa phương Tối thiểu
Để trì hoãn tập lệnh Perfmatters cục bộ, hãy thêm phần sau vào hộp “Trì hoãn JavaScript”
analytics-minimal.js
Trì hoãn Trình quản lý thẻ của Google
Để trì hoãn Trình quản lý thẻ của Google, hãy thêm phần sau vào hộp “Trì hoãn JavaScript”
/gtm.js /gtag/js gtag[ /gtm- /gtm.
Google Adsense
Để trì hoãn Google AdSense, hãy thêm phần sau vào hộp “Trì hoãn JavaScript”
adsbygoogle.js
Nếu bạn đang sử dụng một plugin như Ad Inserter, cùng với các khối chèn HTML, bạn sẽ muốn trì hoãn cả tập lệnh và phần nội tuyến
adsbygoogle.js ai_insert_code
Trì hoãn Facebook Pixel
Để trì hoãn Facebook Pixel, hãy thêm phần sau vào hộp “Trì hoãn JavaScript”
fbevents.js fbq[ /busting/facebook-tracking/
Trên đây chỉ là một vài trong số rất nhiều ví dụ về tập lệnh mà bạn có thể vô hiệu hóa. Nếu bạn gặp bất kỳ sự cố nào khi trì hoãn một tập lệnh nhất định, vui lòng liên hệ với chúng tôi
Cách loại trừ các tập lệnh bị trì hoãn
Nếu bạn đang sử dụng tính năng Trì hoãn tất cả JavaScript, bạn có thể thêm tập lệnh vào hộp “”
Cách loại trừ một trang/bài đăng khỏi độ trễ
Bạn có thể loại trừ độ trễ JavaScript trên từng bài đăng, trang hoặc loại bài đăng tùy chỉnh. Trong trình chỉnh sửa, ở phía bên tay phải, bỏ chọn “Delay JavaScript. ” Điều này sẽ loại trừ toàn bộ trang khỏi độ trễ. Điều này có thể hữu ích khi nói trang thanh toán hoặc liên hệ với chúng tôi có thể có nhiều vấn đề hơn phần còn lại của trang web. Ghi chú. Bạn phải là quản trị viên để xem các tùy chọn meta
Loại trừ độ trễ JS trên trang riêng lẻ
Loại trừ độ trễ JS phổ biến
Khi sử dụng trong Perfmatters, bạn có thể cần thêm một hoặc hai loại trừ. Con số này thường dựa trên mức độ phức tạp của trang web. Ví dụ: một trang web sử dụng trình tạo trang nặng như Elementor rất có thể sẽ cần nhiều loại trừ hơn một trang web nhẹ sử dụng GeneratePress
Dưới đây là một số loại trừ phổ biến mà chúng tôi thường thấy. Chúng tôi đảm bảo sẽ tiếp tục bổ sung vào danh sách này khi chúng tôi cải thiện tính năng này
jquery.min.js
astra
Atarim
ga[ ' ga[' google-analytics.com/analytics.js0
ga[ ' ga[' google-analytics.com/analytics.js1
Cookie Borlabs
ga[ ' ga[' google-analytics.com/analytics.js2
tuân thủ
ga[ ' ga[' google-analytics.com/analytics.js3
Thông báo Cookie & Tuân thủ GDPR
ga[ ' ga[' google-analytics.com/analytics.js4
CookieCó
ga[ ' ga[' google-analytics.com/analytics.js5
Divi
ga[ ' ga[' google-analytics.com/analytics.js6
Divi với hình ảnh động
Nếu bạn đang sử dụng hoạt ảnh với Divi, bạn có thể cần những thứ sau
ga[ ' ga[' google-analytics.com/analytics.js7
phần tử
Điều này có thể thay đổi một chút dựa trên các thành phần và mẫu bạn đang sử dụng trong Elementor. Nếu bạn không sử dụng nhiều hoạt ảnh, bạn có thể không cần bất kỳ loại trừ nào cho Elementor
ga[ ' ga[' google-analytics.com/analytics.js8
tìm kiếm phần tử
ga[ ' ga[' google-analytics.com/analytics.js9
blog nề GeneratePress
analytics.js0_______8_______1
analytics.js2
Tuân thủ cookie GDPR
analytics.js3
Thông báo cookie nhẹ
analytics.js4
Hình thức Ninja
analytics.js5
analytics.js6
Biểu ngữ cookie thật
analytics.js7
thanh trượt cách mạng
analytics.js8
Hình ảnh thích ứng ShortPixel
analytics.js9
thanh trượt thông minh
gtagv4.js0
Thanh trượt thông minh Pro
gtagv4.js1
Thư viện sản phẩm duy nhất WooC Commerce
gtagv4.js2
Cách lọc tập lệnh bị trì hoãn
Bạn có thể sử dụng bộ lọc
analytics-minimal.js2 để thao tác các tập lệnh bị trì hoãn của mình. Ví dụ: bạn có thể loại trừ tập lệnh khỏi bị trì hoãn trên thiết bị máy tính để bàn
gtagv4.js3
Bạn có thể sử dụng bộ lọc
analytics-minimal.js3 để bật hoặc tắt hoàn toàn tập lệnh bị trì hoãn của mình. Ví dụ: bạn chỉ có thể tắt độ trễ trên các trang
gtagv4.js4
Trì hoãn so với Trì hoãn
Trì hoãn sẽ đẩy JavaScript xuống cuối trang tải. Điều này giúp giải quyết các vấn đề chặn hiển thị. Tuy nhiên, JavaScript vẫn phải tải khi trang được hiển thị. Nói cách khác, nó vẫn sẽ tác động đến điểm Core Web Vital của bạn khi nói đến thời gian thực thi JavaScript, kích thước truyền, v.v.
Độ trễ loại bỏ hoàn toàn JavaScript khỏi tải trang/thác nước. Nếu bạn chạy kiểm tra tốc độ, nó sẽ xuất hiện như thể những tập lệnh đó không tồn tại. Chúng có, nhưng thay vì tải khi tải trang, chúng tải theo tương tác của người dùng [di chuyển chuột, cuộn, hẹn giờ, v.v. ] Điều này giúp cải thiện điểm số Core Web Vital của bạn và cải thiện chất lượng nội dung đầu tiên [FCP]
Về khả năng tương thích, trì hoãn là một thông lệ đã có từ lâu. Trì hoãn mọi thứ thường an toàn, đó là chức năng của tính năng Trì hoãn JavaScript trong Perfmatters. Và sau đó, chúng tôi có hộp loại trừ cho các trường hợp có thể cần phải loại trừ tập lệnh do thứ tự tải
Trì hoãn phức tạp hơn một chút, vì bạn không thể trì hoãn mọi tệp JavaScript. Do tải khi tương tác, nó sẽ chỉ hoạt động trên các tập lệnh cụ thể. Đây có thể là một thử nghiệm và sai sót nhỏ, nhưng lợi ích của sự chậm trễ là nó rất hiệu quả. Nó có tác động lớn đến từng tập lệnh bạn sử dụng trên đó
Tin vui là bạn có thể sử dụng đồng thời cả trì hoãn và trì hoãn. Nếu cả hai được áp dụng cho cùng một tệp JavaScript, độ trễ sẽ luôn được ưu tiên và về cơ bản, độ trễ sẽ là dự phòng. Nếu bạn trì hoãn tất cả JavaScript của mình, thì trì hoãn vẫn có thể hữu ích vì bạn có thể có các loại trừ trì hoãn, sau đó sẽ sử dụng trì hoãn
Khắc phục sự cố chậm trễ
Có một số điều cần lưu ý khi sử dụng độ trễ, đặc biệt là cách nó tác động đến một số tập lệnh nhất định
Tắt kết hợp/trình biên dịch
Để Delay JavaScript hoạt động bình thường trong Perfmatters, bạn cần tắt bất kỳ tính năng nào từ plugin của bên thứ ba kết hợp các tệp JavaScript của bạn. Kết hợp JavaScript là một kỹ thuật tối ưu hóa không được dùng nữa kể từ HTTP/2 [nay là HTTP/3]. Tải các tệp riêng lẻ song song giờ đây nhanh hơn
- Nếu bạn đang sử dụng Autoptimize, LiteSpeed, WP Rocket, v.v. , tắt kết hợp JavaScript
- Nếu bạn đang sử dụng Avada, hãy tắt tính năng Trình biên dịch JS
Google Analytics
Ví dụ: với Google Analytics, bạn có thể thấy số liệu thống kê thấp hơn một chút nếu chúng bị trì hoãn. Đó là bởi vì tập lệnh hiện đang tải khi người dùng tương tác. Tuy nhiên, đây không hẳn là một điều xấu. Google không lọc ra tất cả các bot hoặc thư rác, vì vậy nếu bạn trì hoãn Google Analytics, cùng với tính năng hết thời gian chờ, nó có thể cải thiện dữ liệu của bạn vì giờ đây nó thu hẹp dữ liệu xuống người dùng thực tế
Các phép đo tỷ lệ thoát cũng có thể dao động nếu bạn trì hoãn Google Analytics
Nếu menu trên thiết bị di động của bạn không hoạt động ở lần nhấp đầu tiên, có thể bạn cần thêm một loại trừ cho JavaScript cung cấp năng lượng cho nó. Xem của chúng tôi
Cách tắt độ trễ nhấp chuột
Độ trễ nhấp chuột có thể lâu hơn mong muốn nếu bạn có một trang web lớn và phức tạp với nhiều JavaScript. Lấy một menu di động, ví dụ. Dựa trên cách chủ đề hoặc trình tạo trang của bạn được mã hóa, có thể phải đợi tất cả JavaScript tải trước khi mở. Do đó, vô hiệu hóa độ trễ nhấp chuột có thể giúp tăng tốc mọi thứ
Ghi chú. Điều này giả định rằng bạn đã có sẵn các loại trừ độ trễ JS chính xác
Bước 1
Bật “Hiển thị tùy chọn nâng cao” trong Perfmatters
Bước 2
Trong phần JavaScript của Perfmatters, cuộn xuống và bật “Disable Click Delay. ”
Kích hoạt Tắt độ trễ nhấp chuột
Bước 3
Cuộn xuống và nhấp vào “Lưu thay đổi. ”
Cách sửa lỗi nhấp đúp chuột vào siêu liên kết trong iOS [FastClick]
Có một lỗi đã biết trên iOS đôi khi xảy ra khi sử dụng tính năng Delay JS. Lỗi này khiến các liên kết không hoạt động cho đến khi chúng được nhấp hai lần. Chúng tôi hy vọng rằng iOS cuối cùng sẽ thay đổi một số điều để điều này không xảy ra nữa. Tuy nhiên, cho đến lúc đó, có một giải pháp tạm thời là sử dụng thư viện FastClick. Làm theo các bước dưới đây
Bước 1
Bật “Hiển thị tùy chọn nâng cao” trong Perfmatters
Bước 2
Trong phần JavaScript của Perfmatters, cuộn xuống và bật “Bật FastClick. ” Thao tác này sẽ tải FastClick cục bộ từ trang web hoặc CDN của bạn
Kích hoạt FastClick
Bước 3
phần sau từ Trì hoãn thực thi JavaScript. Điều này chỉ cần thiết nếu bạn đang sử dụng tùy chọn “Trì hoãn tất cả tập lệnh”