On-Page SEO

Preload Critical Resources

Sử dụng thẻ <link rel="preload"> để thông báo trước cho trình duyệt tải tài nguyên quan trọng (font, CSS, JS) sớm hơn, hỗ trợ LCP.

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

Preload Critical Resources là gì?

Preload Critical Resources là kỹ thuật dùng thẻ HTML <link rel="preload"> để báo trước cho trình duyệt tải sớm các tài nguyên thiết yếu — như font chữ, CSS chính, JavaScript cần chạy ngay hoặc hình ảnh đầu trang — nhằm đẩy nhanh thời điểm hiển thị nội dung quan trọng nhất (LCP: Largest Contentful Paint).

Khác với prefetch (dùng cho tài nguyên tương lai) hay preconnect (kết nối mạng), preload mang tính bắt buộc và ưu tiên cao: trình duyệt sẽ tải ngay khi gặp thẻ, ngay cả khi chưa phân tích xong HTML.

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à các chỉ số Core Web Vitals. Trong đó, LCP (thời điểm phần tử lớn nhất trên màn hình xuất hiện) là một trong ba chỉ số bắt buộc. Nếu LCP chậm hơn 2,5 giây, trang bị đánh giá là "kém" về tốc độ.

Khi preload đúng tài nguyên, trình duyệt không phải đợi đến khi phân tích CSS/JS mới biết cần tải gì — giảm đáng kể thời gian chờ, cải thiện LCP từ 0,3–1,2 giây tùy cấu trúc trang. Nhiều trang thực tế đạt LCP dưới 1,8 giây sau khi áp dụng preload hợp lý.

Lưu ý: Preload không thay thế tối ưu hóa khác (như nén, lazy load, CDN), mà là một lớp hỗ trợ chiến lược — hiệu quả nhất khi kết hợp với critical CSS inlining, font display swap và defer non-critical JS.

Cách hoạt động

Khi trình duyệt đọc HTML, nó xây dựng DOM và đồng thời lập kế hoạch tải tài nguyên. Bình thường, CSS và JS được phát hiện muộn (sau khi phân tích phần tử chứa chúng), gây trễ LCP. Thẻ preload chèn vào <head> giúp trình duyệt:

  • Nhận diện tài nguyên ngay từ đầu — trước khi gặp thẻ <link href="style.css"> hoặc <script src="app.js">;
  • Ưu tiên tải song song cùng lúc với phân tích HTML — không chặn render;
  • Đảm bảo tài nguyên sẵn sàng khi cần — ví dụ: font được tải xong trước khi CSS yêu cầu @font-face.

Preload không thực thi mã hay áp dụng định dạng — nó chỉ tải file. Việc sử dụng vẫn do trình duyệt quyết định dựa trên as, type và ngữ cảnh.

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

  1. Xác định tài nguyên critical: Dùng Chrome DevTools → tab Network, lọc theo Waterfall, tìm file tải chậm và ảnh hưởng trực tiếp đến LCP (thường là: font TTF/WOFF2, CSS chính, JS khởi tạo slider/banner, ảnh hero).
  2. Chọn thuộc tính as phù hợp: Bắt buộc phải có để trình duyệt hiểu cách ưu tiên tải. Giá trị phổ biến:
    • as="font" cho font (kèm crossorigin)
    • as="style" cho CSS
    • as="script" cho JavaScript
    • as="image" cho ảnh quan trọng
  3. Thêm thẻ vào <head>: Đặt ngay sau thẻ <meta charset>, trước bất kỳ CSS/JS nào.
  4. Kiểm tra hiệu quả: Dùng PageSpeed Insights hoặc WebPageTest để so sánh LCP trước/sau; kiểm tra tab Network xem file có xuất hiện sớm hơn và có trạng thái preload không.

Lỗi thường gặp

Lỗi Dấu hiệu Cách khắc phục
Thiếu thuộc tính as Trình duyệt bỏ qua preload, tải lại bình thường Luôn khai báo rõ as; kiểm tra bằng DevTools → Filter: preload
Preload font nhưng thiếu crossorigin Font bị chặn (CORS error), hiển thị fallback Thêm crossorigin cho mọi font preload — ngay cả khi cùng miền
Preload quá nhiều tài nguyên Giảm hiệu suất (đổ bộ bandwidth), làm chậm tài nguyên khác Chỉ preload tối đa 3–4 tài nguyên; ưu tiên theo thứ tự ảnh hưởng đến LCP
Dùng preload cho JS không cần ngay lập tức Tăng CPU, trì hoãn render, gây CLS Chỉ preload JS khởi tạo UI chính (ví dụ: banner, menu); JS chức năng phụ nên defer hoặc async

Ví dụ thực tế

Một trang tin tức có ảnh hero (LCP), font chữ tùy chỉnh và CSS chính. Trước khi tối ưu:

→ LCP = 3,1s (ảnh tải sau khi CSS phân tích xong)

Sau khi thêm preload:

<link rel="preload" as="image" href="/images/hero.jpg">
<link rel="preload" as="font" type="font/woff2" href="/fonts/heading.woff2" crossorigin>
<link rel="preload" as="style" href="/css/main.css">

Kết quả: LCP giảm còn 1,6s, đạt mức "tốt" theo tiêu chuẩn Core Web Vitals. Font hiển thị không nhảy (không FOUT/FOIT), ảnh xuất hiện ngay khi scroll vào vùng nhìn thấy.

Lưu ý: Preload không thay thế việc nén ảnh hoặc dùng định dạng WebP — cả hai đều cần song song.

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

Preload có ảnh hưởng đến SEO trực tiếp không?

Không — Google không coi preload là tín hiệu xếp hạng riêng. Nhưng nó cải thiện LCP, vốn là yếu tố xếp hạng. Vì vậy, tác động gián tiếp nhưng rõ ràng và đo lường được.

Có nên preload trên mọi trang không?

Tùy trường hợp. Với trang tĩnh, landing page hoặc trang sản phẩm — nên áp dụng. Với trang blog có nhiều bài, nội dung dài, preload chỉ cần ở trang chủ và danh mục chính. Không nên preload toàn bộ site vì dễ gây lãng phí băng thông.

Preload và critical CSS có mâu thuẫn không?

Không — chúng bổ trợ nhau. Critical CSS được inline trong <head> để render nhanh phần trên màn hình; còn preload đảm bảo CSS đầy đủ (non-critical) và font/tài nguyên đi kèm tải sớm, tránh nhảy layout sau render ban đầu.