Trì hoãn tải JavaScript đúng cách là khi bạn chỉ tải hoặc phân tích cú pháp (parsing) JavaScript sau khi nội dung của trang được tải xong (hay nói cách khác JavaScript sẽ không làm ảnh hưởng đến tốc độ trang hoặc tuyến hiển thị quan trọng).
- Sử dụng sự kiện “onload” chúng ta gọi một file JavaScript bên ngoài (external)
- JavaScript bên ngoài sẽ không tải cho đến khi nội dung của trang được tải xong
- JavaScript bên ngoài sau đó sẽ được thực thi và có hiệu ứng lên trang
Giải thích
Trì hoãn tải JavaScript là một trong các vấn đề với website mà có thể khiến bạn phải vò đầu bứt tóc để tìm ra giải pháp.
Nhiều người nói rằng “chỉ cần sử dụng trì hoãn tải (‘defer’) là được” hoặc “chỉ cần sử dụng tải không đồng bộ (‘async’)“, một số khác thì bảo rằng “cứ đưa JavaScript xuống phần cuối của trang là xong thôi mà” nhưng không có giải pháp nào trong số đó thực sự giải quyết được vấn đề cho phép trang tải đầy đủ rồi sau đó (và chỉ sau đó) mới được tải JavaScript bên ngoài. Chúng cũng không giúp bạn vượt qua được cảnh bảo “trì hoãn tải JavaScript” mà bạn sẽ nhận được khi dùng công cụ kiểm tra tốc độ của Google.
Đoạn mã dùng để gọi file JavaScript ngoài
Đoạn mã này phải được đưa vào file HTML của bạn trước thẻ đóng </body> (ở gần cuối file HTML). Tôi đánh dấu nổi bật tên của file JS bên ngoài.
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Đoạn mã trên làm điều gì?
Đoạn mã trên nói rằng hãy đợi toàn bộ tài liệu tải xong, sau đó mới tải file bên ngoài có tên “defer.js“
Các hướng dẫn cụ thể
- Copy đoạn mã trên
- Paste đoạn mã vào trong HTML ngay trước thẻ đóng </body> (ở gần cuối file HTML)
- Thay tên “defer.js” bằng tên file JS bên ngoài của bạn
- Đảm bảo đường dẫn tới file JS của bạn là chính xác. Ví dụ: nếu bạn chỉ đặt “defer.js” thì điều đó có nghĩa là “defer.js” phải ở cùng thư mục với file HTML.
Đoạn mã trên có thể được áp dụng trong trường hợp nào (và lúc nào thì nó không thể áp dụng được)?
Đoạn mã trên sẽ không tải file JS ngoài mà bạn chỉ định cho đến khi tài liệu được tải hoàn tất. Vì thế bạn không được thêm bất kỳ JavaScript nào vào trong đó mà mã ấy cần thiết cho việc tải trang đúng. Bạn phải phân chia JavaScript của bạn thành hai nhóm. Một nhóm là JavaScript trang cần tải cùng, và nhóm thứ hai là các JavaScript được phép tải sau, sau khi trang tải xong (thí dụ như click vào một sự kiện hoặc cái gì đó tương tự). Tất cả JavaScript có thể đợi sau khi trang tải xong phải được đưa cả vào file bên ngoài mà bạn đưa lệnh gọi ở trên.
Lấy ví dụ, trên trang này tôi sử dụng file trên để trì hoãn các đoạn mã như Google Analystics, Google plus badge (hiển thị ở chân trang), và Viglink (công cụ để tôi kiếm tiền). Chẳng có lý do nào tôi phải tải những file này cho nội dung thuộc màn hình đầu tiên bởi vì chúng không cần thiết để hiển thị nội dung đó. Bạn có thể có cùng loại nội dung trên trang của bạn. Bạn có làm người dùng của mình phải chờ đợi để tải chúng rồi mới cho họ xem nội dung?
Tại sao các phương pháp khác không hiệu quả?
Các phương pháp như là inline (nội tuyến), đưa đoạn mã xuống chân trang, sử dụng “defer” hoặc sử dụng “async” đều không hoàn thành được mục tiêu của việc để trang tải trước sau đó mới tải JS sau và chúng (các phương pháp kể trên) chắc chắn không hoạt động được trên toàn bộ các trình duyệt hiện có (cross browser/khái niệm dùng để chỉ các trang web được phát triển trên nhiều nền tảng trình duyệt khác nhau và cần cho kết quả tương tự).
Tại sao nó lại là vấn đề?
Nó là vấn đề bởi vì Google xem tốc độ trang như một yếu tố xếp hạng và cũng bởi người dùng muốn tốc độ tải trang nhanh hơn. Nó cũng là vấn đề lớn cho SEO trên thiết bị di động (cái vốn có tốc độ kết nối thấp và không ổn định). Google đo tốc độ tải trang thông qua cái được gọi là “tốc độ hiển thị nội dung màn hình đầu tiên”. Điều đó nghĩa là bạn sẽ muốn trang tải càng nhanh càng tốt. Thời gian tải nội dung trên màn hình đầu tiên được Google sử dụng để đánh giá trang web (và đừng quên người dùng của bạn cũng phải đợi nó tải). Google tích cực quảng bá và khuyến nghị việc ưu tiên cho nội dung trên màn hình đầu tiên vì thế việc đưa bất cứ tài nguyên nào (JS, CSS, ảnh, vân vân) ra khỏi tuyến hiển thị quan trọng là nỗ lực xứng đáng để bỏ công thực hiện. Nếu điều gì làm người dùng của bạn hạnh phúc và làm Google hạnh phúc, có lẽ bạn cần phải triển khai nó.
Ví dụ thực tế
Tôi có tạo một trang ở đây để bạn có thể nhìn thấy cách sử dụng đoạn mã: https://varvy.com/pagespeed/defer/defer-example-solved.html
Các file ví dụ cho bạn thử nghiệm
Okay, chỉ để minh họa, tôi có tạo một số trang ví dụ để bạn thử nghiệm. Các trang đều giống nhau. Nó là một trang HTML thuần sử dụng một đoạn mã đợi trong vòng hai giây rồi sau đó nói “hello world”. Bạn có thể kiểm tra và thấy chỉ có một phương thức không làm bạn phải đợi chờ 2 giây thì mới hiển thị nội dung.
- Trang với mã nội tuyến – xem ở đây
- Trang với script ngoài sử dụng “defer” – xem ở đây
- Trang sử dụng đoạn mã được khuyến nghị ở trên – xem ở đây
Điểm quan trọng
Ưu tiên hàng đầu cần phải được hướng vào nhiệm vụ phân phối nội dung cho người dùng càng sớm càng tốt. Nhiều trang web hiện không làm điều đó với cách xử lý JavaScript chưa hợp lý. Người dùng không cần phải chờ đợi để xem nội dung của bạn chỉ vì một số đoạn mã có nhiệm vụ làm điều gì đó bên dưới màn hình đầu tiên. Chẳng thành vấn đề là chân trang web của bạn trông tuyệt thế nào đâu, thực tế là không có lý do nào cho người dùng – người thậm chí có thể còn chẳng bao giờ cuộn chuột xuống bên dưới chân trang phải tải các JavaScript có nhiệm vụ làm chân trang của bạn trông ngon mắt.
Công cụ
Sử dụng công cụ này để kiểm tra cách JavaScript được sử dụng trên trang: https://varvy.com/tools/js/
(Dịch từ bài viết: Defer loading javascript- Tác giả: Patrick Sexton – Website: Varvy)
