Tối ưu hoá việc tải tài nguyên nhờ API ưu tiên tìm nạp

API mức độ ưu tiên tìm nạp cho biết mức ưu tiên tương đối của tài nguyên so với trình duyệt. Có thể giúp tải tối ưu và cải thiện Chỉ số quan trọng chính của trang web.

Addy Osmani
Addy Osmani
X GitHub
Leena Sohoni
Leena Sohoni
X
Patrick Meenan
Patrick Meenan
X
Barry Pollard

Hỗ trợ trình duyệt

  • Chrome: 102.
  • Cạnh: 102.
  • Firefox: 132.
  • Safari: 17.2.

Nguồn

Khi phân tích cú pháp của một trang web và bắt đầu khám phá cũng như tải các tài nguyên như hình ảnh, tập lệnh hoặc CSS xuống, trình duyệt sẽ chỉ định cho chúng một priority tìm nạp để có thể tải các tài nguyên đó xuống theo thứ tự tối ưu. Mức độ ưu tiên của một tài nguyên thường phụ thuộc vào nội dung và vị trí của tài nguyên đó trong tài liệu. Ví dụ: hình ảnh trong khung nhìn có thể có mức độ ưu tiên High và mức độ ưu tiên cho CSS chặn hiển thị, tải sớm bằng <link> trong <head> có thể là Very High. Trình duyệt khá giỏi trong việc chỉ định các mức độ ưu tiên hoạt động hiệu quả nhưng có thể không tối ưu trong mọi trường hợp.

Trang này thảo luận về API Mức độ ưu tiên của Tìm nạp và thuộc tính HTML fetchpriority, cho phép bạn gợi ý mức độ ưu tiên tương đối của một tài nguyên (high hoặc low). Mức độ ưu tiên tìm nạp có thể giúp tối ưu hoá Chỉ số quan trọng chính của trang web.

Tóm tắt

Một số lĩnh vực quan trọng mà tính năng Mức độ ưu tiên tìm nạp có thể giúp:

  • Tăng mức độ ưu tiên của hình ảnh LCP bằng cách chỉ định fetchpriority="high" trên phần tử hình ảnh, giúp LCP diễn ra sớm hơn.
  • Tăng mức độ ưu tiên của các tập lệnh async, sử dụng ngữ nghĩa tốt hơn so với kiểu tấn công phổ biến nhất hiện tại (chèn <link rel="preload"> cho tập lệnh async).
  • Giảm mức độ ưu tiên của tập lệnh thân muộn để cho phép sắp xếp tốt hơn với hình ảnh.
Chế độ xem băng hình so sánh hai thử nghiệm trên trang chủ của Google Chuyến bay. Ở dưới cùng, Mức độ ưu tiên tìm nạp được dùng để tăng mức độ ưu tiên của hình ảnh chính, khiến LCP giảm 0,7 giây.
Tính năng Mức độ ưu tiên tìm nạp giúp cải thiện Largest Contentful Paint (Lần sơn nội dung lớn nhất) từ 2,6 giây xuống còn 1,9 giây trong một thử nghiệm trên Google Chuyến bay.

Trước đây, nhà phát triển có ảnh hưởng hạn chế đến mức độ ưu tiên của tài nguyên bằng cách sử dụng tính năng tải trước và kết nối trước. Tính năng tải trước cho phép bạn thông báo cho trình duyệt về các tài nguyên quan trọng mà bạn muốn tải sớm trước khi trình duyệt khám phá chúng một cách tự nhiên. Điều này đặc biệt hữu ích đối với các tài nguyên khó phát hiện hơn, chẳng hạn như phông chữ có trong các tệp kiểu, hình nền hoặc tài nguyên được tải từ tập lệnh. Tính năng kết nối trước giúp khởi động các kết nối đến máy chủ nhiều nguồn gốc và có thể giúp cải thiện các chỉ số như Thời gian tải byte đầu tiên. Việc này rất hữu ích khi bạn biết nguồn gốc nhưng không nhất thiết phải biết URL chính xác của tài nguyên bạn cần.

