Remove render-blocking JavaScript

“Remove render-blocking JavaScript” là một trong những thông báo hay gặp và thường khó khắc phục của nhiều người khi tối ưu hóa tốc độ tải trang bằng Google Page Speed Insight. Bài viết này sẽ phân tích cho bạn nguyên nhân và cách khắc phục chúng như thế nào.

Khi tiến hành, tối ưu hóa trang web, bạn thường nhận được lời khuyên của Google đó là cố gắng trì hoãn việc tải Javascript trước khi fold content được tải lên. Điều này có nghĩa là bạn cần cố gắng trì hoãn việc nạp Javascript hoặc các tệp tin CSS khi trang web đang được tải hoặc chí ít là khi các nội dung chính, quan trọng được tải lên (nói cách khác là cố gắng đừng để nó làn ảnh hưởng đến các nội dung chính hoặc các thành phần quan trọng khi chúng được tải lên làm ảnh hưởng đến thời gian người dùng chờ đợi khi nạp web).

Tại sao chúng ta phải làm điều này ?

Về cơ bản, với tốc độ xử lý của máy tính hiện nay cùng với những điều kiện về network ngày càng tốt hơn thì chuyện tốc độ của một mạng máy tính bàn khi tải một website về có vẻ không còn quan trọng nữa. Nhưng câu chuyện sẽ có nhiều điểm khác biệt khi bạn sử dụng trên thiết bị di động – một loại thiết bị mà sự phổ biến ngày nay đã gần như vượt qua cả máy tính bàn.

Nhiều webmaster vẫn đang loay hoay tìm một giải pháp phù họp để nâng cao tốc độ tải trang, nhất là khi nó là một trong những yếu tố ảnh hưởng quan trọng đến SEO nhưng không phải ai cũng có thể tìm ra được một giải pháp để có thể giải quyết được vấn đề này.

Rất nhiều người sẽ cho bạn một lời khuyên như “bạn chỉ cần ngăn chặn nó tải trước khi trang web được tải xuống“, hay cụ thể hơn như “bạn có thể thiết lập để nó xử lý không đồng bộ với thời gian tải trang bằng cách thiết lập thuộc tính async” hoặc đơn giản hơn như chỉ cần đặt các đoạn mã Javascript của bạn ở cuối trang.

Bản thân tôi cũng đã từng thiết lập rất nhiều cách, nghiên cứu và tìm hiểu khá nhiều nhưng gần như không có một công thức nào được gọi là chung, không có một điều gì là tuyệt đối và gần như không thể áp dụng cùng một hướng dẫn trên 2 trang web mặc dù họ làm vậy đạt được hiệu quả, còn tôi thì không.

Tại sao tôi không thể làm được ?

Mặc dù có nhiều cách để bạn có thể áp dụng, nhưng tùy theo từng trang web cấu trúc có thể khác nhau, cách gọi cũng có thể khác nhau.

Tôi ví dụ, nếu bạn sử dụng giải pháp tải không đồng bộ bằng cách thiết lập thuộc tính async hay chuyển các đoạn mã Javascript xuống cuối trang trong khi nội dung được gọi lại nằm ở đầu trang sẽ làm cho đoạn mã Javascript thực hiện một thay đổi nào đó sẽ không hoạt động được (vì nó không đồng bộ và chưa được tải xong), điều này sẽ gây ra lỗi và làm cho website của bạn gặp vấn đề về trình bày – thường thấy khi bạn thực hiện các hiệu ứng ở đầu trang (ví dụ như slider).

Vậy, giải pháp thực tế để ngăn chặn render-blocking là gì ?

Không nhất thiết bạn phải thiết lập và thực hiện theo cách của tôi, nhưng tôi có một giải pháp tôi cho là hợp lý nhất để giải quyết vấn đề ngăn chặn việc tải các file Javascript. Tôi sẽ cho trang web tải bình thường, bỏ qua các đoạn mã Javascript trước khi tải xong trang. Sau khi trang web được tải xong, tôi sẽ sử dụng Javascript inline để tạo và gọi đoạn mã Javascript của mình.

Hãy xem đoạn mã của tôi bên dưới đây:

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

Tôi dùng màu đỏ để thể hiện đoạn script tôi sẽ chèn vào nội dung sau khi trang web được tải xong. Bạn có thể thay thế đoạn mã này bằng đoạn mã của bạn.

Bạn nên sử dụng như thế nào ?

Như đã nói ở trên, đoạn mã này gọi file defer.js sau khi trang web được tải xong. Vì vậy bạn không nên đặt những đoạn mã có ảnh hưởng lên giao diện bởi nó được gọi sau khi trang web đã được tải xong.

Bạn nên chia các đoạn mã JS mà bạn dự định sử dụng trên trang thành 2 nhóm:

– Nhóm 1: các đoạn mã Javascript mà trang cần tải lên để xử lý những thành phần trong giao diện khi tải trang lên.
– Nhóm 2: các đoạn mã Javascript có thể được tải lên sau sau sau khi trang web đã tải lên.

Các đoạn mã JS ở nhóm 2 dĩ nhiên là phải đợi trang web tải xong mới có thể thực thi (ví dụ như các đoạn mã Google Analytics, các đoạn mã theo dõi click chuột của người dùng…).