Tối ưu tải trang với preload, prefetch, preconnect

[Nhật Quang]

Resource hints (preload, prefetch, preconnect) giúp trình duyệt biết trước những tài nguyên cần tải, từ đó cải thiện tốc độ hiển thị trang. Bài viết tóm tắt cách dùng từng loại hint, lưu ý khi triển khai và những tình huống nên áp dụng.

Resource hints là các gợi ý cho trình duyệt về những tài nguyên cần tải, mà HTML thường không thể suy ra được. Việc thêm các thẻ [*] tương ứng vào trang giúp trình duyệt bắt đầu các bước tải sớm hơn và ưu tiên hợp lý hơn, giảm độ trễ khi hiển thị nội dung quan trọng.

Preload — tải trước tài nguyên cần thiết cho hiển thị ban đầu​

Preload cho phép bạn báo với trình duyệt về URL cần tải ngay lập tức, nhất là khi URL đó không xuất hiện trực tiếp trong HTML ban đầu. Preload hữu ích cho các tài nguyên quan trọng như CSS hoặc JavaScript cần cho việc render trang đầu tiên.

Preload nên dùng cho tài nguyên cần thiết cho lần hiển thị đầu tiên. Ví dụ: . Lưu ý: trình duyệt (Chrome) sẽ cảnh báo nếu tài nguyên được preload nhưng không được sử dụng trong vài giây sau khi trang load xong — điều này cho thấy bạn có thể đang preload tài nguyên không cần thiết ngay lập tức.

Cần chú ý tới thuộc tính as, vì nó cho trình duyệt biết loại tài nguyên (script, style, image, font, ...). Nếu tài nguyên thực tế khác với giá trị as trong hint, trình duyệt có thể tải tài nguyên hai lần. Với tài nguyên cross-origin (ví dụ font từ CDN), nhớ thêm thuộc tính crossorigin.

Prefetch — tải dự phòng cho các trang/tác vụ tương lai​

Prefetch tải các tài nguyên có độ ưu tiên thấp, dùng khi bạn nghĩ người dùng sẽ cần chúng sau này (ví dụ mã JS cho trang kế tiếp). Prefetch không làm chậm trải nghiệm trang hiện tại vì nó có ưu tiên tải thấp hơn preload, nhưng Chrome đôi khi bắt đầu prefetch khá sớm nên cần cân nhắc.

Ví dụ sử dụng: . Prefetch phù hợp để rút ngắn thời gian chờ khi người dùng chuyển trang hoặc bắt đầu tương tác mới.

Preconnect — thiết lập kết nối sớm đến server​

Preconnect giúp thiết lập trước các bước cần thiết để kết nối đến một domain (DNS lookup, TCP, TLS), nên khi thực sự gửi yêu cầu, trình duyệt có thể tận dụng kết nối đã sẵn sàng và giảm số lượt round-trip.

Dùng khi bạn biết tài nguyên sẽ đến từ một domain cụ thể nhưng chưa biết đường dẫn chính xác: . Preconnect đặc biệt hữu ích cho yêu cầu tới các third-party hoặc CDN.

Lựa chọn giữa preload, prefetch và preconnect​

• 
  Preload: dùng cho tài nguyên cần ngay trong lần hiển thị đầu tiên.
• Prefetch: dùng cho tài nguyên dự đoán sẽ cần trong tương lai, ưu tiên thấp.
• Preconnect: dùng để giảm chi phí thiết lập kết nối cho domain sẽ dùng sau này.

Vấn đề thường gặp và mẹo​

• Đảm bảo đặt thuộc tính as cho preload để trình duyệt ưu tiên và gửi header phù hợp.
• Tránh preload quá nhiều tài nguyên không cần thiết, vì điều này có thể lãng phí băng thông và tài nguyên CPU.
• Prefetch nên dùng có chọn lọc; nếu trình duyệt prefetch quá sớm có thể làm chậm nội dung hiện tại.
• Kiểm tra việc preload tương thích với các cấu trúc CSS như @import — chuỗi stylesheet có thể gây chậm render, và preload từng stylesheet giúp phá bỏ chuỗi này.
• Safari hiện không hỗ trợ prefetch, nhưng hầu hết trình duyệt hiện đại đều hỗ trợ các hint khác.
• Thử nghiệm và đo lường (ví dụ FCP, Largest Contentful Paint) để chắc thay đổi thực sự cải thiện trải nghiệm người dùng trước khi triển khai rộng.

Ghi chú kỹ thuật nhanh​

• Ví dụ thẻ preload:
• Ví dụ prefetch:
• Ví dụ preconnect:
• JavaScript-based preloading cần trình duyệt parse và thực thi mã JS trước khi bắt tải, nên preload qua HTML sẽ bắt đầu sớm hơn.

Tóm lại, resource hints là công cụ mạnh để tối ưu thời gian tải trang nếu dùng đúng mục đích: preload cho tài nguyên cần ngay, prefetch cho tài nguyên dự đoán sẽ cần, preconnect để giảm chi phí kết nối. Luôn đo lường hiệu ứng thực tế trên các chỉ số quan trọng trước khi áp dụng rộng rãi.

Nguồn: https://www.debugbear.com/blog/resource-hints-rel-preload-prefetch-preconnect