Technical SEO

Subresource Loading Priority

Mức độ ưu tiên (high/low/auto) mà trình duyệt gán cho từng tài nguyên khi tải, ảnh hưởng đến thứ tự và tốc độ tải.

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

Subresource Loading Priority là gì?

Subresource Loading Priority (mức độ ưu tiên khi tải tài nguyên phụ) là cách trình duyệt quyết định thứ tự và thời điểm tải các file như hình ảnh, CSS, JavaScript, font hoặc iframe — dựa trên thẻ HTML, thuộc tính, vị trí trong tài liệu và ngữ cảnh sử dụng. Mỗi tài nguyên được gán mức ưu tiên: high, low, auto (mặc định), hoặc medium (trong một số phiên bản Chromium). Đây không phải là chỉ thị bắt buộc mà là gợi ý từ trình duyệt để tối ưu hóa trải nghiệm người dùng và hiệu suất trang.

Tại sao quan trọng trong SEO?

Tốc độ tải trang là yếu tố xếp hạng trực tiếp của Google từ năm 2018 (Core Web Vitals), và Subresource Loading Priority ảnh hưởng rõ rệt đến các chỉ số như Largest Contentful Paint (LCP) và Time to Interactive (TTI). Nếu trình duyệt tải hình nền hoặc script không cần thiết trước nội dung chính, LCP bị chậm lại → tỷ lệ thoát tăng, thời gian ở lại giảm → tín hiệu tiêu cực với thuật toán. Ngược lại, việc đẩy ưu tiên cho ảnh hero hoặc CSS thiết yếu giúp render nhanh hơn, cải thiện cả trải nghiệm và thứ hạng.

Google Search Console cũng báo lỗi “Render-blocking resources” khi tài nguyên có mức ưu tiên sai làm chậm hiển thị nội dung chính — đây là cơ hội tối ưu kỹ thuật dễ đo lường và tác động nhanh.

Cách hoạt động

Trình duyệt (đặc biệt Chrome và Edge dựa trên Chromium) phân tích từng thẻ HTML khi phân tích cú pháp (parsing) và gán mức ưu tiên theo quy tắc sau:

  • <link rel="stylesheet">: luôn nhận high — vì CSS chặn render.
  • <script> không có async hoặc defer: high nếu nằm trong <head>; medium nếu ở cuối <body> (tùy trường hợp).
  • <img> xuất hiện trong viewport đầu tiên: high; ảnh cuộn xuống sau: low (từ Chrome 78+).
  • <link rel="preload">: tuân theo thuộc tính as và fetchpriority — nếu có, sẽ ghi đè mức mặc định.
  • Font (qua @font-face): thường low, trừ khi được preload với as="font" và crossorigin.

Giá trị fetchpriority (ra mắt tháng 3/2023 trong Chrome 112) là thuộc tính HTML mới cho phép kiểm soát chủ động: fetchpriority="high", "low", hoặc "auto". Nó chỉ áp dụng cho <img>, <iframe>, <script>, <link> (khi as được khai báo).

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

  1. Xác định tài nguyên cần ưu tiên: Dùng DevTools > Network tab > cột “Priority”. Sắp xếp theo thời gian bắt đầu tải (Start Time) và so sánh với LCP element.
  2. Áp dụng fetchpriority có chọn lọc:
    • Với ảnh hero: <img src="hero.jpg" fetchpriority="high">
    • Với ảnh không hiển thị ngay: <img src="gallery-1.jpg" fetchpriority="low">
  3. Kết hợp với preload cho tài nguyên thiết yếu nhưng khó phát hiện sớm (ví dụ: font, CSS critical):
    <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
  4. Loại bỏ preload thừa: Preload quá nhiều file gây cạnh tranh băng thông — chỉ preload tối đa 2–3 tài nguyên quan trọng nhất.
  5. Đảm bảo không xung đột: Không dùng fetchpriority="high" cho ảnh ngoài viewport hoặc script không cần thiết — có thể làm chậm tài nguyên khác.

Lỗi thường gặp

  • Lỗi 1: Gán fetchpriority="high" cho tất cả ảnh
    → Gây nghẽn mạng, làm chậm tải CSS/JS thiết yếu. Cách khắc phục: Chỉ áp dụng cho ảnh nằm trong LCP candidate (xác minh qua Lighthouse hoặc CrUX).
  • Lỗi 2: Dùng preload cho ảnh đã có loading="eager" và fetchpriority="high"
    → Dư thừa, không cải thiện tốc độ, còn tăng kích thước HTML. Cách khắc phục: Chọn 1 trong 2 phương pháp — ưu tiên fetchpriority vì nhẹ hơn và hỗ trợ tốt hơn trên thiết bị di động.
  • Lỗi 3: Thiếu crossorigin khi preload font
    → Font không được tải, trình duyệt bỏ qua preload. Cách khắc phục: Luôn thêm crossorigin vào thẻ <link rel="preload" as="font">, kể cả khi font ở cùng miền.

Ví dụ thực tế

Một trang tin tức có LCP là ảnh tiêu đề (600x400px) và đoạn văn đầu. Ban đầu, ảnh này có mức ưu tiên auto, tải sau CSS và JS — LCP mất 3.2s. Sau khi thêm fetchpriority="high", trình duyệt tải ảnh ngay sau HTML parser, giảm LCP xuống còn 1.8s. Đồng thời, ảnh trong phần “Bài viết liên quan” được gán fetchpriority="low" — giúp giải phóng băng thông cho nội dung chính.

Dưới đây là bảng so sánh mức ưu tiên mặc định và sau tối ưu:

Tài nguyên Vị trí / đặc điểm Mức ưu tiên mặc định Sau tối ưu Tác động lên LCP
Ảnh hero Trong thẻ <main>, đầu trang auto high Giảm 0.9–1.4s
CSS thiết yếu <link rel="stylesheet"> trong <head> high giữ nguyên Không đổi
Ảnh gallery Sau thẻ <hr>, cần scroll low low (không thay đổi) Không ảnh hưởng
Font chữ Không preload low high (qua preload + fetchpriority) Giảm CLS nếu font thay đổi layout

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

fetchpriority có tương thích với mọi trình duyệt?

Hiện chỉ hỗ trợ đầy đủ trên Chrome 112+, Edge 112+, và Opera 98+. Firefox và Safari chưa hỗ trợ — nhưng không gây lỗi. Trình duyệt không hiểu thuộc tính sẽ bỏ qua, nên vẫn an toàn để triển khai. Bạn nên kết hợp với các kỹ thuật truyền thống như preload hoặc loading="eager" để đảm bảo khả năng tương thích.

Có nên dùng fetchpriority cho script bên ngoài?

Có thể dùng, nhưng cần thận trọng. Với script cần chạy ngay (ví dụ: analytics hoặc consent manager), fetchpriority="high" giúp tải nhanh hơn — tuy nhiên nếu script đó không chặn render, tác động đến LCP là rất nhỏ. Không nên áp dụng cho thư viện nặng như jQuery nếu không cần thiết ngay lập tức.

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

Không. fetchpriority điều chỉnh thứ tự tải, còn loading="lazy" điều khiển thời điểm bắt đầu tải. Hai thuộc tính có thể dùng song song: ảnh dưới màn hình có thể vừa loading="lazy" vừa fetchpriority="low" — đạt hiệu quả tối ưu cao nhất.