Mức độ ưu tiên tìm nạp sẽ bổ sung cho các Gợi ý về tài nguyên này. Đây là một tín hiệu dựa trên mã đánh dấu có sẵn thông qua thuộc tính fetchpriority mà nhà phát triển có thể dùng để biểu thị mức độ ưu tiên tương đối của một tài nguyên cụ thể. Bạn cũng có thể sử dụng các gợi ý này thông qua JavaScript và Fetch API (API Tìm nạp) với thuộc tính priority để tác động đến mức độ ưu tiên của các lượt tìm nạp tài nguyên được thực hiện cho dữ liệu. Mức độ ưu tiên tìm nạp cũng có thể bổ sung cho tính năng tải trước. Lấy một hình ảnh có Thời gian hiển thị nội dung lớn nhất. Khi được tải trước, hình ảnh này vẫn sẽ có mức độ ưu tiên thấp. Nếu bị các tài nguyên có mức độ ưu tiên thấp khác đẩy lùi, thì việc sử dụng Mức độ ưu tiên tìm nạp có thể giúp hình ảnh tải nhanh hơn.

Mức độ ưu tiên tài nguyên

Trình tự tải tài nguyên xuống phụ thuộc vào mức độ ưu tiên được chỉ định của trình duyệt cho mọi tài nguyên trên trang. Các yếu tố có thể ảnh hưởng đến logic tính toán mức độ ưu tiên bao gồm:

  • Loại tài nguyên, chẳng hạn như CSS, phông chữ, tập lệnh, hình ảnh và tài nguyên của bên thứ ba.
  • Vị trí hoặc thứ tự của tài liệu tham chiếu đến các tài nguyên trong đó.
  • Liệu thuộc tính async hay defer có được sử dụng trong tập lệnh hay không.

Bảng sau đây trình bày cách Chrome ưu tiên và sắp xếp trình tự hầu hết các tài nguyên:

  Tải trong giai đoạn chặn bố cục Tải một lần trong giai đoạn chặn bố cục
Mức độ ưu tiên
của Blink		 VeryHigh Cao Medium Thấp VeryLow
Mức độ ưu tiên
Công cụ cho nhà phát triển		 Cao nhất Cao Medium Thấp Thấp nhất
Tài nguyên chính
CSS (đầu**) CSS (muộn**) CSS (không khớp nội dung đa phương tiện***)
Tập lệnh (sớm** hoặc không phải từ trình quét tải trước) Tập lệnh (muộn**) Tập lệnh (không đồng bộ)
Phông chữ Phông chữ (rel=preload)
Nhập
Hình ảnh (trong khung nhìn) Hình ảnh (5 hình ảnh đầu tiên > 10.000px2) Hình ảnh
Nội dung nghe nhìn (video/âm thanh)
Tìm nạp trước
XSL
XHR (đồng bộ hoá) XHR/tìm nạp* (không đồng bộ)

Trình duyệt sẽ tải các tài nguyên có cùng mức độ ưu tiên được tính toán theo thứ tự phát hiện. Bạn có thể kiểm tra mức độ ưu tiên được chỉ định cho các tài nguyên khác nhau khi tải một trang trong thẻ Mạng Công cụ dành cho nhà phát triển của Chrome. (Đừng quên thêm cột mức độ ưu tiên bằng cách nhấp chuột phải vào tiêu đề bảng rồi đánh dấu vào cột đó).

Thẻ Mạng của DevTools của Chrome liệt kê một số tài nguyên phông chữ. Tất cả đều có Mức độ ưu tiên cao nhất.
Mức độ ưu tiên cho tài nguyên type = "font" trên trang chi tiết tin tức của BBC
Thẻ mạng trong Công cụ cho nhà phát triển của Chrome liệt kê một số tài nguyên phông chữ. Các chiến lược này kết hợp mức độ ưu tiên thấp và cao.
Mức độ ưu tiên cho tài nguyên type = "script" trên trang chi tiết tin tức của BBC.

Khi mức độ ưu tiên thay đổi, bạn có thể thấy cả mức độ ưu tiên ban đầu và cuối cùng trong chế độ cài đặt Big request rows (Hàng yêu cầu lớn) hoặc trong chú giải công cụ.

