Remove render blocking javascript

Bài đăng này đã không được cập nhật trong 8 năm

Loại bỏ JavaScript chặn hiển thị trong nội dung trong màn hình đầu tiên của PageSpeed Insights giúp trang web của bạn tải nhanh hơn. Điều này là do nội dung của trang web sẽ không được tiếp tục tải cho tới khi các tập tin JavaScript và CSS được tải xong. Vì vậy, nội dung trên trang web của bạn đã bị trì hoãn để chờ đợi các tập tin JavaScript(và CSS).

Loại bỏ JavaScript chặn hiển thị trong nội dung trong màn hình đầu tiên là cảnh bảo chúng ta rất hay gặp khi sử dụng PageSpeed của google. Đây chỉ là cảnh báo, tuy nhiên việc sửa lỗi này sẽ làm cho trang web của bạn tải nhanh hơn. Để sửa được lỗi này, bạn chỉ cần cho các tập tin JavaScript tải ở cuối cùng hoặc tải không đồng bộ.

1. Chèn trực tiếp nội dung Javascript vào thẻ <script>

Đối với các file javascript nhỏ chúng ta có thể chèn trực tiếp vào thẻ <script></script> trong <head></head>. Ví dụ chúng ta sử dụng:

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

thay vì

<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

2. Tải không đồng bộ các tài nguyên JavaScript

Thuộc tính async của JavaScript cho phép bạn tải không đồng bộ các tài nguyên JavaScript. Nội dung HTML sẽ được tiếp tục tải mà không cần chờ đợi các tài nguyên JavaScript. Sử dụng thuộc tính async như sau:

<script async type=”text/javascript” src=”myjs.js”></script>

Thuộc tinh defer của JavaScript cho phép bạn trì hoàn tải các tài nguyên JavaScript cho đến khi nội dung HTML được tải xong. Tài nguyên JavaScript sẽ được tải sau khi toàn bộ HTML được tải xong. Sử dụng thuộc tính defer như sau:

<script defer type=”text/javascript” src=”myjs.js”></script>

Mặc dù phương pháp này giúp nội dung trên trang web được hiển thị nhanh nhất. Nhưng nếu bạn không có một chút kiến thức về cách mà JavaScript làm việc, phương pháp trên cũng không an toàn. Vì đây là phương pháp tải không đồng bộ, nó có thể dẫn đến việc trang web hoạt động không đúng cách.

Cảm ơn đã đọc và chúc các bạn thành công.

Bài viết tham khảo từ https://developers.google.com/speed/docs/insights/BlockingJS

JavaScript

Mục lục