Trang này được dịch bởi Cloud Translation API.

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

Addy Osmani

Leena Sohoni

Patrick Meenan

Barry Pollard

Hỗ trợ trình duyệt

102
102
x
17,2

Nguồn

Khi phân tích cú pháp một trang web và bắt đầu khám phá cũng như tải các tài nguyên xuống (chẳng hạn như hình ảnh, tập lệnh hoặc CSS), trình duyệt sẽ chỉ định cho chúng một priority tìm nạp để có thể tải xuống theo thứ tự tối ưu. Mức độ ưu tiên của 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 cách sử dụng <link> trong <head> có thể là Very High. Tính năng tự động chỉ định mức độ ưu tiên thường hoạt động tốt, nhưng có những trường hợp sử dụng mà thứ tự được chỉ định không phải là phương pháp tối ưu.

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

Tóm tắt

Một số khía cạnh chính mà mức độ ưu tiên của Tìm nạp có thể giúp ích cho bạn:

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 xảy ra sớm hơn.
Tăng mức độ ưu tiên của tập lệnh async, sử dụng ngữ nghĩa tốt hơn so với cách 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 các tập lệnh thân sau để trình tự hình ảnh hiệu quả hơn.

Một khung hiển thị cuộn phim, trong đó so sánh hai quy trình kiểm tra trên trang chủ 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, giúp LCP giảm 0,7 giây. — Mức độ ưu tiên tìm nạp giúp cải thiện Thời gian hiển thị nội dung lớn nhất từ 2,6 giây lên 1,9 giây trong một thử nghiệm của Google Chuyến bay.

Trước đây, các nhà phát triển ít có ảnh hưởng hạn chế đến mức độ ưu tiên của tài nguyên khi sử dụng chức 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 tự nhiên phát hiện các tài nguyên đó. Điều này đặc biệt hữu ích đối với các tài nguyên khó khám phá hơn, chẳng hạn như phông chữ có trong biểu định kiểu, hình nền hoặc tài nguyên được tải từ một tập lệnh. Kết nối trước giúp khởi động kết nối với các 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 đến 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 cần thiết.

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à 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 để cho biết 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à 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ần 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 hoạt động tải trước. Chụp hình ảnh có Thời gian hiển thị nội dung lớn nhất mà khi tải trước, hình ảnh này vẫn sẽ có mức độ ưu tiên thấp. Nếu hình ảnh bị các tài nguyên có mức độ ưu tiên thấp ở giai đoạn đầu đẩy lùi, thì việc sử dụng Mức độ ưu tiên tìm nạp có thể giúp sớm tải hình ảnh.

Mức độ ưu tiên về 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. Sau đây là các yếu tố có thể ảnh hưởng đến logic tính toán ưu tiên:

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 bên thứ ba.
Vị trí hoặc thứ tự của tài liệu tham chiếu đến tài nguyên.
Gợi ý về tài nguyên preload, giúp trình duyệt khám phá tài nguyên nhanh hơn và tải tài nguyên đó sớm hơn.
Các thay đổi về cách tính toán mức độ ưu tiên đối với tập lệnh async hoặc defer.

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:

Ví dụ về cách đọc bảng này:

Theo mặc định, CSS ban đầu (chẳng hạn như CSS trong <head>) là highest và chặn bố cục.
CSS muộn (như CSS ở giữa <body>) không chặn bố cục ban đầu. Tất cả các tệp đều không được tải khi trình duyệt đang trong giai đoạn chặn bố cục này mà chỉ được tải từng lần một bằng các tài nguyên khác cho đến khi trình duyệt thoát khỏi giai đoạn chặn bố cục. Nhờ đó, trình duyệt có thể tập trung vào các tài nguyên quan trọng hơn.
CSS không phù hợp (như biểu định kiểu media="print" khi trang đang tải trên màn hình, không được in) được tải với mức độ ưu tiên lowest.

Để biết thêm thông tin chi tiết, hãy xem chú thích cuối trang trong bảng.

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

