Technical SEO

Preload Scanner

Cơ chế trong trình duyệt phát hiện sớm các tài nguyên quan trọng (script, CSS, font) trong HTML để bắt đầu tải song song trước khi phân tích DOM hoàn tất.

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

Preload Scanner là gì?

Preload Scanner (bộ quét tải trước) là một cơ chế tích hợp sẵn trong các trình duyệt hiện đại như Chrome, Edge, Firefox và Safari. Nó hoạt động song song với bộ phân tích HTML (HTML parser), nhưng không chờ DOM được xây dựng xong mới bắt đầu. Thay vào đó, ngay khi trình duyệt đọc đến những phần tử HTML chứa tài nguyên quan trọng — như <link rel='stylesheet'>, <script>, <link rel='preload'> hoặc <link rel='font'> — Preload Scanner sẽ phát hiện và kích hoạt tải sớm các tài nguyên đó trên nền tảng mạng riêng biệt.

Cơ chế này giúp giảm đáng kể thời gian chờ (latency) giữa việc nhận HTML và việc bắt đầu tải CSS, JavaScript hay font — đặc biệt hữu ích khi các tài nguyên nằm ở xa (CDN), yêu cầu DNS lookup, TLS handshake hoặc có độ trễ mạng cao.

Tại sao quan trọng trong SEO?

Preload Scanner ảnh hưởng trực tiếp đến các chỉ số Core Web Vitals — yếu tố xếp hạng chính của Google từ năm 2021. Cụ thể:

  • LCP (Largest Contentful Paint): Nếu font hoặc CSS thiết yếu bị tải chậm, trình duyệt trì hoãn hiển thị nội dung chính → LCP tăng → điểm SEO giảm.
  • CLS (Cumulative Layout Shift): Khi font chưa tải xong, trình duyệt dùng font dự phòng rồi thay thế sau → gây dịch chuyển bố cục → CLS xấu.
  • FCP (First Contentful Paint): Tải song song nhờ Preload Scanner giúp nội dung đầu tiên xuất hiện nhanh hơn.

Google xác nhận rằng tốc độ tải trang là tín hiệu xếp hạng rõ ràng cho cả desktop và mobile. Một trang tối ưu hóa Preload Scanner thường đạt thời gian tương tác (TTI) nhanh hơn 15–30% so với trang không tối ưu — tùy trường hợp, phụ thuộc vào cấu trúc mạng và kích thước tài nguyên.

Cách hoạt động

Preload Scanner không phải là một trình phân tích độc lập, mà là một luồng xử lý đi kèm cùng HTML parser. Khi parser đọc dòng HTML, nó gửi tín hiệu tới Preload Scanner mỗi khi gặp các thẻ có khả năng khởi tạo yêu cầu mạng:

  • <link rel='stylesheet'> (CSS)
  • <script src='... '> (script bên ngoài)
  • <link rel='preload' as='font'> hoặc as='script'
  • <img src='...'> (trong một số phiên bản Chrome từ 90+)
  • <link rel='preconnect'> hoặc <link rel='dns-prefetch'> (khởi tạo kết nối sớm)

Scanner sẽ kiểm tra thuộc tính href, src, as và crossorigin để xác định loại tài nguyên, ưu tiên tải và mức độ đồng bộ. Nó không thực thi script hay áp dụng CSS — chỉ tải về bộ nhớ đệm. Việc xử lý thực tế vẫn do parser và renderer đảm nhiệm sau đó.

Lưu ý: Preload Scanner không chạy trên tất cả trình duyệt giống nhau. Ví dụ, Firefox hỗ trợ từ phiên bản 69, Safari từ iOS 14.5 / macOS Big Sur, còn Chrome triển khai đầy đủ nhất từ phiên bản 55 trở đi.

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

