Preload vs Prefetch — resource hint

Preload và prefetch là 2 resource hint báo trình duyệt tải tài nguyên sớm hơn trước khi cần. Preload phục vụ tài nguyên cần ngay trong trang hiện tại, prefetch phục vụ trang điều hướng tiếp theo.

Preload và prefetch là gì

Cả hai đều dùng thẻ <link> trong <head> để báo trình duyệt tải tài nguyên trước thời điểm tự nhiên phát hiện ra chúng. Trình duyệt thường phát hiện font, hero image hoặc script muộn — sau khi parse xong HTML và CSS.

Điểm khác biệt cốt lõi: preload phục vụ trang đang xem, prefetch phục vụ trang điều hướng tiếp theo.

Preload — tài nguyên cần ngay cho trang hiện tại

<link rel="preload" href="..." as="..."> báo trình duyệt tài nguyên này là ưu tiên cao cho trang hiện tại. Trình duyệt tải ngay khi parse <head>, song song với các tài nguyên chặn hiển thị khác.

Phù hợp cho: hero image (phần tử LCP), font web, CSS quan trọng, script thực thi sớm.

Prefetch — tài nguyên cho điều hướng tiếp theo

<link rel="prefetch" href="..."> báo trình duyệt tài nguyên này có thể cần ở trang điều hướng tiếp theo. Trình duyệt tải ở mức ưu tiên thấp nhất — sau khi trang hiện tại đã tải xong và CPU nhàn rỗi.

Phù hợp cho: HTML trang sản phẩm hàng đầu, chunk JS cho route tiếp theo, hình ảnh hero của trang tiếp theo.

So sánh 7 khía cạnh

Khía cạnh	preload	prefetch
Mục đích	Trang hiện tại — tài nguyên cần ngay	Trang tiếp theo — tài nguyên dự phòng
Mức ưu tiên	Cao	Thấp nhất (nhàn rỗi)
Thời điểm tải	Ngay khi parse <head>	Sau khi trang hiện tại tải xong
Lưu cache	Cache bộ nhớ (phiên hiện tại)	Cache HTTP (đa phiên)
Thuộc tính as	Bắt buộc (font, image, script, style)	Không bắt buộc
Hỗ trợ trình duyệt 2026	96%+	96%+
Rủi ro khi dùng sai	Cạnh tranh băng thông với tài nguyên thật cần	Tốn dữ liệu của người dùng nhàn rỗi

Preload — 4 trường hợp dùng đúng

Preload chỉ dành cho tài nguyên thật sự cần ngay cho việc hiển thị. Preload sai làm chậm tải vì cạnh tranh băng thông với tài nguyên khác.

4 loại tài nguyên nên preload

Loại tài nguyên	Thuộc tính as	Trường hợp cụ thể
Font web woff2	as=”font” type=”font/woff2″ crossorigin	Font body và heading xuất hiện ngay khi tải trang
Hero image	as=”image” fetchpriority=”high”	Phần tử LCP của trang
CSS quan trọng ngoài	as=”style”	Stylesheet chặn hiển thị
Script cần chạy sớm	as=”script”	Script cần thực thi trước khi hiển thị

Markup preload chuẩn cho từng loại

<!-- Font web — bắt buộc crossorigin dù cùng domain -->
<link rel="preload"
      href="/fonts/inter-vietnamese.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

<!-- Hero image — LCP element -->
<link rel="preload"
      href="/images/hero.webp"
      as="image"
      fetchpriority="high">

<!-- CSS quan trọng ngoài -->
<link rel="preload" href="/critical.css" as="style">

<!-- Script cần chạy sớm -->
<link rel="preload" href="/main.js" as="script">

Giới hạn số preload

Preload trên 5 tài nguyên bắt đầu cạnh tranh băng thông. Giới hạn 3–5 preload cho tài nguyên cần hiển thị phần đầu trang.

Kết hợp preload font với subset woff2 để tối đa lợi ích.

Prefetch — 4 trường hợp dùng đúng

Prefetch phát huy tác dụng khi biết trước người dùng sẽ đi đâu tiếp theo. Trang có luồng điều hướng rõ ràng (trang chủ → sản phẩm → thanh toán) là ứng viên tốt nhất.

4 loại tài nguyên nên prefetch

Tài nguyên	Pattern	Ví dụ thực tế
HTML trang tiếp theo	rel=”prefetch”	Trang chủ prefetch top 3 trang sản phẩm
Chunk JS route khác	rel=”prefetch”	SPA prefetch chunk route lazy load
Hình ảnh hero trang tiếp	rel=”prefetch”	Slide thứ 2 của carousel
JSON API trang tiếp	rel=”prefetch”	Danh sách sản phẩm trang 2

Smart prefetch — thư viện Quicklink

Quicklink (Google) tự động prefetch các link đang hiển thị trong tầm nhìn — không tốn dữ liệu cho link người dùng không thấy. Thiết lập: npm install quicklink và khởi tạo trên trang.

Phù hợp cho trang nhiều nội dung như blog hoặc danh mục sản phẩm lớn.

Gợi ý cho shop WordPress VN 2026

