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

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

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 các tài nguyên đó 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 đối với 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. Các trình duyệt khá hiệu quả trong việc chỉ định mức độ ưu tiên hoạt động hiệu quả nhưng có thể không phải là cách tối ưu trong mọi trường hợp.

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

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, để LCP xảy 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 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 để cho phép sắp xếp trình tự hình ảnh hiệu quả hơn.

Một chế độ xem cuộn phim 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, dẫn đến việc giảm LCP đi 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 đến mức độ ưu tiên của tài nguyên khi 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 tự nhiên khám phá 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ừ 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. Sẽ 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 để thay đổi 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 tải trước. Chụp hình ảnh Nội dung lớn nhất hiển thị mà khi được tải trước, hình ảnh này sẽ vẫn 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 ở giai đoạn đầu đẩy lùi hiện tượng này, việc sử dụng Mức độ ưu tiên tìm nạp có thể giúp khắc phục tình trạng hình ảnh được tải.

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 của bên thứ ba.
Vị trí hoặc thứ tự của tài liệu tham chiếu đến tài nguyên.
Liệu thuộc tính async hoặc defer có được sử dụng trên 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:

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

Theo mặc định, CSS ban đầu (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ả đề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 mỗi lần 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.

Phần chú thích của bảng có nhiều nội dung giải thích hơ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ộ)
	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ụ: tải trước as="style" sử dụng mức độ ưu tiên Cao nhất. Khi 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 hình ảnh không tải trước, còn "trễ" là khi hình ảnh không tải trước được yêu cầu.
*** 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 sẽ bắt đầu ở 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 cường lên mức "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 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 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 các tài nguyê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ủ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 rồi đánh dấu vào cột đó).

Thẻ Mạng của 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ữ. Tất cả đều có mức độ ưu tiên Cao nhất. — Mức độ ưu tiên của tài nguyên `type = "font"` trên trang chi tiết về tin tức của BBC

Thẻ Mạng của 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ữ. Loại chiến dịch này kết hợp mức độ ưu tiên Thấp và Cao. — Mức độ ưu tiên đối với tài nguyên `type = "script"` 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 phần cài đặt Hàng yêu cầu lớn hoặc trong chú giải công cụ.

Thẻ Mạng trong 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 để tác động đến mức độ ưu tiên tải tài nguyên xuống:

Đặ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 xuống. Các tài nguyên có cùng mức độ ưu tiên thường được tải theo thứ tự khám phá.
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 những tài nguyên không dễ dàng phát hiện sớm bởi trình duyệt.
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 hiện có cho các tài nguyên quan trọng hơn trong màn hình đầu tiên.

Các kỹ thuật này giúp kiểm soát mứ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 một hình nền quan trọng, bạn có thể phát hiện hình nền đó sớm hơn nhiều, nhờ đó cải thiện Thời gian hiển thị nội dung lớn nhất (LCP).

Đôi khi, những tên người dùng 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. Dưới đây là một số trường hợp mức độ ưu tiên của Tìm nạp có thể giúp ích cho bạ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 có mức độ ưu tiên cao hơn, còn các hình ảnh khác thường ngoài màn hình ban đầu có thể được thiết lập để có 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 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 của các thiết bị này. Việc này thường làm chậm trễ đáng kể quá trình 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 là High và bắt đầu tải sớm hơn nhiều. Trong nỗ lực tự động hoá phần nào đó, Chrome đã đặt 5 hình ảnh lớn hơn đầu tiên ở mức độ ưu tiên Medium. Điều này sẽ giúp ích cho bạn, nhưng một fetchpriority="high" rõ ràng sẽ còn tốt hơn nữa.

Bạn vẫn phải tải trước để phát hiện sớm 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ư hiển thị 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 có thể muố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 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 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 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 sẽ chỉ định mức độ ưu tiên High cho CSS và phông chữ, nhưng một số tài nguyên trong số đó có thể quan trọng hơn những 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ị, vì vậy thường phải được ưu tiên là 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 đượ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 hơn và bạn muốn trình duyệt ưu tiên tài nguyên đó cao hơn bình thường, 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 hơn và bạn muốn trình duyệt giảm mức độ ưu tiên của tài nguyên này, một lần nữa 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 đó. (cũng có thể sử dụng dưới dạng Google Tài liệu).

	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		◉

