Tải trước các yêu cầu chính

Mục Cơ hội của báo cáo Lighthouse sẽ gắn cờ cấp thứ ba của yêu cầu trong chuỗi yêu cầu quan trọng dưới dạng các đề xuất tải trước:

Ảnh chụp màn hình về quá trình kiểm tra yêu cầu tải trước khoá liên quan đến Lighthouse

Cách cờ Lighthouse xác định các đề xuất tải trước

Giả sử chuỗi yêu cầu quan trọng của trang có dạng như sau:

index.html |--app.js |--styles.css |--ui.js

Tệp index.html của bạn khai báo <script src="app.js">. Khi chạy app.js , ứng dụng sẽ gọi fetch() để tải styles.cssui.js xuống. Trang có vẻ như chưa hoàn chỉnh cho đến khi 2 tài nguyên cuối cùng đó được tải xuống, phân tích cú pháp và thực thi. Trong ví dụ trên, Lighthouse sẽ gắn cờ styles.cssui.js là đề xuất.

Khoản tiền có thể tiết kiệm được phụ thuộc vào thời gian mà trình duyệt có thể bắt đầu yêu cầu sớm hơn nếu bạn khai báo tải trước đường liên kết. Ví dụ: nếu app.js mất 200 mili giây để tải xuống, phân tích cú pháp và thực thi, thì mức tiết kiệm tiềm năng cho mỗi tài nguyên là 200 mili giây vì app.js không còn là điểm tắc nghẽn đối với mỗi yêu cầu.

Yêu cầu tải trước có thể giúp trang của bạn tải nhanh hơn.

Nếu không tải trước đường liên kết, bạn chỉ có thể yêu cầu Style.css và ui.js sau khi đã tải xuống, phân tích cú pháp và thực thi app.js.
Nếu không có các đường liên kết tải trước, bạn chỉ được yêu cầu styles.cssui.js sau khi app.js đã được tải xuống, phân tích cú pháp và thực thi.

Vấn đề ở đây là trình duyệt chỉ nhận biết được 2 tài nguyên cuối cùng đó sau khi tải xuống, phân tích cú pháp và thực thi app.js. Nhưng bạn biết rằng những tài nguyên đó rất quan trọng và nên được tải xuống càng sớm càng tốt.

Khai báo đường liên kết tải trước trong HTML để hướng dẫn trình duyệt tải các tài nguyên chính xuống càng sớm càng tốt.

<head>
  ...
  <link rel="preload" href="styles.css" as="style" />
  <link rel="preload" href="ui.js" as="script" />
  ...
</head>
Với các đường liên kết tải trước, style.css và ui.js được yêu cầu cùng lúc với app.js.
Với các đường liên kết tải trước, styles.cssui.js được yêu cầu cùng lúc với app.js.

Xem thêm bài viết Tải trước các thành phần quan trọng để cải thiện tốc độ tải để biết thêm thông tin hướng dẫn.

Khả năng tương thích với trình duyệt

Kể từ tháng 6 năm 2020, trình duyệt dựa trên Chromium hỗ trợ tính năng tải trước. Hãy xem bài viết Khả năng tương thích với trình duyệt để biết thông tin cập nhật.

Hỗ trợ công cụ xây dựng để tải trước

Xem trang Tài sản tải trước của Tooling.Report.

Hướng dẫn dành riêng cho ngăn xếp

Angular

Tải trước các tuyến đường để tăng tốc độ điều hướng.

Magento

Sửa đổi bố cục của giao diện và thêm thẻ <link rel=preload>.

Tài nguyên