Thẻ Mạng của Công cụ của Chrome cho nhà phát triển. Chế độ cài đặt &quot;Hàng yêu cầu lớn&quot; được đánh dấu và cột Mức độ ưu tiên hiển thị hình ảnh đầu tiên có mức độ ưu tiên Cao và mức độ ưu tiên ban đầu khác với phương tiện ở bên dưới. Nội dung tương tự cũng sẽ xuất hiện trong chú giải công cụ.
Các thay đổi về mức độ ưu tiên trong Công cụ cho nhà phát triển.

Khi nào bạn có thể cần Tìm nạp mức độ ưu tiên?

Giờ đây, khi đã hiểu logic ưu tiên của trình duyệt, bạn có thể điều chỉnh thứ tự tải xuống của trang để tối ưu hoá hiệu suất của trang và Các chỉ số quan trọng chính của trang web. Sau đây là một số ví dụ về những điều bạn có thể thay đổi để ảnh hưởng đến mức độ ưu tiên của việc tải tài nguyên xuống:

  • Hãy sắp xếp các thẻ tài nguyên như <script> và <link> theo thứ tự bạn muốn trình duyệt tải chúng xuống. Các tài nguyên có cùng mức độ ưu tiên thường được tải theo thứ tự phát hiện.
  • Sử dụng gợi ý về tài nguyên preload để tải các tài nguyên cần thiết xuống sớm hơn, đặc biệt là đối với các tài nguyên mà trình duyệt không dễ dàng phát hiện được.
  • Sử dụng async hoặc defer để tải tập lệnh xuống mà không chặn các tài nguyên khác.
  • Tải từng phần nội dung dưới màn hình đầu tiên để trình duyệt có thể sử dụng băng thông sẵn có cho các tài nguyên quan trọng hơn trong màn hình đầu tiên.

Những kỹ thuật này giúp kiểm soát việc tính toán mức độ ưu tiên của trình duyệt, từ đó cải thiện hiệu suất và Các chỉ số quan trọng về trang web. Ví dụ: khi tải trước hình nền quan trọng, người dùng có thể phát hiện hình nền sớm hơn nhiều, qua đó cải thiện Nội dung lớn nhất hiển thị (LCP).

Đôi khi, các tay điều khiển này có thể không đủ để ưu tiên tài nguyên một cách tối ưu cho ứng dụng của bạn. Sau đây là một số trường hợp mà tính năng Mức độ ưu tiên tìm nạp có thể hữu ích:

  • Bạn có một vài hình ảnh trong màn hình đầu tiên nhưng không phải tất cả các hình ảnh này đều có mức độ ưu tiên như nhau. Ví dụ: trong băng chuyền hình ảnh, chỉ hình ảnh hiển thị đầu tiên mới cần có mức độ ưu tiên cao hơn, còn các hình ảnh khác, thường là ở ngoài màn hình ban đầu, có thể được đặt mức độ ưu tiên thấp hơn.
  • Hình ảnh bên trong khung nhìn thường bắt đầu ở mức độ ưu tiên Low. Sau khi bố cục hoàn tất, Chrome sẽ phát hiện rằng các thành phần này nằm trong khung nhìn và tăng mức độ ưu tiên của chúng. Điều này thường làm tăng độ trễ đáng kể khi tải các hình ảnh quan trọng, chẳng hạn như hình ảnh chính. Việc cung cấp Mức độ ưu tiên tìm nạp trong mã đánh dấu cho phép hình ảnh bắt đầu ở mức độ ưu tiên High và bắt đầu tải sớm hơn nhiều. Để tự động hoá một phần việc này, Chrome sẽ đặt 5 hình ảnh lớn đầu tiên thành mức độ ưu tiên Medium. Điều này sẽ giúp ích, nhưng fetchpriority="high" rõ ràng sẽ tốt hơn nữa.

    Bạn vẫn phải tải trước để phát hiện sớm hình ảnh LCP được đưa vào làm nền CSS. Để tăng mức độ ưu tiên cho hình nền, hãy thêm fetchpriority='high' vào tải trước.
  • Việc khai báo tập lệnh là async hoặc defer sẽ yêu cầu trình duyệt tải các tập lệnh đó theo cách không đồng bộ. Tuy nhiên, như minh hoạ trong bảng mức độ ưu tiên, những tập lệnh này cũng được chỉ định mức độ ưu tiên "Thấp". Bạn nên tăng mức độ ưu tiên của các tệp này trong khi vẫn đảm bảo tải xuống không đồng bộ, đặc biệt là đối với các tập lệnh quan trọng đối với trải nghiệm người dùng.
  • Nếu bạn sử dụng API fetch() của JavaScript để tìm nạp tài nguyên hoặc dữ liệu không đồng bộ, trình duyệt sẽ chỉ định mức độ ưu tiên High cho API đó. Bạn nên chạy một số lượt tìm nạp ở mức độ ưu tiên thấp hơn, đặc biệt là khi bạn đang kết hợp các lệnh gọi API trong nền với lệnh gọi API phản hồi hoạt động đầu vào của người dùng. Đánh dấu lệnh gọi API trong nền là mức độ ưu tiên Low và lệnh gọi API tương tác là mức độ ưu tiên High.
  • Trình duyệt sẽ gán mức độ ưu tiên High cho CSS và phông chữ, nhưng một vài tài nguyên trong số này có thể quan trọng hơn các tài nguyên khác. Bạn có thể sử dụng Mức độ ưu tiên tìm nạp để giảm mức độ ưu tiên của các tài nguyên không quan trọng (lưu ý rằng CSS ban đầu đang chặn hiển thị nên thường nên được ưu tiên High).