Lưu ý:
* Việc tải trước bằng "as" hoặc fetch bằng 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ụ: tải trước as="style" sẽ sử dụng mức độ ưu tiên Cao nhất. Khi không có chỉ định rõ ràng, hoạt động tìm nạp sẽ được ưu tiên như XHR không đồng bộ.
** "Sớm" được định nghĩa là cần phải có trước khi người dùng yêu cầu hình ảnh không tải trước (sau đó là "trễ").
*** CSS có loại nội dung đa phương tiệ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 nó. Điều này thường có nghĩa là CSS được tìm nạp rất muộn, ngay cả với fetchpriority="high".

Theo mặc định, hình ảnh sẽ bắt đầu ở mức độ ưu tiên "Thấp", sau đó được tăng cường lên "Cao" nếu nằm trong khung nhìn. Kể từ Chrome 117, 5 hình ảnh lớn đầu tiên được đặt thành "Medium" để tăng tốc quá trình này và 2 trong số này 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.

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

Dùng thuộc tính fetchpriority khi bạn muốn cho trình duyệt gợi ý thêm 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">

So sánh sau đây cho thấy trang Google Chuyến bay với 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 worker trong 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, ví dụ: 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 từ 2-4 sẽ nằm ngoài khung nhìn, nhưng chúng có thể được coi là "đủ gần" để tăng cường lên high và cũng có thể tải ngay cả khi 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 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. Cách này đã 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" 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 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 chặn hiển thị khác quan trọng hơn. 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 tệp này chạy sau đó trên trang, bạn có thể tải các tệp này ở mức độ ưu tiên thấp hơn:

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

Thao tác này sẽ vẫn chặn trình phân tích cú pháp khi đến tập lệnh này, nhưng nội dung trước việc này sẽ được ưu tiê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.

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ể 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 của những dữ liệu ít quan trọng.

// 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

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

Thuộc tính fetchpriority là gợi ý chứ không phải là lệnh. Trình duyệt 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 nhằm ư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 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. Ngược lại, 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 thường 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 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 môi trường có 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 nơi 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 băng thông thấp. Trong những trường hợp này, việc ưu tiên có thể giúp tháo gỡ 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 và tương tự như vậy cho HTTP/3. 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 gây khó khăn cho việc kiểm thử Mức độ ưu tiên của tính năng Tìm nạp. 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 là 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 chúng không đáp ứng được kỳ vọng của bạn, bạn có thể thêm mức độ ưu tiên của tính năng Tìm nạp để tối ưu hoá hơn nữa.

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 nền). Vị trí của gợi ý preload sẽ ảnh hưởng khi tài nguyên được tải trước.

Mức độ ưu tiên tìm nạp xác định cách tìm nạp tài nguyên khi tìm nạp.

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, việc tải trước sẽ theo thứ tự mà trình phân tích cú pháp truy cập được vào mọi nội dung có mức độ ưu tiên Medium trở lên. Hãy cẩn thận nếu bạn tính cả 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 hoặc phần đầu của phần nội dung.
Các lượt tải trước tập lệnh nhập (import() hoặc modulepreload động) sẽ chạy sau thẻ tập lệnh cần nhập, vì vậy, trước tiên, hãy đảm bảo tập lệnh được tải hoặc phân tích cú pháp để có thể đánh giá tập lệnh trong khi các phần phụ thuộc đang tải.
Theo mặc định, các lượt tải trước hình ảnh có mức độ ưu tiên là Low hoặc Medium. Hãy sắp xếp 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

Trước tiên, 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 ý về mức độ ưu tiên. Kể từ đó, giao diện đã được thay đổi thành fetchpriority cho 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 đây là Mức độ ưu tiên tìm nạp API.

Kết luận

Có thể các nhà phát triển sẽ quan tâm đến tính năng Tìm nạp mức độ ưu tiên với các bản sửa lỗi trong hành vi tải trước, cũng như trọng tâm gần đây về Các chỉ số quan trọng về trang web và LCP. Các thiết bị này hiện có thêm các nút điều chỉnh để đạt được trình tự tải mong muốn.