Tối ưu hoá mức độ ưu tiên tải trước

Tính năng web: Mức độ ưu tiên tìm nạp <link rel="preload">

Việc tải trước tài nguyên bằng <link rel="preload"> sẽ báo hiệu cho trình duyệt biết rằng tài nguyên đó sẽ sớm cần thiết. Tuy nhiên, các tài nguyên tải trước sẽ kế thừa mức độ ưu tiên mặc định cho loại tài nguyên và đặc biệt là đối với hình ảnh, mức độ ưu tiên này là thấp. Việc sử dụng fetchpriority cho phép bạn tinh chỉnh mức độ ưu tiên tương đối này, đặc biệt là đảm bảo tải trước hình ảnh với mức độ ưu tiên cao, cho phép hình ảnh bắt đầu sớm hơn và sử dụng nhiều tài nguyên băng thông hơn.

Cách triển khai

  1. Xác định các tài nguyên có thể tải trước: Tìm những tài nguyên mà trình duyệt không phát hiện sớm (ví dụ: hình ảnh áp phích video hoặc hình nền trong CSS) nhưng lại cần thiết cho giao diện của trang.
  2. Nâng cao mức độ ưu tiên cho các tài nguyên tải trước hình ảnh quan trọng: Đối với hình ảnh LCP hoặc các hình ảnh quan trọng khác không được ưu tiên theo mặc định, hãy sử dụng <link rel="preload" fetchpriority="high"> để đảm bảo các hình ảnh đó được ưu tiên hơn các tài nguyên tải trước khác. Xin lưu ý rằng theo mặc định, phông chữ đã có mức độ ưu tiên cao.
  3. Giảm mức độ ưu tiên cho các tài nguyên tải trước không quan trọng: Đối với các tài nguyên không quan trọng cho quá trình kết xuất ban đầu (ví dụ: video nền hoặc phông chữ phụ), hãy sử dụng <link rel="preload" fetchpriority="low">.
  4. Phối hợp với các loại tài nguyên: Xin lưu ý rằng các loại as khác nhau có mức độ ưu tiên mặc định khác nhau; hãy sử dụng fetchpriority để ghi đè các giá trị mặc định này khi cần.

Mã mẫu

<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">

<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">

<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>

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

  • BẮT BUỘC: Chỉ sử dụng fetchpriority="high" trên tối đa 1-2 lượt tải trước 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="high" trên hình ảnh Nội dung lớn nhất hiển thị (LCP).
  • NÊN: Giới hạn tổng số lần tải trước trên một trang ở mức tối đa là 2 hình ảnh và 2-3 phông chữ thiết yếu để tránh tranh chấp băng thông.
  • NÊN sử dụng fetchpriority="low" cho các lượt tải trước mà bạn muốn trình duyệt bắt đầu sớm nhưng không ảnh hưởng đến các tài nguyên quan trọng (đặc biệt là phông chữ không quan trọng).
  • NÊN chỉ định thuộc tính as một cách chính xác để đảm bảo tải trước sẽ được sử dụng.
  • NÊN ưu tiên cung cấp tài nguyên quan trọng (như hình ảnh LCP) ở dạng tĩnh trong HTML thông qua thẻ <img> thay vì dựa vào tính năng tải trước cho hình nền.
  • NÊN đảm bảo rằng các lượt tải trước phông chữ luôn có thuộc tính crossorigin (ngay cả khi cùng nguồn gốc).
  • KHÔNG sử dụng thuộc tính importance không dùng nữa. Tính năng này đã được thay thế bằng fetchpriority.

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

Thuộc tính fetchpriority trên <link rel="preload"> là một cải tiến tăng dần. Những trình duyệt không hỗ trợ thuộc tính này vẫn sẽ tải trước tài nguyên bằng mức độ ưu tiên mặc định cho loại tài nguyên đó. Để đảm bảo khả năng tương thích, hãy luôn cung cấp các thuộc tính as và type chính xác.