Thuộc tính fetchpriority

Sử dụng thuộc tính HTML fetchpriority để chỉ định mức độ ưu tiên tải xuống cho các loại tài nguyên như CSS, phông chữ, tập lệnh và hình ảnh khi tải xuống bằng thẻ link, img hoặc script. Thuộc tính này có thể nhận các giá trị sau:

  • high: Tài nguyên có mức độ ưu tiên cao hơn và bạn muốn trình duyệt ưu tiên tài nguyên đó hơn bình thường, miễn là phương pháp phỏng đoán của chính trình duyệt không ngăn việc đó xảy ra.
  • low: Tài nguyên có mức độ ưu tiên thấp hơn và bạn muốn trình duyệt giảm mức độ ưu tiên của tài nguyên đó, một lần nữa nếu phương pháp phỏng đoán cho phép.
  • auto: Giá trị mặc định, cho phép trình duyệt chọn mức độ ưu tiên phù hợp.

Dưới đây là một vài ví dụ về cách sử dụng thuộc tính fetchpriority trong mã đánh dấu, cũng như thuộc tính priority tương đương với tập lệnh.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Trigger a low priority fetch
  });
</script>

Ảnh hưởng của mức độ ưu tiên của trình duyệt và fetchpriority

Bạn có thể áp dụng thuộc tính fetchpriority cho nhiều tài nguyên như minh hoạ trong bảng sau để tăng hoặc giảm mức độ ưu tiên đã tính của những tài nguyên đó. fetchpriority="auto" (◉) trong mỗi hàng đánh dấu mức độ ưu tiên mặc định cho loại tài nguyên đó. (cũng có dưới dạng Google Tài liệu).

  Tải trong giai đoạn chặn bố cục Tải từng thẻ một trong giai đoạn chặn bố cục
Nhấp nháy
Mức độ ưu tiên		 VeryHigh Cao Medium Thấp VeryLow
Mức độ ưu tiên
Công cụ cho nhà phát triển		 Cao nhất Cao Medium Thấp Thấp nhất
Tài nguyên chính ◉
CSS (đầu**) ⬆◉ ⬇
CSS (muộn**) ⬆ ◉ ⬇
CSS (không khớp nội dung đa phương tiện***) ⬆*** ◉⬇
Tập lệnh (sớm** hoặc không phải từ trình quét tải trước) ⬆◉ ⬇
Tập lệnh (muộn**) ⬆ ◉ ⬇
Tập lệnh (không đồng bộ/trì hoãn) ⬆ ◉⬇
Phông chữ ◉
Phông chữ (rel=preload) ⬆◉ ⬇
Nhập ◉
Hình ảnh (trong khung nhìn – sau bố cục) ⬆◉ ⬇
Hình ảnh (5 hình ảnh đầu tiên > 10.000px2) ⬆ ◉ ⬇
Hình ảnh ⬆ ◉⬇
Nội dung nghe nhìn (video/âm thanh) ◉
XHR (đồng bộ hoá) – không dùng nữa ◉
XHR/tìm nạp* (không đồng bộ) ⬆◉ ⬇
Tìm nạp trước ◉
XSL ◉

