Technical SEO

Prefetch

Resource hint yêu cầu trình duyệt tải trước tài nguyên có khả năng được sử dụng trong tương lai gần (ví dụ: trang tiếp theo).

4 lượt xem Cập nhật: 01/06/2026

Prefetch là gì?

Prefetch là một resource hint trong HTML, dùng để yêu cầu trình duyệt tải trước một tài nguyên (như trang HTML, tập tin JavaScript, CSS hoặc font) mà người dùng có khả năng cần đến trong tương lai gần — thường là trang tiếp theo trong hành trình duyệt web. Khác với preload (tải ngay vì cần cho trang hiện tại) hay preconnect (kết nối sớm tới miền), prefetch hoạt động ở mức độ ưu tiên thấp, không ảnh hưởng đến hiệu suất hiển thị trang hiện tại.

Tại sao quan trọng trong SEO?

Google và các công cụ tìm kiếm ngày càng coi trọng trải nghiệm người dùng (UX) như một yếu tố xếp hạng gián tiếp. Prefetch giúp giảm thời gian tải trang tiếp theo — đặc biệt hữu ích trên thiết bị di động hoặc mạng chậm — từ đó cải thiện chỉ số Interaction to Next Paint (INP), Time to Interactive (TTI) và tỷ lệ thoát. Dù prefetch không trực tiếp ảnh hưởng đến thứ hạng, nó hỗ trợ tối ưu hóa Core Web Vitals và tăng khả năng giữ chân người dùng — hai yếu tố Google xác nhận là tín hiệu chất lượng trang.

Đáng chú ý: Prefetch chỉ phát huy tác dụng khi được triển khai đúng ngữ cảnh (ví dụ: trang danh sách → trang chi tiết; trang chủ → trang sản phẩm nổi bật). Việc lạm dụng có thể gây lãng phí băng thông và làm chậm tải trang hiện tại nếu trình duyệt không xử lý đúng ưu tiên.

Cách hoạt động

Khi trình duyệt gặp thẻ <link rel="prefetch" href="...">, nó sẽ:

  1. Đặt yêu cầu tải tài nguyên vào hàng đợi với mức ưu tiên thấp nhất (dưới cả fetch bình thường),
  2. Chỉ thực hiện tải khi trình duyệt rảnh — tức là sau khi trang hiện tại đã render xong và không còn tác vụ nào cấp cao hơn đang chạy,
  3. Lưu tài nguyên vào bộ nhớ đệm (cache) để sử dụng khi người dùng điều hướng tới URL đó,
  4. Bỏ qua nếu tài nguyên đã có trong cache hoặc nếu người dùng rời trang trước khi tải xong.

Trình duyệt không chặn render, không thay đổi DOM và không thực thi script được prefetch — trừ khi người dùng thực sự truy cập vào trang đó.

Hướng dẫn thực hiện

Dưới đây là các bước triển khai prefetch an toàn và hiệu quả:

  1. Xác định tài nguyên nên prefetch: Chỉ chọn những trang có tỷ lệ chuyển đổi cao (ví dụ: trang danh mục → trang sản phẩm đầu tiên; trang blog → bài viết liên quan được đọc nhiều nhất). Tránh prefetch toàn bộ danh sách hoặc trang không rõ nhu cầu.
  2. Thêm thẻ link trong <head>: 
    <link rel="prefetch" href="/san-pham/ao-thun-cotton.html" as="document">

    Thuộc tính as="document" giúp trình duyệt hiểu đây là trang HTML — từ đó áp dụng đúng chiến lược cache và ưu tiên. Các giá trị phổ biến khác: script, style, font, image.

  3. Ưu tiên theo ngữ cảnh: Dùng JavaScript để prefetch có điều kiện (ví dụ: khi người dùng cuộn xuống 70% trang hoặc hover vào nút “Xem thêm”). Đây là cách nâng cao, phù hợp với website có dữ liệu hành vi rõ ràng.
  4. Thử nghiệm và đo lường: Kiểm tra bằng DevTools → tab Network (filter: prefetch) và so sánh thời gian tải trang tiếp theo trước/sau khi bật. Theo dõi chỉ số Cache Hit Rate trong báo cáo Lighthouse.
  5. Loại bỏ prefetch không còn cần thiết: Cập nhật hoặc xoá thẻ khi nội dung thay đổi (ví dụ: sản phẩm ngừng kinh doanh, bài viết bị gỡ).

