Làm cách nào để trì hoãn thực thi JavaScript?

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()

1. tên chức năng - Tên chức năng cho chức năng được thực thi
2. mili giây - Số mili giây

Tự mình thử

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

1. tên chức năng - Tên chức năng cho chức năng được thực thi
2. 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.js

6 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.js

7) 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ờ

1. 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
2. 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.js

9

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.js

0

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.js

1 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”

________số 8_______

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.js

0

ga( '
ga('
google-analytics.com/analytics.js

1

Cookie Borlabs

ga( '
ga('
google-analytics.com/analytics.js

2

tuân thủ

ga( '
ga('
google-analytics.com/analytics.js

3

Thông báo Cookie & Tuân thủ GDPR

ga( '
ga('
google-analytics.com/analytics.js

4

CookieCó

ga( '
ga('
google-analytics.com/analytics.js

5

Divi

ga( '
ga('
google-analytics.com/analytics.js

6

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.js

7

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.js

8

tìm kiếm phần tử

ga( '
ga('
google-analytics.com/analytics.js

9

blog nề GeneratePress

analytics.js

0_______8_______1

analytics.js

2

Tuân thủ cookie GDPR

analytics.js

3

Thông báo cookie nhẹ

analytics.js

4

Hình thức Ninja

analytics.js

5

analytics.js

6

Biểu ngữ cookie thật

analytics.js

7

thanh trượt cách mạng

analytics.js

8

Hình ảnh thích ứng ShortPixel

analytics.js

9

thanh trượt thông minh

gtagv4.js

0

Thanh trượt thông minh Pro

gtagv4.js

1

Thư viện sản phẩm duy nhất WooC Commerce

gtagv4.js

2

Cách lọc tập lệnh bị trì hoãn

Bạn có thể sử dụng bộ lọc

analytics-minimal.js

2 để 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.js

3

Bạn có thể sử dụng bộ lọc

analytics-minimal.js

3 để 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.js

4

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”

Làm cách nào để trì hoãn việc thực thi chức năng JavaScript?

Làm cách nào để thêm độ trễ thời gian trong JavaScript?

Làm cách nào để đợi 5 giây trong JavaScript?

Làm cách nào để dừng thực thi trong JavaScript một thời gian?