Để tận dụng Preload Scanner hiệu quả, bạn cần chủ động thiết kế HTML sao cho các tài nguyên thiết yếu xuất hiện càng sớm càng tốt — ngay trong phần <head>, trước bất kỳ thẻ nào không liên quan (như <meta> quảng cáo, script theo dõi không cấp thiết).

  1. Đặt CSS thiết yếu lên đầu <head>: Tránh đặt <link rel='stylesheet'> sau <script> chặn render hoặc sau khối <meta> dài.
  2. Sử dụng <link rel='preload'> đúng cách: Chỉ preload tài nguyên thực sự cần ngay lập tức (ví dụ: font dùng cho tiêu đề, CSS in-line critical). Không preload quá nhiều — trình duyệt sẽ bỏ qua nếu vượt giới hạn đồng thời (thường là 6 yêu cầu trên cùng một origin).
  3. Tránh <script> chặn render ở đầu trang: Nếu bắt buộc dùng script bên ngoài, thêm thuộc tính async hoặc defer. Preload Scanner vẫn tải script, nhưng parser sẽ không dừng lại để thực thi.
  4. Kiểm tra thứ tự tải bằng DevTools: Mở tab Network → bật Disable cache → tải lại trang → sắp xếp cột Start Time. Các tài nguyên do Preload Scanner tải thường có Start Time gần như trùng với thời điểm bắt đầu tải HTML.
  5. Tối ưu DNS và kết nối: Dùng <link rel='preconnect' href='https://fonts.googleapis.com'> hoặc <link rel='dns-prefetch'> để hỗ trợ Preload Scanner khởi tạo kết nối sớm hơn.

Lỗi thường gặp

Lỗi Dấu hiệu Cách khắc phục
CSS thiết yếu bị đặt quá muộn trong <head> Thời gian bắt đầu tải CSS chậm hơn 500ms so với thời điểm tải HTML Di chuyển thẻ <link rel='stylesheet'> lên đầu <head>, ngay sau <meta charset>
Dùng rel='preload' cho tài nguyên không dùng ngay Chrome DevTools cảnh báo “Preload request discarded” Chỉ preload tài nguyên có mặt trong critical rendering path; kiểm tra bằng Coverage tab trong DevTools
Font bị tải hai lần (preload + @import) Yêu cầu mạng trùng lặp, tăng băng thông không cần thiết Loại bỏ @import trong CSS nếu đã preload font; dùng font-display: swap để tránh chặn hiển thị

Ví dụ thực tế

Một trang tin tức có tiêu đề sử dụng font Inter Bold từ Google Fonts. Trước khi tối ưu:

<head> <meta name="viewport" content="width=device-width"> <meta name="description" content="..."> <script async src="analytics.js"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" rel="stylesheet"> </head>

→ Font chỉ bắt đầu tải sau khi parser đọc xong toàn bộ <meta> và <script>, gây chậm LCP.

Sau tối ưu:

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preload" href="https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTe6ZaX0HUghF_cDxXwEL6H9f6G1UgT5t9Q.woff2" as="font" type="font/woff2" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" rel="stylesheet"> </head>

Kết quả đo thực tế trên Lighthouse: LCP cải thiện từ 3.2s → 1.8s; CLS giảm từ 0.12 → 0.02.

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

Preload Scanner có hỗ trợ tất cả trình duyệt?

Không. Hỗ trợ đầy đủ nhất trên Chrome và Edge (từ phiên bản 55+). Firefox hỗ trợ từ 69+, Safari từ iOS 14.5 / macOS Big Sur. Một số tính năng như preload <img> hoặc as='image' chỉ có trên Chrome 90+ và Edge 90+. Các trình duyệt cũ hơn (IE, Safari <14) không có cơ chế này.

Có nên preload mọi script và CSS?

Không. Preload chỉ nên áp dụng cho tài nguyên thiết yếu trong vòng 1–2 giây đầu tiên của quá trình render. Preload quá nhiều sẽ chiếm băng thông, làm chậm tải các tài nguyên khác, và có thể bị trình duyệt bỏ qua (discard) nếu vượt giới hạn đồng thời — tùy trường hợp, thường là 6 yêu cầu mỗi origin.

Preload Scanner có thay thế được Critical CSS không?

Không. Preload Scanner chỉ giúp tải nhanh hơn — nhưng không loại bỏ việc chặn render. Critical CSS (CSS nội tuyến cho phần hiển thị đầu tiên) vẫn cần thiết để trình duyệt có thể render ngay mà không chờ tải file ngoài. Preload Scanner và Critical CSS là hai kỹ thuật bổ trợ, không thay thế nhau.