Tối ưu hoá mức độ ưu tiên của hình ảnh

Tính năng web: Mức độ ưu tiên tìm nạp Tải từng phần hình ảnh và iframe

Trình duyệt sử dụng phương pháp phỏng đoán để chỉ định mức độ ưu tiên tải cho hình ảnh, nhưng các giá trị mặc định này có thể không phải lúc nào cũng phù hợp với Nội dung lớn nhất hiển thị (LCP) của trang.

Việc sử dụng fetchpriority trên phần tử <img> cho phép bạn báo hiệu rõ ràng tầm quan trọng của hình ảnh cho trình duyệt, đảm bảo hình ảnh quan trọng tải nhanh hơn trong khi hình ảnh không cần thiết không cạnh tranh băng thông.

Thuộc tính loading=lazy ngăn hoàn toàn việc tải hình ảnh xuống khi hình ảnh nằm ngoài màn hình, nhờ đó có thể giúp ưu tiên hình ảnh hơn nữa.

Cách triển khai

  1. Xác định hình ảnh LCP: Xác định hình ảnh có nhiều khả năng nhất là Nội dung lớn nhất hiển thị (thường là hình ảnh chính ở đầu trang).
  2. Nâng cao mức độ ưu tiên của LCP: Thêm fetchpriority="high" vào phần tử <img> cho đề xuất LCP.
  3. Giảm mức độ ưu tiên cho hình ảnh không quan trọng: Đối với hình ảnh thuộc giao diện người dùng phụ hoặc chỉ xuất hiện sau khi người dùng tương tác (như trình đơn lớn, cửa sổ phụ hoặc trang trình bày băng chuyền ngoài màn hình), hãy thêm fetchpriority="low".
  4. Tối ưu hoá tính năng tải chậm: Không bao giờ sử dụng loading="lazy" trên hình ảnh LCP. Đối với hình ảnh chuẩn ở phần dưới màn hình đầu tiên, loading="lazy" là đủ để trì hoãn yêu cầu cho đến khi người dùng cuộn đến gần hình ảnh đó. Tránh thêm fetchpriority="low" vào những hình ảnh này, vì bạn muốn chúng tải ở mức độ ưu tiên bình thường sau khi người dùng di chuyển đến chúng. Dành riêng fetchpriority="low" cho những hình ảnh về mặt kỹ thuật là "trong màn hình đầu tiên" nhưng ban đầu không hiển thị (ví dụ: trang trình bày băng chuyền ẩn hoặc trình đơn lớn). Đối với những hình ảnh bị ẩn này, bạn cũng có thể sử dụng loading="lazy"; trình duyệt sẽ xử lý thời gian yêu cầu trong khi vẫn tôn trọng mức độ ưu tiên thấp.
  5. Ưu tiên mức độ ưu tiên mặc định: Nếu một hình ảnh cần có mức độ ưu tiên tải thông thường, hãy bỏ qua hoàn toàn thuộc tính fetchpriority thay vì đặt thuộc tính này thành auto. Đây là một quy ước về kiểu để giữ cho HTML của bạn gọn gàng hơn trong khi dựa vào phương pháp phỏng đoán gốc của trình duyệt.

Mã mẫu

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

Các phương pháp hay nhất

  • BẮT BUỘC: Luôn áp dụng fetchpriority="high" cho hình ảnh LCP.
  • BẮT BUỘC: Chỉ sử dụng fetchpriority="high" trên tối đa 1-2 hình ảnh quan trọng để tránh tranh chấp mạng và làm giảm mức độ ưu tiên.
  • BẮT BUỘC: Sử dụng fetchpriority="low" cho những hình ảnh về mặt kỹ thuật là "trong màn hình đầu tiên" nhưng ban đầu bị ẩn (ví dụ: trang trình bày băng chuyền bị ẩn, hình ảnh trong trình đơn lớn).
  • BẮT BUỘC: Không sử dụng fetchpriority="low" trên hình ảnh chuẩn ở phần dưới màn hình đầu tiên đã sử dụng loading="lazy". Những hình ảnh này sẽ tải ở mức độ ưu tiên thông thường sau khi xuất hiện trong khung nhìn.
  • NÊN ÁP DỤNG: Tránh sử dụng fetchpriority="auto". Nếu bạn muốn sử dụng mức độ ưu tiên mặc định, hãy bỏ qua hoàn toàn thuộc tính này để giữ cho HTML của bạn gọn gàng.
  • KHÔNG kết hợp fetchpriority="high" với loading="lazy".
  • KHÔNG sử dụng thuộc tính importance không dùng nữa. Thuộc tính này đã được thay thế bằng fetchpriority và không được trình duyệt nào hỗ trợ.
  • KHÔNG sử dụng giá trị loading="auto" không dùng nữa. Ban đầu, Chrome có hỗ trợ thuộc tính này nhưng sau đó đã xoá và hiện không có trình duyệt nào hỗ trợ.

Chiến lược dự phòng

Thuộc tính fetchpriority là một cải tiến tăng dần cho phần tử <img>. Nếu trình duyệt không hỗ trợ, thuộc tính này sẽ bị bỏ qua và trình duyệt sẽ sử dụng phương pháp phỏng đoán mức độ ưu tiên mặc định.