Khu vực cơ hội của Lighthouse bật cờ cảnh báo cho các yêu cầu ở cấp độ thứ ba trong chuỗi yêu cầu quan trọng của bạn như là một ứng cử viên tiềm năng có khả năng preload:
Làm thế nào cảnh báo Lighthouse phát hiện các ứng cử viên cần preload?
Giả sử chuỗi yêu cầu quan trọng trên trang của bạn trông giống như thế này:
index.html
|--app.js
|--styles.css
|--ui.jsTệp index.html của bạn khai báo <script src=”app.js”>. Khi app.js chạy, nó gọi fetch() để tải về styles.css và ui.js. Trang không thể hiển thị hoàn chỉnh cho đến khi 2 tài nguyên cuối cùng này được tải về, phân tích cú pháp và thực thi. Sử dụng ví dụ ở trên, Lighthouse sẽ gắn cờ cảnh báo cho styles.css và ui.js như là các ứng cử viên cần preload.
Thời gian có thể tiết kiệm được (potential saving) dựa trên việc trình duyệt có khả năng bắt đầu gửi các yêu cầu sớm đến mức nào nếu bạn khai báo link preload. Lấy ví dụ, nếu app.js cần 200ms để tải về, phân tích và thực thi, thời gian tiết kiệm được cho từng tài nguyên là 200ms vì app.js không còn là vấn đề thắt cổ chai (bottleneck) cho từng yêu cầu nữa.
Các yêu cầu preload có thể làm cho trang của bạn tải nhanh hơn.
Vấn đề ở đây là trình duyệt chỉ có thể nhận biết về 2 tài nguyên cuối cùng này sau khi nó tải về, phân tích cú pháp và thực thi app.js. Nhưng bạn biết các tài nguyên này quan trọng và nên tải về càng sớm càng tốt.
Khai báo link preload của bạn
Khai báo link preload trong HTML của bạn để hướng dẫn trình duyệt tải về các tài nguyên quan trọng sớm nhất có thể.
<head>
...
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="ui.js" as="script">
...
</head>
Liên kết từ Can I Use sẽ cho bạn thấy các trình duyệt hiện đang hỗ trợ link preload.
Bạn cũng có thể tham khảo thêm bài viết Preload các tài nguyên quan trọng để cải thiện tốc độ tải trang (trong bài viết này có ví dụ minh họa thực tế về việc triển khai preload sẽ đem lại cơ hội cải thiện tốc độ trang tốt như thế nào).
(Dịch từ bài viết Preload key requests, trang web[.]dev)
