Technical SEO

Preload

Chỉ thị `<link rel="preload">` để trình duyệt tải sớm tài nguyên quan trọng trước khi phân tích HTML hoàn tất.

5 lượt xem Cập nhật: 31/05/2026

Preload là gì?

Preload là chỉ thị HTML dùng thẻ <link rel="preload"> để yêu cầu trình duyệt tải trước một tài nguyên (như font, CSS, script, hình ảnh) ngay từ đầu quá trình tải trang — trước khi phân tích toàn bộ HTML hoàn tất. Đây là cơ chế ưu tiên tải, không chặn hiển thị và không thực thi — chỉ đơn thuần đưa tài nguyên vào hàng đợi tải sớm.

Tại sao quan trọng trong SEO?

Preload ảnh hưởng gián tiếp nhưng rõ rệt đến Core Web Vitals, đặc biệt là Largest Contentful Paint (LCP) và CLS. Khi tài nguyên thiết yếu (ví dụ: font chữ hiển thị tiêu đề chính, CSS điều khiển layout đầu trang) được tải sớm, trình duyệt có thể render nội dung quan trọng nhanh hơn — giảm thời gian chờ, tránh nhảy layout và cải thiện trải nghiệm người dùng. Google coi trải nghiệm người dùng là yếu tố xếp hạng, nên preload đúng cách giúp tăng khả năng đạt điểm cao ở các chỉ số hiệu suất — từ đó hỗ trợ thứ hạng tổng thể.

Preload không làm tăng tốc độ mạng hay giảm kích thước file, nhưng tối ưu thứ tự tải — điều mà nhiều website thiếu kiểm soát dẫn đến trì hoãn LCP lên tới 1–3 giây.

Cách hoạt động

Khi trình duyệt gặp thẻ <link rel="preload"> trong phần <head>, nó sẽ lập tức thêm tài nguyên vào hàng đợi tải với mức ưu tiên cao (tương đương hoặc cao hơn inline CSS), bất kể vị trí xuất hiện trong HTML. Trình duyệt không đợi hoàn tất phân tích DOM hay CSSOM mới bắt đầu tải — điều này khác biệt lớn so với <link rel="prefetch"> (chỉ tải khi nhàn rỗi) hay <script> thông thường (bị chặn bởi HTML parsing).

Preload không thực thi tài nguyên — ví dụ: preload một script không chạy nó; preload font không áp dụng ngay — cần kết hợp với @font-face và thuộc tính font-display phù hợp để đảm bảo hiển thị đúng.

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

  1. Xác định tài nguyên thiết yếu: Dùng Chrome DevTools → tab Network + Waterfall để tìm tài nguyên xuất hiện muộn nhưng ảnh hưởng đến LCP (ví dụ: font chữ tiêu đề, CSS critical, script khởi tạo hero banner).
  2. Thêm thẻ preload vào <head>: Đặt ngay sau thẻ <meta charset> hoặc trước bất kỳ CSS/JS nào không thiết yếu.
  3. Đảm bảo cú pháp đúng: Bắt buộc có thuộc tính as để trình duyệt biết loại tài nguyên (giúp xác định ưu tiên và kiểm tra CORS). Không dùng as="fetch" — giá trị hợp lệ gồm: script, style, font, image, document, audio, video…
  4. Thêm thuộc tính cần thiết:
    • crossorigin nếu tài nguyên nằm trên CDN hoặc domain khác (bắt buộc với font để tránh lỗi render)
    • type (tùy chọn) để khai báo MIME type — hữu ích khi server không gửi header đúng
    • media (tùy trường hợp) để preload chỉ khi khớp điều kiện (ví dụ: media="(max-width: 768px)")
  5. Thử nghiệm và đo lường: Kiểm tra bằng WebPageTest hoặc Lighthouse trước/sau — theo dõi thay đổi ở LCP, TTFB và thời gian tải tài nguyên.