fetchpriority đặt mức độ ưu tiên tương đối, nghĩa là sẽ tăng hoặc giảm mức độ ưu tiên mặc định theo một mức phù hợp, thay vì đặt rõ ràng mức độ ưu tiên thành High hoặc Low. Điều này thường dẫn đến mức độ ưu tiên High hoặc Low, nhưng không phải lúc nào cũng vậy. Ví dụ: CSS quan trọng có fetchpriority="high" giữ lại mức độ ưu tiên "Rất cao"/"Cao nhất" và việc sử dụng fetchpriority="low" trên các phần tử này vẫn giữ lại mức độ ưu tiên "Cao". Cả hai trường hợp này đều không liên quan đến việc đặt rõ mức độ ưu tiên thành High hoặc Low.

Trường hợp sử dụng

Sử dụng thuộc tính fetchpriority khi bạn muốn cung cấp thêm gợi ý cho trình duyệt về mức độ ưu tiên tìm nạp tài nguyên.

Tăng mức độ ưu tiên của hình ảnh LCP

Bạn có thể chỉ định fetchpriority="high" để tăng mức độ ưu tiên của LCP hoặc các hình ảnh quan trọng khác.

<img src="lcp-image.jpg" fetchpriority="high">

Thông tin so sánh sau đây cho thấy trang Google Chuyến bay có hình nền LCP được tải khi có và không có Mức độ ưu tiên tìm nạp. Khi đặt mức độ ưu tiên thành cao, LCP đã cải thiện từ 2,6 giây thành 1,9 giây.

Một thử nghiệm được thực hiện bằng cách sử dụng worker của Cloudflare để viết lại trang Google Chuyến bay bằng tính năng Tìm nạp mức độ ưu tiên.

Sử dụng fetchpriority="low" để giảm mức độ ưu tiên của các hình ảnh ở đầu trang không quan trọng ngay lập tức, chẳng hạn như hình ảnh ngoài màn hình trong băng chuyền hình ảnh.

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

Mặc dù các hình ảnh 2-4 sẽ nằm ngoài khung nhìn, nhưng chúng có thể được coi là "đủ gần" để đưa hình ảnh lên high và cũng có thể tải ngay cả khi bạn thêm thuộc tính load=lazy. Do đó, fetchpriority="low" là giải pháp chính xác cho trường hợp này.

Trong một thử nghiệm trước đó với ứng dụng Oodle, chúng tôi đã sử dụng tính năng này để giảm mức độ ưu tiên của những hình ảnh không xuất hiện khi tải. Việc này giúp giảm thời gian tải trang xuống 2 giây.

Dữ liệu so sánh song song Mức độ ưu tiên tìm nạp khi được dùng trên băng chuyền hình ảnh của ứng dụng Oodle. Ở bên trái, trình duyệt đặt mức độ ưu tiên mặc định cho hình ảnh băng chuyền, nhưng tải xuống và vẽ những hình ảnh đó chậm hơn khoảng hai giây so với ví dụ ở bên phải, điều này chỉ đặt mức độ ưu tiên cao hơn cho hình ảnh băng chuyền đầu tiên.
Việc chỉ sử dụng mức độ ưu tiên cao cho hình ảnh băng chuyền đầu tiên sẽ giúp trang tải nhanh hơn.

Giảm mức độ ưu tiên của các tài nguyên được tải trước

Để các tài nguyên được tải trước không cạnh tranh với các tài nguyên quan trọng khác, bạn có thể giảm mức độ ưu tiên của các tài nguyên đó. Sử dụng kỹ thuật này với hình ảnh, tập lệnh và CSS.

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">

<!-- Preload CSS without blocking render, or other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

Ưu tiên lại các tập lệnh

Các tập lệnh trên trang của bạn cần có tính tương tác phải tải nhanh nhưng không được chặn các tài nguyên chặn hiển thị khác, quan trọng hơn. Bạn có thể đánh dấu những đối tượng này là async có mức độ ưu tiên cao.

