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

Leena Sohoni

Patrick Meenan

Barry Pollard

Hỗ trợ trình duyệt

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. Các trình duyệt khá hiệu quả trong việc chỉ định mức độ ưu tiên hoạt động tốt 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ể hỗ trợ:

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 các tập lệnh ở phần cuối để tạo trình tự sắp xếp hình ảnh hiệu quả hơn.

Chế độ xem cuộn phim so sánh hai thử nghiệm của 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, khiến LCP giảm 0,7 giây. — Mức độ ưu tiên tìm nạp cải thiện Nội dung lớn nhất hiển thị 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 chỉ có ảnh hưởng hạn chế đến mức độ ưu tiên tài nguyên bằng cách sử dụng phương thức 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 cho 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 tải từ một tập lệnh. Kết nối trước giúp khởi động các kết nối đến 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 để chuyể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 là 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à API Tìm nạp với thuộc tính priority để thay đổi mức độ ưu tiên của các lượt tìm nạp tài nguyê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 mà khi được tải trước sẽ vẫn 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 ban đầu khác đẩy lùi thì việc sử dụng Mức độ ưu tiên tìm nạp có thể giúp tải hình ảnh sớm 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 cách tính mức độ ưu tiên logic 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:

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

CSS ban đầu (như CSS trong <head>) là highest theo mặc định và chặn bố cục.
CSS trễ (như CSS ở giữa <body>) sẽ không chặn bố cục ban đầu. Ứng dụng không tải hết mọi nội dung trong khi trình duyệt ở giai đoạn chặn bố cục này. Thay vào đó, trình duyệt chỉ được tải lần lượt từng tài nguyên cùng với các tài nguyên khác cho đến khi trình duyệt rời 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.

Có nhiều nội dung giải thích khác trong phần chú thích cuối trang của bảng.

	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
Nhấp nháy Mức độ ưu tiên	VeryHigh	Cao	Medium	Thấp	VeryLow
DevTools Priority	Cao nhất	Cao	Medium	Thấp	Thấp nhất
	Tài nguyên chính
	CSS (sớm**)		CSS (muộn**)		CSS (nội dung nghe nhìn không khớp***)
		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=tải trước)
		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
		XSL
	XHR (đồng bộ hoá)	XHR/tìm nạp* (không đồng bộ)

Lưu ý:
* Các tải trước bằng cách sử dụng "as" hoặc tìm nạp với "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ụ: việc 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, quá trình tìm nạp sẽ được ưu tiên như một XHR không đồng bộ.
** "Sớm" được định nghĩa là được yêu cầu trước khi có yêu cầu bất kỳ hình ảnh không tải trước nào và "trễ" là sau khi người dùng yêu cầu hình ảnh không tải trước.
*** CSS trong đó 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 loại nội dung đó, thường có nghĩa là tệp được tìm nạp rất muộn.

Hình ảnh có giá từ "Thấp" mức độ ưu tiên theo mặc định. Tại thời điểm bố cục, hình ảnh trong khung nhìn được tăng lên "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à có thể tìm nạp song song 2 trong số các tuỳ chọn này 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", giá trị của các hình ảnh quan trọng 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 xuống các tài nguyên có cùng mức độ ưu tiên đã tính toán theo thứ tự khám phá của chúng. 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 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ữ. 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ữ. Loại quảng cáo này có sự kết hợp giữa 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 Hàng yêu cầu lớn hoặc trong phần chú thích.

Thẻ Mạng trong Công cụ cho nhà phát triển của Chrome. "Hàng yêu cầu lớn" cài đặt đượ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 của phương tiện bên dưới. Nội dung tương tự cũng sẽ xuất hiện trong chú thích. — 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 nội dung bạn có thể thay đổi để tác độ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ự mà chúng được 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 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, 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à 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 cần có mức độ ưu tiên cao hơn và 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 sẽ phát hiện thấy các trang đó đang ở trong khung nhìn và tăng cường mức độ ưu tiên. Việc 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. Nhằm tự động hoá việc này, Chrome sẽ đặt 5 hình ảnh lớn hơn đầu tiên ở mức độ ưu tiên Medium. Tuy nhiên, fetchpriority="high" rõ ràng sẽ hiệu quả hơn nữa.