Trang	Hint	Tài nguyên nên áp dụng
Trang chủ	preload	Font woff2, hero image, logo SVG quan trọng
Trang chủ	prefetch	HTML top 3 trang sản phẩm bán chạy
Trang sản phẩm	preload	Hero image sản phẩm, font tiêu đề
Trang sản phẩm	prefetch	HTML trang thanh toán, cart fragment JSON
Trang danh mục	prefetch	HTML top 5 sản phẩm xuất hiện đầu danh sách
Trang thanh toán	preload	Script thanh toán (Stripe.js), font form

Công cụ và plugin WordPress

Plugin tự động hóa preload/prefetch

WP Rocket: Tính năng “Preload” tự preload font và tài nguyên quan trọng. Không cần cấu hình thủ công từng file.
FlyingPress: Có cả preload và smart prefetch dựa trên viewport — phát hiện link hiển thị và prefetch tự động.
Plugin “Prefetch URLs”: Prefetch thủ công danh sách URL cụ thể từ trang chủ.

Thủ công qua hook WordPress

// Thêm preload font qua wp_head
add_action( 'wp_head', function() {
  echo '<link rel="preload"
        href="/fonts/inter-vietnamese.woff2"
        as="font"
        type="font/woff2"
        crossorigin>';
}, 1 ); // priority 1 = xuất hiện sớm trong head

Kết hợp preload/prefetch với kỹ thuật khác

Preload và prefetch hoạt động tốt nhất khi kết hợp với các kỹ thuật khác trong cùng pipeline tối ưu.

Chuỗi tối ưu tải tài nguyên

Preload font woff2 subset tiếng Việt + khai báo woff2 đúng chuẩn.
Preload CSS quan trọng + nhúng CSS tối thiểu vào head.
Prefetch chunk route tiếp theo + tách bundle theo route.
Kết hợp defer/async để script không chặn hiển thị sau khi preload.

Checklist triển khai preload/prefetch

Mở DevTools → Network → xem tài nguyên nào có “Discovered Late” trong cột Priority.
Xác định phần tử LCP là gì — thêm preload với fetchpriority="high".
Preload tối đa 2 font file — chỉ font xuất hiện ngay trên phần đầu trang.
Thêm crossorigin cho mọi preload font — bắt buộc, không ngoại lệ.
Xác định luồng điều hướng phổ biến của khách: trang chủ → đi đâu? Sản phẩm → đi đâu?
Thêm prefetch HTML cho top 3–5 điểm đến tiếp theo dự đoán được.
Cân nhắc Quicklink cho trang nhiều link như danh mục hoặc blog.
Kiểm tra người dùng dùng dữ liệu tiết kiệm (prefers-reduced-data) — tắt prefetch cho nhóm này.
Đo LCP trước và sau qua PageSpeed Insights để xác nhận hiệu quả.

Bài liên quan

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

Preload font có bắt buộc dùng crossorigin không?

Bắt buộc — không có ngoại lệ cho font web. Thiếu crossorigin trình duyệt tải lại font lần 2 với CORS request, lãng phí hoàn toàn lợi ích preload.

Markup chuẩn: rel="preload" as="font" type="font/woff2" crossorigin.

Preload quá nhiều tài nguyên có hại không?

Có. Preload trên 5 tài nguyên bắt đầu cạnh tranh băng thông với tài nguyên thật sự cần render.

FCP có thể chậm hơn khi preload quá nhiều.

Giới hạn: 3–5 preload, chỉ cho font, hero image và CSS quan trọng.

Prefetch có tốn dữ liệu người dùng điện thoại không?

Có — khoảng 50–200KB thêm mỗi trang ở trạng thái nhàn rỗi. Người dùng 3G/4G yếu sẽ cảm nhận chậm hơn khi prefetch đang chiếm băng thông.

Giải pháp: tắt prefetch khi người dùng bật chế độ tiết kiệm dữ liệu qua @media (prefers-reduced-data: reduce).

Plugin WordPress nào hỗ trợ preload/prefetch tự động?

Ba lựa chọn chính.

WP Rocket: Preload font và tài nguyên quan trọng tự động — cần trả phí.
FlyingPress: Cả preload và smart prefetch theo viewport — trả phí, tích hợp nhiều tính năng.
Plugin “Prefetch URLs”: Prefetch URL thủ công — miễn phí, cấu hình đơn giản.

Có thể dùng JavaScript để prefetch thay vì thẻ link không?

Có. Thư viện Quicklink dùng IntersectionObserver và requestIdleCallback để prefetch link trong tầm nhìn — không khai báo từng URL thủ công.

Cách này thích hợp cho trang nhiều link và luồng điều hướng khó dự đoán.

Web22 cấu hình preload và prefetch cho từng loại trang của shop — phân tích luồng điều hướng và đo LCP trước/sau. Xem dịch vụ tối ưu hiệu năng Core Web Vitals để tư vấn cụ thể.

Thiết kế website

Thiết kế UI/UX

SEO & Audit

Content & Marketing

Hiệu năng / CWV

WordPress

WooCommerce

Hosting & Server

Preload vs Prefetch — 2 resource hint cho WordPress shop

Preload và prefetch là gì

Preload — tài nguyên cần ngay cho trang hiện tại

Prefetch — tài nguyên cho điều hướng tiếp theo

So sánh 7 khía cạnh