`preload`, `prefetch`, `preconnect` và `dns-prefetch` khác nhau thế nào? Dùng cái nào khi nào?

Cả bốn đều là resource hint, khác nhau ở thời điểm và mức độ công việc trình duyệt làm trước.

• preload — tải ngay, ưu tiên cao một tài nguyên trang hiện tại chắc chắn cần nhưng trình duyệt phát hiện muộn (font trong CSS, ảnh LCP nằm trong CSS background, script tách chunk). Bắt buộc khai as đúng, sai as sẽ tải hai lần.
• prefetch — tải với ưu tiên thấp nhất, cho điều hướng tương lai. Ví dụ prefetch bundle của trang chi tiết khi người dùng đang ở trang danh sách.
• preconnect — không tải file, chỉ bắt tay trước với origin khác: DNS + TCP + TLS. Có lợi khi biết chắc sắp gọi tới CDN/API đó. Đừng khai quá 2-3 origin vì mỗi kết nối vẫn tốn tài nguyên.
• dns-prefetch — chỉ phân giải DNS, rẻ hơn preconnect, hợp làm phương án dự phòng cho origin ít chắc chắn.

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://api.example.com">
<link rel="prefetch" href="/_next/static/chunks/product-detail.js">

Lưu ý thực chiến: font phải có crossorigin dù cùng origin, thiếu sẽ tải lại lần hai.

Và preload quá nhiều thứ sẽ giành băng thông với chính tài nguyên quan trọng, làm LCP xấu đi.