Xoá JavaScript chặn hiển thị

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

Tổng quan

Trước khi trình duyệt 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 đá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 thì 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 có 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ể làm phát sinh một hoặc nhiều lần truyền vòng mạng và trì hoãn thời gian hiển thị trang lần đầu tiên. Xem Thêm Tương tác với JavaScript để tìm hiểu thêm về cách JavaScript ảnh hưởng đến các yếu tố quan trọng đường dẫn kết xuất.

Đề xuất

Bạn nên tránh và hạn chế tối đa việc sử dụng tính năng 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 thực thi. Các tập lệnh cần thiết để hiển thị nội dung trang có thể chứa nội dung để tránh các yêu cầu mạng bổ sung. Tuy nhiên, nội dung cùng dòng cần nhỏ và phải thực thi nhanh chóng để mang lại hiệu suất tốt. Những tập lệnh không quan trọng với phần đầu lượt hiển thị nên được thực hiện không đồng bộ hoặc trì hoãn cho đến sau lần 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á hoạt động phân phối CSS.

JavaScript cùng dòng

Các tập lệnh chặn bên ngoài buộc trình duyệt phải chờ tìm nạp JavaScript, phương thức 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 yếu tố bên ngoài có kích thước nhỏ, bạn có thể chèn nội dung của chúng trực tiếp vào tài liệu HTML và tránh độ trễ yêu cầu mạng. Ví dụ: nếu tài liệu HTML trông giố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ể đưa tập lệnh 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 sẽ loại bỏ yêu cầu bên ngoài đối với small.js và cho phép để trình duyệt hiển thị lần đầu nhanh hơn. Tuy nhiên, xin lưu ý rằng nội tuyến cũng sẽ 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 phải cùng dòng nhiều trang. Do đó, bạn chỉ nên đưa các tập lệnh nhỏ vào cùng dòng để 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 xây dựng DOM và do đó làm chậm thời gian hiển thị lần đầu. Người nhận ngăn JavaScript chặn trình phân tích cú pháp, chúng tôi khuyên bạn nên sử dụng HTML async trên các tập lệnh bên ngoài. Ví dụ: 
<script async src="my.js">
Xem Chặn trình 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 được đảm bảo thực thi theo thứ tự đã chỉ định và không nên sử dụng document.write. Những 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 Có thể cần phải viết lại DOM hoặc CSSOM của trang để 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 lần hiển thị trang ban đầu có thể đang bị trì hoãn cho đến khi lần hiển thị ban đầu hoặc các phần quan trọng khác của trang hoàn tất đang tải. Việc này có thể giúp giảm tình trạng 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 cần thêm tính tương tác bổ sung, hoạt ảnh và các hiệu ứng khác. Tuy nhiên, nhiều phần trong số đó có thể thêm các hành vi 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 của JavaScript.
Điều gì sẽ xảy ra nếu tôi đang sử dụng khung JavaScript để tạo trang?
Nếu nội dung của trang được tạo bằng JavaScript phía máy khách, thì bạn nên điều tra cùng dòng các mô-đun JavaScript có liên quan để tránh trọn vòng 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ể đáng kể cải thiện hiệu suất tải trang đầu tiên: hiển thị mẫu JavaScript trên máy chủ để phân phối kết xuất nhanh đầu tiên rồi sử dụng tính năng tạo mẫu phía máy khách khi trang được tải. Để biết thêm thông tin về hiển thị phía máy chủ, hãy xem http://youtu.be/VKTWdaupft0?t=14m28s.

Phản hồi

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