Lưu ý:
* Hoạt động tải trước bằng cách sử dụng "as" hoặc fetch với một "destination" cụ thể sẽ sử dụng mức độ ưu tiên của đích đến mà chúng đang yêu cầu. Ví dụ: thao tác tải trước as="style" sử dụng mức độ ưu tiên Cao nhất. Không có đích đến rõ ràng, hoạt động tìm nạp sẽ được ưu tiên như XHR không đồng bộ.
** "Sớm" nghĩa là "sớm" nghĩa là cần thiết trước khi người dùng yêu cầu tải những hình ảnh không tải trước, còn "late" là sau khi người dùng đã yêu cầu hình ảnh không tải trước.
*** CSS có loại nội dung nghe nhìn không khớp sẽ không được trình quét tải trước tìm nạp và chỉ được xử lý khi trình phân tích cú pháp chính tiếp cận, điều này thường có nghĩa là trình quét này được tìm nạp rất muộn.

Theo mặc định, các hình ảnh có mức độ ưu tiên "Thấp". Tại thời điểm bố cục, hình ảnh trong khung nhìn được tăng lên "High" (Cao). Kể từ Chrome 117, 5 hình ảnh lớn đầu tiên được đặt thành "Medium" để tăng tốc độ này, và 2 hình ảnh trong số đó có thể được tìm nạp song song trong "chế độ chặt chẽ" ban đầu. Khi gắn thẻ các hình ảnh quan trọng trong mã đánh dấu bằng fetchpriority="high", các hình ảnh đó có thể bắt đầu ở mức "Cao" ngay lập tức và tải nhanh hơn nhiều.

Trình duyệt sẽ tải các tài nguyên có cùng mức ưu tiên đã tính toán xuống theo thứ tự tìm thấy. 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ủa Công cụ dành cho nhà phát triển Chrome. (Hãy nhớ 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).

Ảnh chụp màn hình về các thành phần được liệt kê trong thẻ mạng của Công cụ cho nhà phát triển của Chrome. Các cột sẽ được đọc từ trái sang phải: tên, trạng thái, loại, trình khởi tạo, kích thước, thời gian và mức độ ưu tiên. — Mức độ ưu tiên đối với tài nguyên `type = "font"` trên trang chi tiết về 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 Hàng yêu cầu lớn hoặc trong chú giải công cụ.

Ảnh chụp màn hình về các thành phần được liệt kê trong thẻ mạng của Công cụ cho nhà phát triển của Chrome. Chế độ cài đặt 'Hàng yêu cầu lớn' được chọn và cột Mức độ ưu tiên hiển thị hình ảnh đầu tiên có mức độ ưu tiên là Cao và mức ưu tiên ban đầu khác của phương tiện bên dưới. Phần chú thích cũng cho thấy điều tương tự. — 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ầ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 và Các chỉ số quan trọng về trang web. Dưới đây là một số ví dụ về những điều bạn có thể thay đổi mà không cần sử dụng tính năng Tìm nạp mức độ ưu tiên:

Đặt các thẻ tài nguyên như <script> và <link> theo thứ tự bạn muốn trình duyệt tải các thẻ đó xuống.
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à các tài nguyên mà trình duyệt khó khám phá hơn.
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 có sẵn cho các tài nguyên quan trọng hơn trong màn hình đầu tiên.

Dưới đây là một số trường hợp phức tạp hơn mà tính năng Tìm nạp ưu tiên có thể giúp bạn có được thứ tự ưu tiên tài nguyên mà bạn cần:

Bạn có nhiều 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 đó đều có cùng mức độ ưu tiên. Ví dụ: trong băng chuyền hình ảnh, chỉ hình ảnh hiển thị đầu tiên cần mức độ ưu tiên cao hơn.
Hình ảnh chính bên trong khung nhìn thường bắt đầu ở mức độ ưu tiên Low hoặc Medium. Sau khi bố cục hoàn tất, Chrome sẽ phát hiện thấy các thiết bị này đang ở trong khung nhìn và tăng mức độ ưu tiên. Điều này thường làm quá trình tải hình ảnh bị trễ đáng kể. 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 "Cao" và bắt đầu tải sớm hơn nhiều.

