Tải trước tài nguyên website với rel='preload'

[Lướt Web]

Tải trước (preload) giúp trình duyệt biết tài nguyên quan trọng cần tải sớm, cải thiện thời gian hiển thị và chỉ số LCP. Bài viết giải thích cách dùng rel="preload", thuộc tính liên quan và khi nào nên dùng HTTP header hoặc Early Hints.

Tải sớm các tài nguyên quan trọng là bước then chốt để website tải nhanh hơn. Preload là một gợi ý trình duyệt rất hữu ích, cho phép bạn đánh dấu những tài nguyên cần ưu tiên tải ngay từ đầu thay vì để trình duyệt tự phát hiện dần khi đọc HTML.

Preload hoạt động ra sao​

Preload cho phép developer báo cho trình duyệt về một tài nguyên mạng cần tải. Bình thường trình duyệt sẽ tự khám phá tài nguyên trong quá trình xử lý HTML, nhưng khi tài nguyên chỉ được phát hiện muộn (ví dụ qua CSS), preload sẽ thông báo sớm để tránh trễ hiển thị.

Bạn có thể thấy ví dụ trực quan trên trang chủ Shopify, nơi nhiều preload được dùng để tải trước font và hình ảnh quan trọng, giúp chữ và nội dung xuất hiện nhanh hơn.

Ví dụ và lưu ý khi dùng preload​

Đối với web font, cần thêm crossorigin="anonymous" để font được tải qua kết nối không có credential. Bạn cũng có thể chỉ định type để trình duyệt biết MIME type chính xác; nếu trình duyệt không hỗ trợ định dạng đó thì nó có thể bỏ qua preload.

Bạn có thể thêm thẻ preload vào HTML như sau (ghi chú: ký tự ở đây được escape để hiển thị ví dụ):
<link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Với hình ảnh quan trọng (ví dụ ảnh Largest Contentful Paint), nên kết hợp fetchpriority="high" để tăng độ ưu tiên tải, vì ảnh thường mặc định có độ ưu tiên thấp.
<link rel="preload" href="/images/lcp.jpg" as="image" fetchpriority="high">

Tác động lên chỉ số trang và SEO​

Preload có thể cải thiện thời gian tải và chỉ số Largest Contentful Paint (LCP) — một trong các Core Web Vitals của Google. Tốc độ trang cũng ảnh hưởng tới SEO, nên tối ưu preload là một phần quan trọng của tối ưu hiệu năng.

Trong ví dụ thử nghiệm, khi preload ảnh LCP, ảnh này được tải sớm hơn thay vì chỉ được phát hiện sau khi CSS được tải. Kết quả là thời gian hoàn thành request giảm từ 2.0s xuống còn 0.7s và điểm LCP cải thiện rõ rệt.

Preload qua HTTP header và Early Hints​

Ngoài cách nhúng thẻ trong HTML, bạn có thể gửi preload qua header Link trong phản hồi HTTP. Nếu thẻ preload nằm trong ~10KB đầu của HTML, sự khác biệt hiệu năng sẽ không lớn, nhưng header có thể tránh bước quét HTML để phát hiện resource.

Nếu website có TTFB kém, gửi preload dưới dạng 103 Early Hints rất hữu ích. Early Hints được gửi trước khi HTML sẵn sàng, nên tài nguyên như CSS và font có thể bắt đầu tải khi server còn đang sinh HTML, giúp trang sẵn sàng render nhanh hơn khi HTML đến.

Theo dõi và thử nghiệm​

Dùng công cụ giám sát hiệu năng như DebugBear để xác định chính xác tài nguyên có thể hưởng lợi từ preload, chạy thử nghiệm trang để xem thay đổi, và theo dõi tiến triển theo thời gian. Việc thử nghiệm giúp phát hiện cạnh tranh tài nguyên (ví dụ preload có thể cạnh tranh với các request render-blocking khác và ảnh hưởng nhẹ đến FCP), từ đó tinh chỉnh hợp lý.

Tóm lại, preload là công cụ đơn giản nhưng mạnh mẽ để ưu tiên tài nguyên quan trọng, cải thiện LCP và trải nghiệm người dùng. Hãy cân nhắc dùng rel="preload" với crossorigin, type và fetchpriority khi cần, đồng thời thử nghiệm trước/sau để đo hiệu quả.

Nguồn: https://www.debugbear.com/docs/link-rel-preload