<script src="async_but_important.js" async fetchpriority="high"></script>

Bạn không thể đánh dấu một tập lệnh là async nếu tập lệnh đó dựa vào các trạng thái DOM cụ thể. Tuy nhiên, nếu các định dạng này chạy sau trên trang, bạn có thể tải chúng với mức độ ưu tiên thấp hơn:

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

Thao tác này vẫn sẽ chặn trình phân tích cú pháp khi đến tập lệnh này, nhưng sẽ cho phép ưu tiên nội dung trước khi thực hiện.

Nếu cần DOM hoàn chỉnh, bạn có thể sử dụng thuộc tính defer (chạy theo thứ tự, sau DOMContentLoaded) hoặc thậm chí async ở cuối trang.

Hạ thấp mức độ ưu tiên cho các lần tìm nạp dữ liệu không quan trọng

Trình duyệt thực thi fetch với mức độ ưu tiên cao. Nếu có nhiều lần tìm nạp có thể kích hoạt đồng thời, bạn có thể sử dụng mức độ ưu tiên mặc định cao cho các lần tìm nạp dữ liệu quan trọng hơn và giảm mức độ ưu tiên cho những dữ liệu ít quan trọng hơn.

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});

Ghi chú triển khai tính năng Đặt mức độ ưu tiên cho lệnh tìm nạp

Mức độ ưu tiên tìm nạp có thể cải thiện hiệu suất trong một số trường hợp sử dụng cụ thể, nhưng bạn cần lưu ý một số điều khi sử dụng Mức độ ưu tiên tìm nạp:

  • Thuộc tính fetchpriority chỉ là gợi ý, không phải là lệnh. Trình duyệt sẽ cố gắng tôn trọng lựa chọn ưu tiên của nhà phát triển, nhưng cũng có thể áp dụng các lựa chọn ưu tiên về mức độ ưu tiên tài nguyên cho mức độ ưu tiên tài nguyên để giải quyết xung đột.

  • Đừng nhầm lẫn Mức độ ưu tiên tìm nạp với tính năng tải trước:

    • Tải trước là tìm nạp bắt buộc, không phải là gợi ý.
    • Tính năng tải trước cho phép trình duyệt khám phá sớm một tài nguyên, nhưng vẫn tìm nạp tài nguyên đó theo mức độ ưu tiên mặc định. Ngược lại, Mức độ ưu tiên tìm nạp không giúp tăng khả năng phát hiện, nhưng cho phép bạn tăng hoặc giảm mức độ ưu tiên tìm nạp.
    • Thông thường, bạn sẽ dễ dàng quan sát và đo lường tác động của việc tải trước so với tác động của sự thay đổi về mức độ ưu tiên.

    Mức độ ưu tiên tìm nạp có thể bổ sung cho các lượt tải trước bằng cách tăng mức độ chi tiết của mức độ ưu tiên. Nếu bạn đã chỉ định tính năng tải trước là một trong các mục đầu tiên trong <head> cho hình ảnh LCP, thì Mức độ ưu tiên tìm nạp high có thể sẽ không cải thiện đáng kể LCP. Tuy nhiên, nếu quá trình tải trước xảy ra sau khi các tài nguyên khác tải, thì Mức độ ưu tiên tìm nạp high có thể cải thiện LCP nhiều hơn. Nếu hình ảnh quan trọng là hình nền CSS, hãy tải trước hình ảnh này bằng fetchpriority = "high".

  • Việc cải thiện thời gian tải nhờ việc ưu tiên sẽ phù hợp hơn trong những môi trường có nhiều tài nguyên cạnh tranh cho băng thông mạng có sẵn. Điều này thường xảy ra đối với các kết nối HTTP/1.x mà không thể tải xuống song song hoặc trên các kết nối HTTP/2 hoặc HTTP/3 có băng thông thấp. Trong những trường hợp này, việc ưu tiên có thể giúp giải quyết nút thắt cổ chai.

  • CDN không triển khai tính năng ưu tiên HTTP/2 một cách thống nhất và tương tự đối với HTTP/3. Ngay cả khi trình duyệt thông báo mức độ ưu tiên từ Tìm nạp ưu tiên, CDN có thể không sắp xếp lại mức độ ưu tiên cho các tài nguyên theo thứ tự đã chỉ định. Điều này khiến việc kiểm thử Mức độ ưu tiên tìm nạp trở nên khó khăn. Các mức độ ưu tiên được áp dụng cả nội bộ trong trình duyệt và với các giao thức hỗ trợ tính năng ưu tiên (HTTP/2 và HTTP/3). Bạn vẫn nên sử dụng Mức độ ưu tiên tìm nạp chỉ để ưu tiên trình duyệt nội bộ, độc lập với việc hỗ trợ CDN hoặc nguồn gốc, vì mức độ ưu tiên thường thay đổi khi trình duyệt yêu cầu tài nguyên. Ví dụ: các tài nguyên có mức độ ưu tiên thấp như hình ảnh thường không được yêu cầu trong khi trình duyệt xử lý các mục <head> quan trọng.

  • Có thể bạn không thể giới thiệu tính năng Tìm nạp mức độ ưu tiên làm một phương pháp hay nhất trong thiết kế ban đầu của mình. Sau này trong chu kỳ phát triển, bạn có thể chỉ định mức độ ưu tiên cho các tài nguyên khác nhau trên trang. Nếu các mức độ ưu tiên đó không khớp với mong đợi của bạn, bạn có thể giới thiệu Mức độ ưu tiên tìm nạp để tối ưu hoá thêm.