Bạn vẫn cần phải tải trước để sớm phát hiện ra các hình ảnh LCP được đưa vào dưới dạng nền CSS. Để tăng mức độ ưu tiên của hình nền, hãy đưa fetchpriority='high' vào nội dung 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 đó không đồng bộ. Tuy nhiên, như minh hoạ trong bảng mức độ ưu tiên, các 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 lệnh này trong khi vẫn đảm bảo khả năng 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 theo cách không đồng bộ, thì trình duyệt sẽ chỉ định mức độ ưu tiên High cho tài nguyên hoặc dữ liệu đó. 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 các lệnh gọi API phản hồi hoạt động đầu vào của người dùng. Đánh dấu các lệnh gọi API trong nền là mức độ ưu tiên Low và các lệnh gọi API tương tác là mức ưu tiên High.
Trình duyệt chỉ định CSS và phông chữ High" priority, nhưng một số tài nguyên trong số đó có thể quan trọng hơn các tài nguyên khác. Bạn có thể dùng tính năng Tìm nạp mức độ ưu tiên để giảm mức độ ưu tiên của các tài nguyên không quan trọng.

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, chẳng hạn như CSS, phông chữ, tập lệnh và hình ảnh khi được tải xuống bằng thẻ link, img hoặc script. Hàm này có thể nhận các giá trị sau:

high: Tài nguyên có mức độ ưu tiên cao và bạn muốn trình duyệt ưu tiên tài nguyên này, miễn là thông tin tự phỏng đoán của 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 và bạn muốn trình duyệt giảm mức độ ưu tiên nếu thông tin phỏng đoán của tài nguyên cho phép.
auto: Giá trị mặc định, cho phép trình duyệt chọn mức độ ưu tiên thích 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 toán 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 đó.

	Tải trong giai đoạn chặn bố cục		Tải từng lần một trong giai đoạn chặn bố cục
Mức độ ưu tiên nhấp nháy	VeryHigh	Cao	Trung bình	Thấp	VeryLow
Mức độ ưu tiên của công cụ cho nhà phát triển	Cao nhất	Cao	Trung bình	Thấp	Thấp nhất
Tài nguyên chính	◉
CSS (sớm**)	⬆◉	⬇
CSS (trễ**)		⬆	◉	⬇
CSS (nội dung đa phương tiện không khớp***)		⬆***			◉⬇
Tập lệnh (sớm** hoặc không từ trình quét tải trước)		⬆◉		⬇
Tập lệnh (cuối**)		⬆	◉	⬇
Tập lệnh (không đồng bộ/trì hoãn)		⬆		◉⬇
Phông chữ	◉
Phông chữ (rel=preview)		⬆◉		⬇
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)		⬆	◉	⬇
Bài đăng có 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					◉
gtag		◉

fetchpriority đặt mức độ ưu tiên tương đối, nghĩa là tăng hoặc giảm mức độ ưu tiên mặc định đi một mức thích hợp, thay vì thiết lập 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" sẽ giữ nguyên mức độ ưu tiên "Rất cao"/"Cao nhất" và việc sử dụng fetchpriority="low" cho các phần tử này sẽ giữ nguyên mức độ ưu tiên "Cao". Không có trường hợp nào trong số này liên quan đến việc đặt mức độ ưu tiên rõ ràng 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 cho trình duyệt một gợi ý về mức độ ưu tiên cầ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">

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

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

Giảm mức độ ưu tiên của hình ảnh trong màn hình đầu tiên

Sử dụng fetchpriority="low" để giảm mức độ ưu tiên của hình ảnh trong màn hình đầu tiên không quan trọng ngay lập tức, chẳng hạn 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>

Trong một thử nghiệm trước đây với ứng dụng Oodle, chúng tôi đã dùng cách 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.

So sánh song song Mức độ ưu tiên của Tìm nạp khi được sử 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 tài nguyên tải trước

Để các tài nguyên tải trước không phải 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 chúng. 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" href="/js/script.js" as="script" fetchpriority="low">

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

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

