Priority Hints

Priority Hints là gì?

Priority Hints là tính năng của trình duyệt giúp lập trình viên chủ động gợi ý mức độ ưu tiên tải cho các tài nguyên như hình ảnh (<img>) hoặc khung nhúng (<iframe>). Tính năng này được triển khai qua thuộc tính fetchpriority, với ba giá trị hợp lệ: high, low và auto (mặc định). Đây không phải là lệnh bắt buộc, mà là lời đề xuất — trình duyệt có thể tuân theo hoặc bỏ qua tùy vào chiến lược tải nội bộ.

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 trên Google từ năm 2021 (Core Web Vitals), đặc biệt với chỉ số Largest Contentful Paint (LCP). Priority Hints giúp tối ưu LCP bằng cách đẩy nhanh việc tải các hình ảnh chính (ví dụ: ảnh bìa, banner trên cùng) — những thành phần thường quyết định thời điểm hoàn tất render nội dung lớn nhất. Khi trình duyệt ưu tiên tải đúng tài nguyên, người dùng thấy nội dung nhanh hơn, giảm tỷ lệ thoát và tăng khả năng tương tác — cả hai đều là tín hiệu gián tiếp hỗ trợ SEO.

Khác với lazy loading (tải muộn), Priority Hints giải quyết bài toán tải sớm hơn — phù hợp cho nội dung phía trên màn hình (above-the-fold). Việc kết hợp cả hai giúp kiểm soát toàn bộ chuỗi tải: cái nào cần hiện ngay → fetchpriority="high", cái nào ở cuối trang → loading="lazy".

Cách hoạt động

Khi gặp thẻ có fetchpriority, trình duyệt điều chỉnh thứ tự trong hàng đợi tải mạng và phân bổ băng thông CPU/GPU. Ví dụ: một thẻ <img fetchpriority="high"> sẽ được đưa lên đầu danh sách yêu cầu HTTP nếu chưa bị chặn bởi giới hạn đồng thời (thường là 6 kết nối trên HTTP/1.1, cao hơn trên HTTP/2 hoặc HTTP/3). Trình duyệt cũng có thể điều chỉnh mức độ nén, kích thước mẫu (nếu dùng srcset) hoặc trì hoãn xử lý JavaScript liên quan — tùy vào phiên bản và nhà sản xuất.

Lưu ý: fetchpriority chỉ áp dụng cho tài nguyên được tải qua mạng (không ảnh hưởng đến CSS inline hay script đã được cache). Nó cũng không thay đổi thứ tự parse HTML — chỉ ảnh hưởng đến giai đoạn sau khi DOM được phân tích xong.

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

1. Xác định tài nguyên then chốt: Dùng công cụ như Lighthouse hoặc Chrome DevTools > Network tab để tìm hình ảnh hoặc iframe xuất hiện trong LCP (thường là ảnh đầu tiên trong thẻ <main> hoặc <article>).
2. Thêm thuộc tính: Gắn fetchpriority="high" vào thẻ <img> hoặc <iframe> đó. Không thêm vào ảnh nền (CSS background-image) — vì thuộc tính này không hỗ trợ.
3. Loại trừ ảnh không cần thiết: Không đặt high cho ảnh nhỏ (icon < 4KB), ảnh ẩn bằng display: none, hoặc ảnh trong phần footer.
4. Kết hợp với lazy loading: Với ảnh dưới màn hình, giữ loading="lazy" và không dùng fetchpriority="high" — vì mâu thuẫn về mục đích.
5. Thử nghiệm và đo lường: So sánh chỉ số LCP trước/sau khi triển khai trên ít nhất 200 lượt tải thật (dùng CrUX hoặc PageSpeed Insights) — tránh dựa vào lab data đơn lẻ.

Lỗi thường gặp

• Dùng fetchpriority="high" cho mọi ảnh: Gây cạnh tranh tài nguyên, làm chậm tải CSS/JS quan trọng. → Khắc phục: Chỉ áp dụng cho tối đa 1–3 tài nguyên then chốt mỗi trang.
• Gắn sai vị trí: Đặt fetchpriority vào thẻ <picture> thay vì <img> bên trong — trình duyệt bỏ qua. → Khắc phục: Luôn đặt trực tiếp trên thẻ <img> hoặc <iframe>.
• Tin rằng nó thay thế preload: <link rel="preload"> vẫn cần cho tài nguyên không thể xác định sớm (ví dụ: font từ CSS). → Khắc phục: Dùng preload cho font, CSS critical; dùng fetchpriority cho ảnh hiển thị sớm.
• Bỏ qua tương thích: Thuộc tính chỉ hỗ trợ trên Chromium 109+ (Chrome, Edge, Opera) và Firefox 119+. → Khắc phục: Kiểm tra qua if ('fetchPriority' in HTMLImageElement.prototype); không cần polyfill vì trình duyệt cũ tự bỏ qua thuộc tính lạ.

Ví dụ thực tế

Dưới đây là so sánh mã HTML trước và sau khi tối ưu:

<img src="banner.jpg" 
     alt="Sản phẩm nổi bật">
<img src="product-1.jpg" 
     alt="Sản phẩm A" 
     loading="lazy">

<img src="banner.jpg" 
     alt="Sản phẩm nổi bật" 
     fetchpriority="high">
<img src="product-1.jpg" 
     alt="Sản phẩm A" 
     loading="lazy" 
     fetchpriority="low">

Một trang tin tức đã áp dụng fetchpriority="high" cho ảnh tiêu đề và fetchpriority="low" cho ảnh minh họa nhỏ trong bài viết. Kết quả đo trên CrUX (30 ngày): LCP cải thiện trung bình 0,38s (từ 2,71s xuống 2,33s), tỷ lệ đạt LCP tốt tăng từ 62% lên 79%.

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

Priority Hints có thay thế lazy loading không?

Không. Hai tính năng bổ sung nhau: lazy loading trì hoãn tải ảnh không nhìn thấy, còn Priority Hints đẩy nhanh tải ảnh quan trọng. Dùng song song là phương pháp tốt nhất.

Có nên dùng fetchpriority="low" cho mọi ảnh dưới màn hình?

Không bắt buộc. Giá trị low chỉ hữu ích nếu bạn đang cạnh tranh giữa nhiều ảnh tải cùng lúc và muốn giảm ưu tiên cho ảnh ít quan trọng hơn. Với ảnh đã lazy load, fetchpriority="low" thường không tạo khác biệt rõ rệt — tùy trường hợp.

Googlebot có hiểu và sử dụng Priority Hints không?

Googlebot không thực thi JavaScript hoặc ưu tiên tải như trình duyệt người dùng, nên không xử lý fetchpriority. Tuy nhiên, vì tính năng này cải thiện trải nghiệm người dùng thực (và do đó cải thiện Core Web Vitals), nên nó gián tiếp ảnh hưởng đến xếp hạng. Google khuyến khích sử dụng trong tài liệu chính thức về Web Performance.