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.
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 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ố gắng tải tài nguyên xuống theo thứ tự tối ưu. Những mức độ ưu tiên này có thể phụ thuộc vào loại tài nguyên 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 trong khi mức độ ưu tiên cho CSS chặn hiển thị, tải sớm qua <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.
Trong bài viết này, chúng ta sẽ 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 ý 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 hoá 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
asyncbằng cách sử dụng ngữ nghĩa tốt hơn so với tấn công thường được sử dụng hiện tại (chèn<link rel="preload">cho tập lệnhasync). - Giảm mức độ ưu tiên của các tập lệnh thân sau để sắp xếp trình tự hiệu quả hơn với hình ảnh.
Trước đây, các nhà phát triển có một số ảnh hưởng nhưng rất hạn chế đối với 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. Mức độ ưu tiên Tìm nạp bổ sung cho các Gợi ý về tài nguyên này, nhưng bạn cần hiểu rõ từng Gợi ý phù hợp. Tính năng tải trước cho phép bạn thông báo cho trình duyệt về những tài nguyên quan trọng mà bạn muốn tải sớm trước khi chúng được tự nhiên khám phá. Điều này đặc biệt hữu ích đối với các tài nguyên không dễ dàng khám phá, 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. Tính năng 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ư Time-to-first-byte. Tính năng 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 có URL chính xác của tài nguyên sẽ cần đến.
Mức độ ưu tiên tìm nạp là tín hiệu dựa trên mã đánh dấu (có sẵn 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 tìm nạp có sẵn trong Chrome 101 trở lên.
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. Có thể có nhiều yếu tố ảnh hưởng đến logic tính toán mức độ ưu tiên. Ví dụ:
- CSS, phông chữ, tập lệnh, hình ảnh và tài nguyên của bên thứ ba được chỉ định mức độ ưu tiên khác nhau.
- Vị trí hoặc thứ tự bạn tham chiếu tài nguyên trong tài liệu cũng ảnh hưởng đến mức độ ưu tiên của tài nguyên.
- Gợi ý về tài nguyên
preloadgiúp trình duyệt tìm thấy một tài nguyên nhanh hơn, từ đó tải tài nguyên đó trước khi tài liệu tải cũng như ảnh hưởng đến mức độ ưu tiên. - Các thay đổi về cách tính toán mức độ ưu tiên đối với tập lệnh
asynchoặcdefer.
Bảng sau đây xem xét các yếu tố như vậy để cho biết cách hầu hết tài nguyên hiện đang được ưu tiên và sắp xếp theo trình tự trong Chrome.
| 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ộ) | ||||
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 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).
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ể sử dụng chế độ cài đặt Hàng yêu cầu lớn để xem cả mức độ ưu tiên ban đầu và cuối cùng. Điều này cũng được thể hiện trong chú giải công cụ, bất kể chế độ cài đặt Hàng yêu cầu lớn.
Khi nào bạn cần Tìm nạp mức độ ưu tiên?
Kiến thức về logic ưu tiên của trình duyệt cung cấp cho bạn một số nút hiện có để điều chỉnh thứ tự tải xuống. Bạn có thể
- Đặt các thẻ tài nguyên như
<script>và<link>tuỳ theo thứ tự tải các thẻ đó 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
asynchoặcdeferđể 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 nhiều 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 tất cả các hình ảnh này không cần 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 so với các hình ảnh khác.
- Hình ảnh chính bên trong khung nhìn thường bắt đầu ở mức độ ưu tiên "Thấp" (lưu ý rằng thay đổi trong Chrome 117 đặt năm hình ảnh lớn đầu tiên thành "Trung bình" nhưng hình ảnh này có thể bao gồm hoặc không bao gồm hình ảnh chính của bạn). 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 khiến 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.
Xin lưu ý rằng bạn vẫn cần 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 và có thể kết hợp với Mức độ ưu tiên tìm nạp bằng cách thêmfetchpriority='high'vào phần tải trước. Nếu không, hình ảnh sẽ vẫn bắt đầu với mức độ ưu tiên "Thấp" hoặc "Trung bình" cho hình ảnh. - Việc khai báo tập lệnh là
asynchoặcdefersẽ yêu cầu trình duyệt tải các tập lệnh đó không đồng bộ. Tuy nhiên, như đã thấy trong bảng trước, 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 biến 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 những tập lệnh quan trọng đối với trải nghiệm người dùng. - Bạn có thể dùng API
fetch()của JavaScript để tìm nạp tài nguyên hoặc dữ liệu một cách không đồng bộ. Trình duyệt sẽ chỉ định mức độ ưu tiên "Cao" cho quá trình tìm nạp. Có thể có trường hợp bạn không muốn thực thi tất cả các lần tìm nạp của mình với mức độ ưu tiên "Cao" mà muốn sử dụng Mức độ ưu tiên tìm nạp khác. Điều này có thể hữu ích khi chạy các lệnh gọi API trong nền và kết hợp chúng 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, chẳng hạn như với tính năng tự động hoàn thành. Các lệnh gọi API trong nền có thể được gắn thẻ là có mức độ ưu tiên "Thấp" và các lệnh gọi API tương tác được đánh dấu là có mức độ ưu tiên "Cao". - Trình duyệt sẽ chỉ định mức độ ưu tiên "Cao" cho CSS và phông chữ, nhưng tất cả các tài nguyên đó có thể không quan trọng như nhau hoặc không bắt buộc đối với LCP. 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 một số tài nguyên trong số này.
Thuộc tính fetchpriority
Bạn có thể cung cấp Mức độ ưu tiên tìm nạp bằng thuộc tính HTML fetchpriority. Bạn có thể sử dụng thuộc tính này với các thẻ link, img và script. Thuộc tính này cho phép bạn chỉ định mức độ ưu tiên 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ẻ được hỗ trợ.
Thuộc tính fetchpriority chấp nhận một trong ba giá trị:
high: Bạn xem tài nguyên là tài nguyên có mức độ ưu tiên cao và muốn trình duyệt ưu tiên tài nguyên đó, miễn là thông tin phỏng đoán của trình duyệt không ngăn điều đó xảy ra.low: Bạn coi tài nguyên là có mức độ ưu tiên thấp và 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: Đây là giá trị mặc định khi bạn không có lựa chọn ưu tiên nào và để trình duyệt quyết định 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 và 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>
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 hình sau để có thể tăng hoặc giảm mức độ ưu tiên đã tính toán của những tài nguyên này. fetchpriority="auto" (◉) trong mỗi hàng biểu thị 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 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 ý rằng fetchpriority đặt mức độ ưu tiên tương đối, tức là tăng hoặc giảm mức độ ưu tiên mặc định một mức thích hợp, thay vì đặt rõ ràng mức độ ưu tiên thành "Cao" hoặc "Thấp" và trình duyệt quyết định mức độ ưu tiên tương đối. Thường thì chỉ số này là "Cao" hoặc "Thấp", nhưng không phải lúc nào cũng vậy. Ví dụ: CSS quan trọng có fetchpriority="high" sẽ vẫn giữ mức độ ưu tiên "Rất cao"/"Cao nhất" và việc sử dụng fetchpriority="low" cho các thuộc tính này sẽ vẫn giữ mức độ ưu tiên "Cao". Trong cả hai trường hợp, Mức độ ưu tiên đều không được đặt rõ ràng thành "Cao" hoặc "Thấp".
Trường hợp sử dụng
Bạn có thể dùng thuộc tính fetchpriority để giải quyết các trường hợp mà bạn có thể muốn cung cấp thêm cho trình duyệ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">
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.
Giảm mức độ ưu tiên của hình ảnh trong màn hình đầu tiên
Bạn có thể sử dụng fetchpriority="low" để giảm mức độ ưu tiên của những hình ảnh trong màn hình đầu tiên có thể không quan trọng lúc đầu, ví dụ 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 đó 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. Việc này giúp giảm thời gian tải xuống 2 giây.
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 cạnh tranh với các tài nguyên quan trọng khác, bạn có thể gợi ý để giảm mức độ ưu tiên của chúng. Bạn có thể 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
Tập lệnh cần thiết để làm cho một số phần của trang có tính tương tác là cần thiết nhưng không nên chặn các tài nguyên khác. Bạn có thể đánh dấu các chế độ cài đặt này là không đồng bộ với mức độ ưu tiên cao.
<script src="async_but_important.js" async fetchpriority="high"></script>
Không thể đánh dấu tập lệnh là không đồng bộ nếu chúng dựa vào trạng thái DOM cụ thể. Tuy nhiên, nếu chúng ở vị trí thấp hơn trên trang, thì chúng có thể được tải xuống với mức độ ưu tiên thấp hơn như minh hoạ.
<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ể được 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 các 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
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ư đã thảo luận ở trên. Có một số điều bạn cần lưu ý:
- Thuộc tính
fetchprioritylà 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. Cũng có thể trình duyệt sẽ áp dụng các lựa chọn ưu tiên về mức độ ưu tiên tài nguyên khi cần thiết trong trường hợp có xung đột. Bạn không nên nhầm lẫn mức độ ưu tiên tìm nạp với tính năng tải trước. Hai yếu tố này đều khác biệt vì:
- Tải trước là tìm nạp bắt buộc và không phải là gợi ý.
- Tính năng tải trước cho phép trình duyệt sớm phát hiện tài nguyên nhưng sẽ 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 hỗ trợ 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.
- Việc quan sát và đo lường các tác động của một lượt tải trước sẽ dễ dàng hơ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ạphighcó thể không mang lại mức tăng đáng kể. Tuy nhiên, nếu nội dung tải trước nằm sau các tài nguyên khác thì Mức độ ưu tiên tìm nạphighcó thể cải thiện LCP. Nếu một hình ảnh quan trọng là hình nền CSS, bạn nên tải trước hình ảnh này bằngfetchpriority = "high".Những lợi ích đáng chú ý do tính năng ưu tiên sẽ phù hợp hơn trong môi trường có nhiều tài nguyên cạnh tranh hơn về 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 mà trong đó không thể tải xuống song song hoặc trong các kết nối HTTP/2 băng thông thấp. Việc ưu tiên có thể giải quyết nút thắt cổ chai trong những điều kiện này.
Các 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 được đề xuất bằng cách sử dụng Mức độ ưu tiên tìm nạp; CDN có thể không ưu tiên lại tài nguyên theo thứ tự bắt buộc. Đ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). Ngay cả khi chỉ ưu tiên trình duyệt nội bộ độc lập với CDN hoặc hỗ trợ nguồn gốc, bạn vẫn nên sử dụng, vì điều này thường sẽ thay đổi khi trình duyệt yêu cầu tài nguyên – ví dụ: tài nguyên có mức ưu tiên thấp như hình ảnh thường bị giữ lại để không yêu cầu trong khi trình duyệt xử lý các mục
<head>quan trọng.Trong thiết kế ban đầu, có thể bạn không nên coi Mức độ ưu tiên tìm nạp là một phương pháp hay nhất. Đây là một cách tối ưu hoá mà bạn có thể áp dụng sau trong chu trình phát triển. Bạn có thể kiểm tra mức độ ưu tiên đang được chỉ định cho các tài nguyên khác nhau trên trang và 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 của Tìm nạp để tối ưu hóa thêm.
Sử dụng tải trước sau Chrome 95
Tính năng Tìm nạp ưu tiên đã có sẵn để dùng thử trong Chrome 73 đến 76 nhưng chưa được phát hành do các vấn đề về mức độ ưu tiên với các nội dung tải trước đã được khắc phục trong Chrome 95. Trước Chrome 95, các yêu cầu được gửi qua <link rel=preload> luôn bắt đầu trước khi các yêu cầu khác mà trình quét tải trước nhìn thấy, ngay cả khi các yêu cầu khác có mức độ ưu tiên cao hơn.
Với bản sửa lỗi trong Chrome 95 và tính năng nâng cao cho Mức độ ưu tiên tìm nạp, chúng tôi hy vọng rằng các nhà phát triển sẽ bắt đầu sử dụng tính năng tải trước cho mục đích dự kiến của tính năng này – để 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ột số điểm chính về việc sử dụng tính năng tải trước là:
- Việc thêm nội dung tải trước trong tiêu đề HTTP sẽ khiến nội dung tải trước đó xuất hiện trước mọi nội dung khác.
- Nhìn chung, các lượt tải trước sẽ tải theo thứ tự mà trình phân tích cú pháp tải trước các nội dung đó đối với mọi mục có mức độ ưu tiên cao hơn mức "Trung bình". Vì vậy, 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ả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.
- Bạn cần thực hiện việc nhập các lượt tải trước (
import()hoặcmodulepreloadlinh động) sau khi thẻ tập lệnh cần nhập (để tập lệnh thực tế được tải/phân tích cú pháp trước). Về cơ bản, nếu thẻ tập lệnh tải một tập lệnh sẽ kích hoạt việc tải phần phụ thuộc, hãy đảm bảo<link rel=preload>cho các phần phụ thuộc đó nằm sau thẻ tập lệnh mẹ. Nếu không, các phần phụ thuộc có thể sẽ tải trước tập lệnh chính. Theo thứ tự thích hợp, tập lệnh chính có thể được phân tích cú pháp/đánh giá trong khi các phần phụ thuộc đang tải. - Các lượt tải trước hình ảnh có mức độ ưu tiên là "Thấp" hoặc "Trung bình" (không có mức độ ưu tiên Tìm nạp) và phải được sắp xếp theo thứ tự tương ứng với các tập lệnh không đồng bộ cũng như 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, chúng tôi bây giờ gọi API này là Mức độ ưu tiên tìm nạp.
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 để đạt được trình tự tải mong muốn.