Technical SEO

Link Preload

Thuộc tính <link rel="preload"> thông báo trình duyệt tải sớm một tài nguyên quan trọng với độ ưu tiên cao.

3 lượt xem Cập nhật: 26/05/2026

Link Preload là gì?

Link Preload là một thuộc tính HTML dùng trong thẻ <link> để báo trước cho trình duyệt rằng một tài nguyên (như font, CSS, JavaScript, hình ảnh) sẽ được dùng sớm trên trang — và cần được tải ngay lập tức với độ ưu tiên cao nhất, ngay từ giai đoạn phân tích HTML đầu tiên.

Khác với prefetch (tải sau khi trang xong) hay preconnect (kết nối trước), preload không thực hiện bất kỳ hành động nào ngoài việc tải và lưu vào bộ nhớ đệm. Trình duyệt không áp dụng tài nguyên này tự động — bạn phải gọi nó rõ ràng trong mã (ví dụ: qua @font-face, import, hoặc document.createElement).

Tại sao quan trọng trong SEO?

Google xếp hạng trang dựa phần lớn vào trải nghiệm người dùng — đặc biệt là tốc độ tải và khả năng tương tác sớm (Core Web Vitals). Link preload giúp cải thiện trực tiếp ba chỉ số chính:

  • LCP (Largest Contentful Paint): Giảm thời gian hiển thị nội dung lớn nhất bằng cách tải sớm hình ảnh hoặc tiêu đề có font đặc biệt.
  • CLS (Cumulative Layout Shift): Ngăn dịch chuyển bố cục do font chậm tải bằng cách preload font trước khi render.
  • FID / INP (Interaction to Next Paint): Đảm bảo script quan trọng sẵn sàng sớm hơn, giảm độ trễ phản hồi.

Theo tài liệu chính thức của Google Developers, việc preload đúng cách có thể rút ngắn thời gian LCP tới 1–2 giây trên mạng 3G chậm — điều kiện phổ biến ở nhiều khu vực Việt Nam. Đây là yếu tố gián tiếp nhưng có ảnh hưởng đo lường được đến thứ hạng.

Cách hoạt động

Khi trình duyệt gặp thẻ <link rel="preload">, nó:

  1. Phân tích thuộc tính as để xác định loại tài nguyên (font, script, style…), từ đó chọn mức ưu tiên phù hợp.
  2. Tự động thêm tài nguyên vào hàng đợi tải sớm — ngay cả khi chưa biết cách sử dụng nó.
  3. Không chặn render (trừ khi là as="script" mà không có defer hoặc async).
  4. Lưu vào bộ nhớ đệm HTTP cache hoặc memory cache — sẵn sàng dùng khi được gọi.

Lưu ý: Nếu không khai báo đúng as, trình duyệt sẽ xử lý như tài nguyên chung (low priority) — làm mất tác dụng preload.

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

Để triển khai hiệu quả, làm theo 4 bước sau:

  1. Xác định tài nguyên thiết yếu: Dùng công cụ như WebPageTest hoặc Chrome DevTools > Network tab → lọc theo Waterfall và tìm tài nguyên xuất hiện sau HTML parse nhưng cần sớm (ví dụ: font dùng cho tiêu đề, CSS in-line bị tách ra).
  2. Thêm thẻ <link rel="preload"> vào <head>, trước mọi thẻ phụ thuộc. Ví dụ: 
    <link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>
  3. Bắt buộc khai báo thuộc tính bắt buộc:
    • href: đường dẫn tuyệt đối hoặc tương đối hợp lệ.
    • as: giá trị hợp lệ như font, script, style, image, audio, video.
    • crossorigin: bắt buộc nếu as="font" (do cơ chế CORS của font).
  4. Kiểm tra kết quả: Mở DevTools > Network tab → tìm tài nguyên → kiểm tra cột Priority phải là High hoặc Highest. Nếu hiện Low, nghĩa là thiếu as hoặc sai giá trị.

Lỗi thường gặp

Dưới đây là 4 lỗi phổ biến và cách sửa:

Lỗi Dấu hiệu Cách khắc phục
Thiếu thuộc tính as Priority hiển thị Low; tài nguyên tải muộn Luôn thêm as đúng loại: as="font", as="script"…
Dùng preload cho tài nguyên không dùng Tăng kích thước HTML, lãng phí băng thông Chỉ preload nếu chắc chắn tài nguyên được dùng trong lần tải đầu tiên.
Preload font nhưng không dùng font-display: swap Hiện tượng FOIT (Flash of Invisible Text) Kết hợp với @font-face { font-display: swap; } để đảm bảo văn bản luôn hiển thị.
Preload script không có defer/async Chặn render, làm chậm LCP Với script: dùng defer hoặc async; hoặc chỉ preload rồi gọi thủ công qua import().

Ví dụ thực tế

Một trang tin tức tiếng Việt có tiêu đề dùng font Be Vietnam Pro và ảnh bìa LCP là hero-banner.webp. Trước khi tối ưu:

Font tải sau 1.8s → tiêu đề hiển thị trễ → CLS = 0.25
Ảnh bìa tải sau 2.4s → LCP = 3.1s

Sau khi thêm:

<link rel="preload" href="/fonts/be-vietnam-pro-bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/images/hero-banner.webp" as="image">

và cập nhật @font-face với font-display: swap, kết quả đo được:

  • LCP giảm còn 1.4s (cải thiện 55%), đạt chuẩn Good theo Core Web Vitals.
  • CLS giảm xuống 0.02 nhờ văn bản hiển thị ngay.
  • Tỷ lệ thoát giảm 12% theo báo cáo GA4 sau 30 ngày.

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

Preload có thay thế được lazy loading không?

Không. Preload dành cho tài nguyên cần ngay lập tức (trong viewport đầu tiên). Lazy loading dành cho tài nguyên xuất hiện sau khi cuộn (ví dụ: ảnh cuối bài). Dùng sai mục đích sẽ gây nghẽn băng thông.

Có nên preload CSS toàn bộ trang?

Không nên. Chỉ preload CSS thiết yếu (critical CSS) — phần cần để render nội dung phía trên cùng. CSS toàn bộ thường nặng, preload sẽ chiếm băng thông và làm chậm các tài nguyên quan trọng hơn. Tốt hơn: inline critical CSS + preload phần còn lại nếu cần thiết.

Preload có hỗ trợ trên mọi trình duyệt?

Hỗ trợ trên Chrome, Edge, Firefox, Safari từ phiên bản 11.1 trở lên. Với Safari cũ hơn, thẻ preload bị bỏ qua (không gây lỗi). Kiểm tra chi tiết tại caniuse.com/link-rel-preload. Trường hợp cần hỗ trợ sâu, có thể dùng JavaScript để kiểm tra performance.supports — tùy trường hợp.