Lỗi thường gặp

  • Tải sai loại tài nguyên: Dùng prefetch cho file JS/CSS mà không kèm as → trình duyệt không biết cách cache đúng → hiệu quả giảm. Cách khắc phục: Luôn khai báo as phù hợp.
  • Prefetch quá nhiều URL cùng lúc: Gây cạnh tranh băng thông, làm chậm tải trang hiện tại trên mạng 3G/4G. Cách khắc phục: Giới hạn tối đa 3–5 prefetch mỗi trang; ưu tiên theo thứ tự chuyển đổi thực tế.
  • Dùng prefetch cho trang không cache được: Ví dụ: trang có header Cache-Control: no-store hoặc yêu cầu đăng nhập. Trình duyệt sẽ bỏ qua hoặc tải nhưng không lưu. Cách khắc phục: Kiểm tra header HTTP của URL đích trước khi prefetch.
  • Không kiểm tra tương thích trình duyệt: Prefetch được hỗ trợ đầy đủ trên Chrome, Edge, Firefox và Safari từ phiên bản 16.2 trở lên. Cách khắc phục: Dùng if ('relList' in document.createElement('link')) để kiểm tra hỗ trợ trước khi inject.

Ví dụ thực tế

Một website thương mại điện tử bán quần áo triển khai prefetch như sau:

Vị trí trang Tài nguyên được prefetch Lý do chọn Kết quả đo được (sau 2 tuần)
Trang danh mục “Áo thun” /san-pham/ao-thun-cotton.html Bài viết này chiếm 38% lượt click từ danh mục Thời gian tải trang chi tiết giảm trung bình 1,2s trên mạng 4G
Trang chủ /tin-tuc/cach-chon-ao-thun-phu-hop.html Bài viết nằm trong block “Bạn có thể quan tâm”, CTR 22% Tỷ lệ đọc bài viết tăng 14%, thoát giảm 9%
Trang sản phẩm /checkout/ 72% người xem sản phẩm tiến tới thanh toán Thời gian load checkout giảm 800ms, tỷ lệ hoàn tất đơn tăng 3,2%

Lưu ý: Tất cả các URL đều có header Cache-Control: public, max-age=31536000 và không yêu cầu xác thực.

Câu hỏi thường gặp

Prefetch có ảnh hưởng đến điểm Lighthouse không?

Không trực tiếp. Prefetch không xuất hiện trong báo cáo Lighthouse như một tiêu chí đánh giá, nhưng nếu giúp cải thiện Time to Interactive hoặc INP khi người dùng điều hướng, thì điểm tổng thể có thể tăng gián tiếp. Cần đo lường thực tế, không dựa vào giả định.

Có nên dùng prefetch cho trang AMP?

Không cần thiết. Trang AMP đã được tối ưu hóa sẵn về tốc độ và sử dụng cơ chế prefetch riêng (qua <amp-next-page>). Việc thêm prefetch thủ công có thể gây xung đột hoặc thừa tải.

Prefetch và preload khác nhau thế nào?

Preload tải tài nguyên ngay lập tức vì nó cần cho trang hiện tại (ví dụ: font quan trọng, script khởi tạo). Prefetch tải trong tương lai, với ưu tiên thấp, nhằm chuẩn bị cho trang tiếp theo. Chúng bổ sung chứ không thay thế nhau — tùy trường hợp có thể dùng song song.