Những tập lệnh mà trang của bạn cần có tính tương tác phải tải nhanh nhưng không nên chặn các tài nguyên khác. Bạn có thể đánh dấu những thông báo này là async với 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 trình xử lý này chạy sau đó trên trang, bạn có thể tải các trình xử lý đó với mức độ ưu tiên thấp hơn:

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

Giảm mức độ ưu tiên cho những 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, thì bạn có thể 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 của 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'});

Tìm nạp các ghi chú triển khai mức độ ưu tiên

Dưới đây là một số điều bạn cần lưu ý khi sử dụng tính năng Tìm nạp mức độ ưu tiên:

Thuộc tính fetchpriority là gợi ý chứ 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ề tài nguyên để ưu tiên tài nguyên nhằm giải quyết xung đột.
Đừng nhầm lẫn mức độ ưu tiên Tìm nạp với việc tải trước:
- Tải trước là tìm nạp bắt buộc, không phải gợi ý.
- Tính năng tải trước cho phép trình duyệt phát hiện sớm tài nguyên, nhưng vẫn tìm nạp tài nguyên có mức độ ưu tiên mặc định. Trong khi đó, Mức độ ưu tiên tìm nạp không giúp tăng hoặc giảm mức độ ưu tiên tìm nạp, nhưng cho phép bạn tăng hoặc giảm mức độ ưu tiên tìm nạp.
- Việc quan sát và đo lường tác động của một lượt tải trước sẽ dễ dàng hơn so với tác động của một 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 một lượt tải trước làm 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 diễn 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 hơn nữa. 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 từ chế độ ưu tiên sẽ phù hợp hơn trong các môi trường mà nhiều tài nguyên cạnh tranh để có được băng thông mạng hiện có. Điều này phổ biến đối với các kết nối HTTP/1.x trong đó không thể tải xuống song song hoặc trên các kết nối HTTP/2 băng thông thấp. Trong những trường hợp này, mức độ ưu tiên có thể giúp giải quyết nút thắt cổ chai.
CDN không triển khai mức độ ưu tiên HTTP/2 một cách thống nhất. Ngay cả khi trình duyệt thông báo mức độ ưu tiên từ Mức độ ưu tiên tìm nạp, CDN có thể không ưu tiên lại 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 của tính năng Tìm nạp trở nên khó khăn. Các mức độ ưu tiên được áp dụng cả trong nội bộ trình duyệt và với các giao thức hỗ trợ mức độ ưu tiên (HTTP/2 và HTTP/3). Bạn vẫn nên chỉ sử dụng Mức độ ưu tiên Tìm nạp cho mức độ ưu tiên của trình duyệt nội bộ mà không phụ thuộc vào CDN hoặc hỗ trợ 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 được coi Mức độ ưu tiên tìm nạp như một phương pháp hay nhất trong thiết kế ban đầu của mình. Trong phần sau của chu kỳ phát triển, bạn có thể chỉ định mức độ ưu tiên cho các tài nguyên trên trang. Nếu mức độ ưu tiên không phù hợp với kỳ vọng 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á hơn nữa.

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

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

Khi thêm một lượt tải trước trong tiêu đề HTTP, bạn sẽ đặt thành phần này trước mọi thành phần khác trong thứ tự tải.
Nhìn chung, tải trước sẽ tải theo thứ tự mà trình phân tích cú pháp tiếp cận được đối với mọi mức độ ưu tiên trên "Trung bình". Hãy cẩn thận nếu bạn thêm các lượt tải trước vào đầu HTML.
Tính năng tải trước phông chữ có thể hoạt động hiệu quả nhất ở phần cuối phần đầu hoặc phần nội dung.
Các lượt tải trước 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 tập lệnh được tải hoặc phân tích cú pháp trước để có thể đánh giá tập lệnh trong khi các phần phụ thuộc của tập lệnh đang tải.
Theo mặc định, các lượt tải trước hình ảnh sẽ có mức độ ưu tiên "Thấp" hoặc "Trung bình". Hãy sắp xếp các tập lệnh này 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

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