Các resource hint như preload, prefetch và preconnect là gì?

Mỗi cái làm gì

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

Một ví dụ thực tế phổ biến: font

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.

Cảnh báo: đừng hint quá nhiều

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.

Tại sao điều này quan trọng

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.