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

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

Ảnh chụp màn hình kết quả kiểm tra các yêu cầu khoá Tải trước trê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ó dạng như sau:

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

Tệp index.html khai báo <script src="app.js">. Khi app.js chạy , lệnh này sẽ gọi fetch() để tải styles.css và ui.js xuống. Trang này có vẻ 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. Sử dụng ví dụ trên, Lighthouse sẽ gắn cờ styles.css và ui.js là các đề xuất.

Mức tiết kiệm tiềm năng được xác định dựa trên mức độ mà trình duyệt có thể sớm hơn để bắt đầu các yêu cầu nếu bạn đã khai báo đường liên kết tải trước. 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ời gian 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 từng 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 có đường liên kết tải trước, bạn chỉ cần 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ó đường liên kết tải trước, styles.css và ui.js chỉ được yêu cầu 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 trong 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à cầ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 đường liên kết tải trước, bạn cần yêu cầu định dạng style.css và ui.js cùng lúc với app.js.
Với đường liên kết tải trước, styles.css và ui.js được yêu cầu cùng lúc với app.js.

Xem thêm Tải trước các thành phần quan trọng để cải thiện tốc độ tải để xem thêm 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, tính năng tải trước được hỗ trợ trong các trình duyệt dựa trên Chromium. Xem Khả năng tương thích với trình duyệt để được cập nhật.

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

Xem các 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 trước để 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