Lỗi thường gặp

  • Thiếu thuộc tính as: Trình duyệt không biết cách ưu tiên tải → bỏ qua preload hoặc xử lý sai. Cách khắc phục: Luôn khai báo as rõ ràng.
  • Preload font nhưng thiếu crossorigin: Gây lỗi hiển thị font trên Chrome/Firefox do vi phạm CORS. Cách khắc phục: Thêm crossorigin="anonymous" cho mọi font preload từ domain ngoài.
  • Preload tài nguyên không dùng: Làm tốn băng thông, chiếm băng thông của tài nguyên quan trọng hơn. Cách khắc phục: Chỉ preload những tài nguyên xuất hiện trong critical rendering path — kiểm tra bằng Chrome Coverage hoặc SpeedCurve.
  • Dùng preload cho JS/CSS không thiết yếu: Gây cạnh tranh tải, làm chậm tài nguyên thật sự cần thiết. Cách khắc phục: Ưu tiên preload cho font, critical CSS, hình ảnh hero — không preload thư viện chung như jQuery hay analytics.js.

Ví dụ thực tế

Dưới đây là đoạn code preload đúng chuẩn cho một trang tin tức có tiêu đề hiển thị bằng font tùy chỉnh và CSS điều khiển layout đầu trang:

<head>
  <meta charset="UTF-8">
  <!-- Preload font -->
  <link rel="preload" as="font" href="https://cdn.example.com/fonts/roboto-bold.woff2" type="font/woff2" crossorigin="anonymous">
  <!-- Preload critical CSS -->
  <link rel="preload" as="style" href="/css/critical.css" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/css/critical.css"></noscript>
</head>

Lưu ý: Việc kết hợp onload để chuyển rel="preload" thành rel="stylesheet" giúp áp dụng CSS ngay khi tải xong — tránh FOUC. Cách này an toàn hơn việc đặt <link rel="stylesheet"> trực tiếp nếu CSS đó không nằm trong critical path.

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

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

Không. Preload và lazy loading là hai cơ chế ngược chiều: preload tải sớm tài nguyên quan trọng; lazy loading (qua loading="lazy" hoặc Intersection Observer) trì hoãn tải tài nguyên không thấy trên màn hình. Chúng bổ sung chứ không thay thế nhau.

Có nên preload tất cả font trên trang?

Không. Chỉ preload font dùng cho văn bản xuất hiện trong vùng nhìn đầu tiên (ví dụ: tiêu đề bài viết, tên tác giả). Font dùng cho footer, popup hoặc phần nội dung cuộn xuống sau nên để tải bình thường hoặc prefetch. Preload quá nhiều font gây lãng phí băng thông và cạnh tranh tải.

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

Preload được hỗ trợ đầy đủ trên Chrome, Edge, Firefox, Safari (từ phiên bản 11.1 trở đi). Trên Safari cũ hơn (≤11.0), thẻ preload bị bỏ qua — không gây lỗi nhưng cũng không có hiệu quả. Vì vậy, luôn kiểm tra tương thích qua Can I use và đảm bảo có phương án dự phòng (ví dụ: fallback font hệ thống).

Bảng so sánh preload với các chỉ thị tương tự

Chỉ thị Mục đích Thời điểm tải Hỗ trợ rộng rãi? Ghi chú
<link rel="preload"> Tải sớm tài nguyên thiết yếu Ngay khi gặp thẻ, ngay cả khi chưa parse xong HTML ✓ (Chrome 50+, Firefox 46+, Safari 11.1+) Phải có as; không thực thi
<link rel="prefetch"> Tải trước tài nguyên cho trang kế tiếp Khi trình duyệt rảnh (sau khi tải trang hiện tại) ✓ Không đảm bảo tải xong trước khi chuyển trang
<link rel="preconnect"> Mở kết nối sớm với domain ngoài Ngay khi gặp thẻ ✓ Không tải tài nguyên — chỉ thiết lập TCP/TLS
<img loading="lazy"> Trì hoãn tải ảnh không trong viewport Khi ảnh gần vào vùng nhìn ✓ (Chrome 76+, Firefox 75+, Safari 15.4+) Chỉ áp dụng cho thẻ <img> và <iframe>