Resource hint là các tag <link> báo cho trình duyệt fetch hoặc kết nối tới tài nguyên sớm, tối ưu hiệu năng tải. Mỗi cái phục vụ một nhu cầu thời điểm/ưu tiên khác nhau.
html
Resource hint là các tag <link> báo cho trình duyệt fetch hoặc kết nối tới tài nguyên sớm, tối ưu hiệu năng tải. Mỗi cái phục vụ một nhu cầu thời điểm/ưu tiên khác nhau.
preload — "Tôi cần cái này cho trang hiện tại, fetch nó ngay với ưu tiên cao." Cho các tài nguyên quan trọng mà parser phát hiện muộn: font, hero image, các tài sản được CSS tham chiếu. Yêu cầu as để trình duyệt đặt ưu tiên/header đúng.
preconnect — "Tôi sẽ kết nối tới origin này sớm; hãy làm DNS lookup + TCP + bắt tay TLS ngay." Tiết kiệm các round-trip trước request đầu tiên tới một bên thứ ba (API, font host, CDN). Dùng cho một vài origin quan trọng.
dns-prefetch — phiên bản nhẹ hơn của preconnect: chỉ phân giải DNS. Tốt làm fallback / cho nhiều origin.
prefetch — "Tôi có thể sẽ cần cái này cho lần điều hướng tiếp theo; fetch nó với ưu tiên thấp khi rảnh." Cho các trang/tài sản có khả năng dùng tiếp theo. Được cache cho tương lai, không phải cho trang hiện tại.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
Font được phát hiện muộn (trình duyệt phải parse CSS trước), nên preload chúng tránh được độ trễ văn bản vô hình.
Preload tất cả mọi thứ sẽ phản tác dụng — nó cạnh tranh băng thông với các tài nguyên thực sự quan trọng. Chỉ hint một vài cái quan trọng nhất.
Resource hint cắt giảm độ trễ trên critical path: preconnect loại bỏ độ trễ bắt tay cho các bên thứ ba, preload ưu tiên các tài sản quan trọng được phát hiện muộn (font, ảnh LCP), và prefetch làm cho lần điều hướng tiếp theo mượt như tức thì.
Được dùng một cách chính xác, chúng cải thiện đáng kể Core Web Vitals.