Preload các yêu cầu quan trọng

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:

preload yêu cầu chính

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.js

Tệ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.cssui.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.cssui.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.

khi chưa preload
Khi không có link preload, style.cssui.js chỉ được yêu cầu sau khi app.js đã tải về, phân tích và thực thi.

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>
khi áp dụng preload
Khi áp dụng link preload, styles.cssui.js được yêu cầu vào cùng thời điểm với app.js

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)

Viết một bình luận