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:
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.css
và ui.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.css
và ui.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.
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 các đường liên kết tải trước
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>
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>
.