Bạn vẫn cần phải tải trước để khám phá sớm những hình ảnh LCP được đưa vào làm nền CSS. Để nâng cao hiệu quả cho hình nền của bạn mức độ ưu tiên, hãy thêm fetchpriority='high' vào lượt tải trước.
Việc khai báo tập lệnh dưới dạng async hoặc defer sẽ yêu cầu trình duyệt tải các tập lệnh này theo cách không đồng bộ. Tuy nhiên, như trình bày trong bảng mức độ ưu tiên, những tập lệnh này cũng được gán mức phân loại là "Thấp" mức độ ưu tiên. Bạn có thể muốn tăng mức độ ưu tiên của các tệp và đảm bảo tải xuống không đồng bộ, đặc biệt là 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 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ẽ 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`

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 bạn 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 đó cao hơn bình thường, miễn là phương pháp 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 nếu phương pháp phỏng đoán của nó cho phép tài nguyên đó.
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ư trình bày 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ó sẵn dưới dạng Google Tài liệu).

	Tải trong giai đoạn chặn bố cục		Tải lần lượt từng bố cục trong giai đoạn chặn bố cục
Nhấp nháy Mức độ ưu tiên	VeryHigh	Cao	Medium	Thấp	VeryLow
DevTools Priority	Cao nhất	Cao	Medium	Thấp	Thấp nhất
Tài nguyên chính	◉
CSS (sớm**)	⬆◉	⬇
CSS (muộn**)		⬆	◉	⬇
CSS (nội dung nghe nhìn không khớp***)		⬆***			◉⬇
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=tải trước)		⬆◉		⬇
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					◉
XSL		◉

Lưu ý:
* Tải trước bằng "as" hoặc tìm nạp bằng "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ụ: việc tải trước as="style" sẽ sử dụng Mức độ ưu tiên cao nhất. Không có đích định rõ ràng, quá trình tìm nạp sẽ được ưu tiên như một XHR không đồng bộ.
** "Sớm" được định nghĩa là được yêu cầu trước khi có yêu cầu đối với bất kỳ hình ảnh không tải trước nào (có nghĩa là "trễ" là sau).
*** CSS trong đó 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 được. Điều này thường có nghĩa là CSS sẽ được tìm nạp rất muộn, ngay cả với fetchpriority="high".

Theo mặc định, hình ảnh có giá từ "Thấp" mức độ ưu tiên và sau đó tại thời điểm bố cục được tăng lên "Cao" nếu ở 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 và hai 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", giá trị của các hình ảnh quan trọng 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à 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 giá trị "Rất cao"/"Cao nhất" mức độ ưu tiên và việc sử dụng fetchpriority="low" trên các phần tử này sẽ duy trì giá trị "Cao" mức độ ưu tiên. 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 mức độ ưu tiên được đặt thành cao, LCP tăng từ 2,6 giây lên 1,9 giây.

Một thử nghiệm được thực hiện bằng cách sử dụng các 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.

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 các 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ư 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" để tăng cường các giá trị này lên high, đồng thời 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 tính năng này để giảm mức độ ưu tiên cho các 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 sử dụng mức độ ưu tiên cao chỉ 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

Để những tài nguyên được tải trước không cạnh tranh với những tài nguyên quan trọng khác, bạn có thể giảm mức độ ưu tiên của những 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.

Giảm mức độ ưu tiên đối với 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ìm nạp mức độ ưu tiên

Mức độ ưu tiên tìm nạp có thể cải thiện hiệu suất trong các trường hợp sử dụng cụ thể nhưng bạn cần lưu ý một số điều sau đây 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ải trước cho phép trình duyệt sớm phát hiện tài nguyên nhưng vẫn tìm nạp tài nguyên với 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".
Những điểm cải tiến về thời gian tải từ tính năng ưu tiên sẽ phù hợp hơn trong những môi trường có nhiều tài nguyên hơn cạnh tranh để lấy 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 điểm tắc nghẽn.
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 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 tìm nạp. 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ợ 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ộ 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 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 đó trong chu kỳ phát triển, bạn có thể ưu tiên được chỉ định cho các tài nguyên khác nhau trên trang. Nếu chúng 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.

Nhà phát triển nên sử dụng tính năng tải trước cho mục đích để 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ữ, mục nhập, hình ảnh LCP trong 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 cho biết 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.
Thông thường, tải trước theo thứ tự mà trình phân tích cú pháp truy cập vào bất kỳ nội dung nào 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.
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 có mức độ ưu tiên là Low hoặc Medium. 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 đó, dữ liệu này được gọi là Gợi ý ư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 theo quy trình 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.

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 các 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, họ có thể dùng các nút điều chỉnh khác để đạt được trình tự tải mong muốn.