Xoá JavaScript chặn hiển thị

Quy tắc này sẽ kích hoạt khi PageSpeed Insights phát hiện thấy HTML của bạn tham chiếu đến một tệp JavaScript bên ngoài bị chặn trong phần trong màn hình đầu tiên của trang.

Tổng quan

Trước khi có thể hiển thị một trang, trình duyệt phải xây dựng cây DOM bằng cách phân tích cú pháp mã đánh dấu HTML. Trong quá trình này, bất cứ khi nào trình phân tích cú pháp gặp một tập lệnh, trình phân tích cú pháp sẽ phải dừng và thực thi tập lệnh đó trước khi có thể tiếp tục phân tích cú pháp HTML. Trong trường hợp tập lệnh bên ngoài, trình phân tích cú pháp cũng buộc phải đợi tài nguyên tải xuống. Điều này có thể gây ra một hoặc nhiều lượt trả về mạng và độ trễ thời gian hiển thị trang lần đầu. Xem bài viết Thêm tính tương tác với JavaScript để tìm hiểu thêm về mức độ ảnh hưởng của JavaScript đối với đường dẫn hiển thị quan trọng.

Đề xuất

Bạn nên tránh và giảm thiểu việc chặn JavaScript, đặc biệt là các tập lệnh bên ngoài phải được tìm nạp trước khi có thể thực thi. Các tập lệnh cần thiết để hiển thị nội dung trang có thể được xếp cùng dòng để tránh các yêu cầu mạng bổ sung, tuy nhiên, nội dung cùng dòng cần phải nhỏ và phải thực thi nhanh chóng để mang lại hiệu suất tốt. Bạn nên đặt các tập lệnh không quan trọng đối với kết xuất ban đầu ở chế độ không đồng bộ hoặc trì hoãn cho đến sau lượt hiển thị đầu tiên. Xin lưu ý rằng để cải thiện thời gian tải, bạn cũng phải tối ưu hoá việc phân phối CSS.

JavaScript cùng dòng

Tập lệnh chặn bên ngoài buộc trình duyệt phải chờ tìm nạp JavaScript. Điều này có thể thêm một hoặc nhiều lượt trả về mạng trước khi có thể hiển thị trang. Nếu các tập lệnh bên ngoài có kích thước nhỏ, bạn có thể chèn nội dung của các tập lệnh đó trực tiếp vào tài liệu HTML và tránh độ trễ của yêu cầu mạng. Ví dụ: nếu tài liệu HTML có dạng như sau: 
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
Và tài nguyên small.js có dạng như sau: 
  /* contents of a small JavaScript file */
Sau đó, bạn có thể chèn tập lệnh vào cùng dòng như sau: 
<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
Việc chèn nội dung tập lệnh vào cùng dòng sẽ loại bỏ yêu cầu bên ngoài cho small.js và cho phép trình duyệt phân phối thời gian kết xuất đầu tiên nhanh hơn. Tuy nhiên, xin lưu ý rằng cùng dòng cũng làm tăng kích thước của tài liệu HTML và cùng một nội dung tập lệnh có thể cần được đưa vào cùng dòng trên nhiều trang. Do đó, bạn chỉ nên nội dòng các tập lệnh nhỏ để mang lại hiệu suất tốt nhất.

Đặt JavaScript ở chế độ không đồng bộ

Theo mặc định, JavaScript chặn việc tạo DOM và do đó trì hoãn thời gian hiển thị đầu tiên. Để ngăn JavaScript chặn trình phân tích cú pháp, bạn nên sử dụng thuộc tính HTML async trên các tập lệnh bên ngoài. Ví dụ: 
<script async src="my.js">
Xem bài viết Chặn phân tích cú pháp so với JavaScript không đồng bộ để tìm hiểu thêm về các tập lệnh không đồng bộ. Lưu ý rằng các tập lệnh không đồng bộ không đảm bảo sẽ thực thi theo thứ tự đã chỉ định và không nên sử dụng document.write. Các tập lệnh phụ thuộc vào thứ tự thực thi hoặc cần truy cập hoặc sửa đổi DOM hoặc CSSOM của trang có thể cần được viết lại để tính đến những hạn chế này.

Hoãn tải JavaScript

Việc tải và thực thi các tập lệnh không cần thiết cho quá trình hiển thị trang ban đầu có thể bị trì hoãn cho đến khi lượt hiển thị ban đầu hoặc các phần quan trọng khác của trang đã tải xong. Làm như vậy có thể giúp giảm tranh chấp tài nguyên và cải thiện hiệu suất.

Câu hỏi thường gặp

Nếu tôi đang sử dụng thư viện JavaScript như jQuery thì sao?
Nhiều thư viện JavaScript, chẳng hạn như JQuery, được dùng để cải thiện trang nhằm bổ sung tính tương tác, ảnh động và các hiệu ứng khác. Tuy nhiên, nhiều hành vi trong số này có thể được thêm một cách an toàn sau khi nội dung trong màn hình đầu tiên được hiển thị. Hãy điều tra việc làm cho JavaScript như vậy không đồng bộ hoặc trì hoãn việc tải.
Điều gì sẽ xảy ra nếu tôi đang sử dụng khung JavaScript để xây dựng trang?
Nếu nội dung của trang được tạo bằng JavaScript phía máy khách, bạn nên điều tra việc chèn cùng dòng các mô-đun JavaScript có liên quan để tránh việc trả về thêm mạng. Tương tự, việc tận dụng tính năng hiển thị phía máy chủ có thể cải thiện đáng kể hiệu suất tải trang đầu tiên: hiển thị các mẫu JavaScript trên máy chủ để phân phối nhanh lượt kết xuất đầu tiên, sau đó sử dụng mẫu phía máy khách khi trang được tải. Để biết thêm thông tin về tính năng hiển thị phía máy chủ, hãy xem http://youtu.be/VKTWdaupft0?t=14m28s.

Ý kiến phản hồi

Trang này có hữu ích không?