Nhà phát triển nên sử dụng tính năng tải trước cho mục đích dự kiến – để tải trước các tài nguyên mà trình phân tích cú pháp không phát hiện được (phông chữ, nội dung nhập, hình ảnh LCP ở chế độ nền). Vị trí của gợi ý preload sẽ ảnh hưởng đến thời điểm tải trước tài nguyên.

Mức độ ưu tiên tìm nạp là về cách tìm nạp tài nguyên khi tài nguyên được tìm nạp.

Mẹo sử dụng tính năng tải trước

Hãy lưu ý những điều sau khi sử dụng tính năng tải trước:

  • Việc thêm nội dung tải trước trong tiêu đề HTTP sẽ đặt nội dung này trước mọi nội dung khác trong thứ tự tải.
  • Nhìn chung, các tệp tải trước sẽ tải theo thứ tự mà trình phân tích cú pháp nhận được đối với mọi tệp có mức độ ưu tiên Medium trở lên. Hãy cẩn thận nếu bạn đang bao gồm các lượt tải trước ở phần đầu của HTML.
  • Tải trước phông chữ có thể hoạt động hiệu quả nhất ở cuối phần đầu hoặc đầu phần nội dung.
  • Tải trước nội dung nhập (import() hoặc modulepreload động) sẽ chạy sau thẻ tập lệnh cần nhập, vì vậy, hãy đảm bảo rằng tập lệnh được tải hoặc phân tích cú pháp trước để có thể đánh giá trong khi các phần phụ thuộc của tập lệnh đang tải.
  • Tải trước hình ảnh có mức độ ưu tiên Low hoặc Medium theo mặc định. Hãy sắp xếp chúng theo thứ tự tương ứng với các tập lệnh không đồng bộ và các thẻ có mức độ ưu tiên thấp hoặc thấp nhất khác.

Cập nhật trước đây

Lần đầu tiên, tính năng Mức độ ưu tiên tìm nạp được thử nghiệm trong Chrome dưới dạng bản dùng thử theo nguyên gốc vào năm 2018 và sau đó là vào năm 2021 thông qua thuộc tính importance. Vào thời điểm đó, tính năng này được gọi là Gợi ý về mức độ ưu tiên. Kể từ đó, giao diện đã thay đổi thành fetchpriority cho HTML và priority cho API Tìm nạp của JavaScript trong quy trình tiêu chuẩn web. Để giảm sự nhầm lẫn, chúng tôi hiện gọi API này là Mức độ ưu tiên tìm nạp.

Kết luận

Các nhà phát triển có thể sẽ quan tâm đến Mức độ ưu tiên tìm nạp thông qua những bản sửa lỗi trong hành vi tải trước và trọng tâm gần đây về Chỉ số quan trọng chính của trang web và LCP. Giờ đây, các trình tải này có thêm các núm để đạt được trình tự tải ưu tiên.