Delay Javascript theo tương tác người dùng

Nếu ai đó hỏi tôi làm cách nào để cải thiện thời gian tải trang web và các chỉ số quan trọng trong Google Speed Lighthouse, tôi sẽ trả lời "Delay tất cả các tệp Javascript không cần thiết".

Hôm nay, tôi sẽ chia sẻ với bạn những lợi ích của việc Delay Javascript và cách bạn có thể triển khai nó trên trang web của mình.

Lợi ích của việc Delay Javascript

Việc này mạng lại sự cải thiện cực kỳ lớn cho các chỉ số quan trọng về web như:

• First Contentful Paint
• Total Blocking Time (& First Input Delay)
• Time to Interactive

Bạn cũng có thể trì hoãn các tập lệnh của bên thứ ba dùng để theo dõi như GA4, Facebook Pixel,... Tuy nhiên tôi không khuyến khích trì hoãn những tập lệnh này, vì nó sẽ làm sai lệch dữ liệu thống kê của bạn.

Cho nên đó là việc chúng ta cần đánh đổi, chỉ số sẽ không thể đạt 100%. Phương án thay thế để đạt 100% là sử dụng tracking của Cloudflare, nhược điểm là thông số không chi tiết bằng những thằng khác.

Async, Defer, Delay

Hầu hết các trang web đều từng sử dụng Async và Defer để cải thiện thời gian tải trang và điểm hiệu suất, nhưng tăng không đáng kể.

Trước tiên chúng ta hãy xem các đoạn mã để hiểu sự khác biệt trong cách triển khai từng kỹ thuật.

Normal Load
<script src="script.js"></script>

Async
<script async src="script.js"></script>

Defer
<script defer src="script.js"></script>

Delay
<script delay="script.js"></script>

<script delay="script.js"></script> không phải là một thuộc tính HTML chính thức. Nó chỉ đóng vai trò giữ chỗ. Tôi sẽ sử dụng đoạn code delay Javascript để thay thế delay = src khi có tương tác người dùng.

Khi sử dụng thuộc tính async , nó sẽ tải tập lệnh song song với việc phân tích trang và sau đó thực thi nó ngay khi tập lệnh tải.

Khi sử dụng thuộc tính defer , nó sẽ tải tập lệnh song song với việc phân tích trang nhưng chỉ thực thi sau khi trang tải xong.

Như bạn có thể đoán, defer là lựa chọn tốt hơn nhiều so với async. Bạn có thể tìm thấy sự so sánh chi tiết giữa cả hai trong bài viết này của Flavio Copes.

Còn phương pháp delay, do thiếu thuộc tính src nên trình duyệt sẽ không tải tập lệnh. Vì thế nó cũng mang lại hiệu suất và điểm số tốt.

Cách thực hiện

Nếu bạn đang sử dụng WordPress, đã có sẵn một số plugin có thể triển khai tính năng này ngay lập tức. Nhưng nếu bạn đam mê viết code mà không sử dụng plugin hoặc dùng các trình Builder kéo thả có thể tham khảo phương án 2.

Dành cho trang web WordPress

Các plugin sau cung cấp tính năng Delay JavaScript:

• Flying Scripts (Miễn phí)
• LiteSpeed Cache (Miễn phí)
• WP-Rocket
• FlyingPress
• Perfmatters

Delay Javascript bằng code

Đây là mã tôi sử dụng để Delay Javascript. Vị trí tốt nhất để đặt mã này là ở phần cuối cùng, cụ thể là footer.

const autoLoadDuration = 5; //In Seconds
const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend", "scroll"];

const autoLoadTimeout = setTimeout(runScripts, autoLoadDuration * 1000);

eventList.forEach(function(event) {
    window.addEventListener(event, triggerScripts, { passive: true })
});

function triggerScripts() {
    runScripts();
    clearTimeout(autoLoadTimeout);
    eventList.forEach(function(event) {
         window.removeEventListener(event, triggerScripts, { passive: true });
    });
}

function runScripts() {
    document.querySelectorAll("script[delay]").forEach(function(scriptTag) {
        scriptTag.setAttribute("src", scriptTag.getAttribute("delay"));
    });
}

Giải thích: mã trên sẽ tìm kiếm tất cả các tập lệnh <script> có thuộc tính delay và thay thế thành src khi có tương tác người dùng (nhấn phím, nhấn chuột, di chuột, cuộn, chạm, vuốt) hoặc sau 5s.

2 biến autoLoadDuration và eventList bạn đều có thể chỉ định theo ý riêng của mình.

Những tập tin trì hoãn một cách an toàn

Sau đây là các danh mục tệp mà tôi khuyên bạn nên trì hoãn. Tuy nhiên, bạn vẫn phải đảm bảo rằng mọi thứ vẫn hoạt động ổn định như trước khi triển khai.

• Tập lệnh quảng cáo (Google Adsense, Amazon Ads, Taboola, Outbrain, Media.net,...).
• Nhúng nút theo dõi, thích trên mạng xã hội.
• Live chat (Zendesk, Customerly, Intercom, tawk.to, Olark,...).
• Các tập lệnh của bên thứ ba (Nhận xét Disqus, Nhận xét trên Facebook, Đồng ý sử dụng cookie, v.v.)
• Tập lệnh không cần thiết để hiển thị nội dung trong màn hình đầu tiên.

Để chắn ăn hơn, bạn cần kiểm tra trong Devtools thật kỹ các tệp bị trì hoãn xem nó có ảnh hưởng đến trải nghiệm người dùng không.