本頁面由 Cloud Translation API 翻譯而成。

使用 Fetch Priority API 最佳化資源載入

Fetch Priority API 會指出資源對瀏覽器的相對優先順序。這有助於實現最佳載入情形，並改善 Core Web Vitals。

Addy Osmani

Leena Sohoni

Patrick Meenan

Barry Pollard

瀏覽器支援

資料來源

當瀏覽器剖析網頁，並開始探索並下載圖片、指令碼或 CSS 等資源時，便會指派擷取 priority，讓瀏覽器按照最佳順序下載這些內容。資源的優先順序通常取決於資源本身和文件中的位置。舉例來說，可視區域圖片的優先順序可能為 High，且在 <head> 中使用 <link> 會禁止轉譯的 CSS 的優先順序可能是 Very High。瀏覽器很適合用來指定適當的優先順序，但不一定在所有情況下都是最佳設定。

本頁面將說明 Fetch Priority API 和 fetchpriority HTML 屬性，可讓您提示資源 (high 或 low) 的相對優先順序。Fetch Priority 可協助您改善 Core Web Vitals。

摘要

「擷取優先順序」的主要用途如下：

指定圖片元素上的 fetchpriority="high"，藉此提高 LCP 圖片的優先順序，藉此加快 LCP 圖片的優先順序。
提高 async 指令碼的優先順序，使用比目前最常見的入侵行為更適用的語意 (為 async 指令碼插入 <link rel="preload">)。
降低晚期主體指令碼的優先順序，以便與圖片搭配使用更佳的排序。

比較 Google 航班/機票首頁的兩項測試結果的膠卷檢視畫面。在底部，我們使用「擷取優先順序」提升主圖片的優先順序，因此 LCP 減少了 0.7 秒。 — 在 Google 航班/機票的測試中，Fetch Priority 可將 Largest Contentful Paint 從 2.6 秒縮短至 1.9 秒。

過去開發人員使用預先載入和預先連線功能，對資源優先順序的影響有限。您可以透過預先載入功能，在瀏覽器自然偵測到重要資源之前，先告知瀏覽器要載入的資源。這項功能特別適合用來探索較難發現的資源，例如樣式表中包含的字型、背景圖片，或是從指令碼載入的資源。預先連線有助於為跨來源伺服器暖機，並有助於改善第一個位元組時間等指標。這項功能在您知道來源，但不一定知道所需資源的確切網址時很實用。

擷取優先順序可補足這些資源提示。這是透過 fetchpriority 屬性提供的標記式信號，開發人員可用來指出特定資源的相對優先順序。你也可以透過 JavaScript 和 Fetch API 使用這些提示，並搭配使用 priority 屬性，藉此控制針對資料擷取資源的優先順序。擷取優先順序也可以補充預先載入作業。以最大內容繪製圖片為例，在預先載入時，仍會獲得較低的優先順序。如果遭到其他低優先順序的資源推送，使用「擷取優先順序」有助於加快圖片載入的速度。

資源優先順序

資源下載順序取決於瀏覽器針對頁面上每個資源指派的優先順序。可能影響優先順序運算邏輯的因素包括：

資源類型 (例如 CSS、字型、指令碼、圖片和第三方資源)。
文件參照資源的位置或順序。
指令碼是否使用 async 或 defer 屬性。

下表顯示 Chrome 如何排定大多數資源的優先順序及排序：

	在版面配置封鎖階段中載入		在版面配置封鎖階段一次載入一次
Blink Priority	VeryHigh	高	中	低	VeryLow
開發人員工具優先順序	最高	高	中	低	最低價
	主要資源
	CSS (早期**)		CSS (延遲**)		CSS (媒體不相符***)
		指令碼 (提前** 或不從預先載入掃描器執行)	腳本 (延遲**)	指令碼 (非同步)
	字型	字型 (rel=preload)
		匯入
		圖片 (位於可視區域內)	圖片 (前 5 張圖片 > 10,000px2)	圖片
				媒體 (影片/音訊)
					預先擷取
		XSL
	XHR (同步)	XHR/fetch* (非同步)

附註：
* 使用 "as" 或 fetch 進行預先載入，並搭配特定 "destination"，會使用所要求目的地的優先順序。舉例來說，預先載入 as="style" 會使用最高優先順序。在沒有明確目的地的情況下，擷取會像非同步 XHR 一樣優先。
**「早」是指在要求任何未預先載入的圖片之前要求，而「晚」則是指在要求任何未預先載入的圖片之後要求。
*** 如果 CSS 類型不相符，該 CSS 就不會由預先載入掃描器擷取，而且只會在主要剖析器到達該網路時處理，而這通常表示擷取時間非常晚。

根據預設，圖片的優先順序為「低」。在版面配置期間，可視區域中的圖片會提升至「高」。從 Chrome 117 開始，前 5 張大型圖片將設定為「中」以加快速度，而在初次「短模式」期間，系統可以同時擷取其中 2 張大型圖片。使用 fetchpriority="high" 在標記中標記重要圖片後，圖片就能立即從「高」開始，加快載入速度。

瀏覽器會依據發現的順序，下載具有相同計算優先順序的資源。您可以在 Chrome 開發人員工具的「網路」分頁中載入網頁時，查看指派給不同資源的優先順序。(請務必以滑鼠右鍵按一下表格標題並勾選該欄，以便納入優先順序欄)。

Chrome 開發人員工具的「Network」分頁，當中列出多種字型資源。這些項目的優先順序都是最高的。 — BBC 新聞詳細資料頁面上資源 `type = "font"` 的優先順序

Chrome 開發人員工具的「網路」分頁列出多個字型資源。包括「低」和「高」優先順序。 — 資源 `type = "script"` 優先順序。

優先順序改變時，您可以在「大型要求列」設定或工具提示中查看初始和最終的優先順序。

Chrome 開發人員工具的「Network」分頁。勾選「大要求資料列」設定，且「優先順序」欄顯示第一張優先順序為「高」的圖片，以及下方不同的初始優先順序「中」。工具提示也會顯示相同的內容。 — 開發人員工具中的優先順序變更。

何時需要使用「擷取優先順序」？

現在您已瞭解瀏覽器的優先順序邏輯，接下來就可以調整網頁的下載順序，藉此提升網頁效能和網站體驗核心指標。以下列舉幾個可以調整的項目，藉此影響資源下載的優先順序：

請按照您希望瀏覽器下載資源的順序放置 <script> 和 <link> 等資源標記。一般來說，優先順序相同的資源會依照找到的順序載入。
使用 preload 資源提示，提早下載必要資源，特別是瀏覽器不易在早期發現的資源。
使用 async 或 defer 下載指令碼，且不會封鎖其他資源。
延後載入下方內容，讓瀏覽器可將可用頻寬用於更重要的上方資源。

這些技術有助於提升瀏覽器的效能和網站體驗核心指標，有助於控制瀏覽器的優先順序。舉例來說，在預先載入重要背景圖片時，可以更快找出圖片，改善最大內容繪製 (LCP) 的成效。

有時這些句柄可能不足以為應用程式提供最佳資源優先順序。以下是幾種可使用擷取優先順序的情況：

您有多個不需捲動位置的圖片，但並非所有圖片的優先順序必須相同。舉例來說，在圖片輪轉介面中，只有第一則顯示圖片需要較高的優先順序，其他圖片的初始優先順序通常可設為較低優先順序。
檢視區內的圖片通常會以 Low 優先順序開始。版面配置完成後，Chrome 會偵測到他們位於可視區域，並提高版面配置的優先順序。這通常會大幅延遲載入重要圖片 (例如主頁橫幅圖片)。在標記中提供擷取優先順序，可讓圖片從 High 的優先順序開始，及早開始載入。為了嘗試自動處理上述行為，Chrome 將前 5 張較大的圖片設為 Medium 的優先順序，但明確來說 fetchpriority="high" 會是更好的選擇。

如果要及早偵測以 CSS 背景格式納入的 LCP 圖片，仍須使用預先載入功能。如要提高背景圖片的優先順序，請在預載時加入 fetchpriority='high'。
將指令碼宣告為 async 或 defer，會指示瀏覽器以非同步方式載入指令碼。不過，如優先順序表格所示，這些指令碼的優先順序也會設為「低」。您可能會想要提高檔案的優先順序，同時確保非同步下載，特別是對使用者體驗至關重要的指令碼。
如果您使用 JavaScript fetch() API 以非同步方式擷取資源或資料，瀏覽器會將 High 優先順序指派給該 API。您可能會希望部分擷取作業以較低優先順序執行，尤其是混合背景 API 呼叫與會回應使用者輸入內容的 API 呼叫時。將背景 API 呼叫標示為 Low 優先順序，將互動式 API 呼叫標示為 High 優先順序。
瀏覽器會將 CSS 和字型指派為 High 的優先順序，但這些資源部分資源的重要性可能高於其他。您可以使用 Fetch Priority 降低非必要資源的優先順序 (請注意，早期 CSS 會阻斷轉譯，因此通常應為 High 優先順序)。

`fetchpriority` 屬性

使用 link、img 或 script 標記下載時，請使用 fetchpriority HTML 屬性指定資源類型 (例如 CSS、字型、指令碼和圖片) 的下載優先順序。可能採用的值如下：

high：資源的優先順序較高，而且只要瀏覽器的經驗法則不會妨礙發生，您希望瀏覽器優先處理資源的優先順序。
low：資源的優先順序較低，您希望瀏覽器將其降級，但這必須符合其經驗法則。
auto：預設值，可讓瀏覽器選擇適當的優先順序。

以下列舉幾個在標記中使用 fetchpriority 屬性，以及與指令碼對等的 priority 屬性的範例。

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/https/web.developers.google.cn/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="/https/web.developers.google.cn/js/script.js" as="script" fetchpriority="low">

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

瀏覽器優先順序和 `fetchpriority` 的影響

您可以將 fetchpriority 屬性套用至不同資源，如下表所示，提高或降低運算的優先順序。每列的 fetchpriority="auto" (↘) 會標示該資源類型的預設優先順序。(也可儲存為 Google 文件)。

	在版面配置阻斷階段載入		在版面配置封鎖階段，一次載入一個項目
Blink Priority	VeryHigh	高	中	低	VeryLow
開發人員工具優先順序	最高	高	中	低	最低價
主要資源	◉
CSS (早期**)	⬆◉	⬇
CSS (延遲**)		⬆	◉	⬇
CSS (媒體不相符***)		⬆***			◉⬇
指令碼 (提前** 或非來自預先載入掃描器)		⬆◉		⬇
腳本 (晚到**)		⬆	◉	⬇
指令碼 (非同步/延遲)		⬆		◉⬇
字型	◉
字型 (rel=preload)		⬆◉		⬇
匯入		◉
圖片 (位於可視區域中 - 版面配置後)		⬆◉		⬇
圖片 (前 5 張圖片 > 10,000px2)		⬆	◉	⬇
圖片		⬆		◉⬇
媒體 (影片/音訊)				◉
XHR (同步) - 已淘汰	◉
XHR/fetch* (非同步)		⬆◉		⬇
預先擷取					◉
XSL		◉

附註：
* 使用 "as" 或使用特定 "destination" 的 fetch 進行預先載入，會使用要求的目的地優先順序。舉例來說，預先載入 as="style" 會使用最高優先順序。在沒有明確模擬的情況下，擷取會視為非同步 XHR 的優先順序。
**「早」是指在要求任何未預先載入的圖片之前提出要求 (「晚」是指在後面)。
*** 預先載入掃描器不會擷取媒體類型不相符的 CSS，而是在主剖析器處理時才會處理，這通常表示即使使用 fetchpriority="high"，也要等到很晚才會擷取。

圖片的優先順序預設為「低」，如果位於可視區域內，則會在版面配置期間提升為「高」。從 Chrome 117 開始，前 5 張大型圖片將設定為「中」以加快速度，而在初始「短模式」期間，系統會同時擷取其中兩張圖片。使用 fetchpriority="high" 在標記中標記重要圖片後，圖片就能立即從「高」開始，加快載入速度。

fetchpriority 會設定「相對優先順序」，也就是將預設優先順序提高或降低適當的數量，而不是明確將優先順序設為 High 或 Low。這通常會導致優先順序為 High 或 Low，但並非一律如此。舉例來說，含有 fetchpriority="high" 的重要 CSS 保留了「非常高」/「最高」的優先順序，在這些元素上使用 fetchpriority="low" 會保留「高」的優先順序。這兩種情況都不會明確將優先順序設為 High 或 Low。

用途

如要向瀏覽器提供額外的提示，指出擷取資源的優先順序，請使用 fetchpriority 屬性。

提高 LCP 映像檔的優先順序

您可以指定 fetchpriority="high"，提升 LCP 或其他重要圖片的優先順序。

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

下圖比較了 Google 航班/機票頁面，其中一個有載入 LCP 背景圖片，另一個則沒有，以顯示兩者的差異。將優先順序設為高時，LCP 已從 2.6 提升至 1.9 秒。

針對 Cloudflare 工作站進行的實驗，利用「擷取優先順序」功能重新編寫 Google 航班/機票頁面。

降低不需捲動位置圖片的優先順序

使用 fetchpriority="low" 降低畫面上方非立即重要圖片的優先順序，例如圖片輪轉介面中的畫面外圖片。

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

雖然圖片 2 至 4 會位於檢視區之外，但系統可能會將這些圖片視為「足夠接近」檢視區，因此會將圖片提升至 high，即使新增 load=lazy 屬性也一樣。因此，fetchpriority="low" 是這個問題的正確解決方案。

在先前針對 Oodle 應用程式進行的實驗中，我們使用這項功能降低載入時不會顯示的圖片優先順序。這麼做可將網頁載入時間縮短 2 秒。

在 Oodle 應用程式的圖片輪轉介面中使用擷取優先順序時，擷取優先順序的並排比較。在左側，瀏覽器為輪轉介面圖片設定預設優先順序，但下載和繪製這些圖片的速度比右側範例慢約兩秒，因為右側範例只為第一個輪轉介面圖片設定較高的優先順序。 — 只為第一張輪轉介面圖片使用高優先順序，可加快網頁載入速度。

降低預先載入資源的優先順序

如要停止預先載入的資源與其他重要資源競爭，您可以降低其優先順序。請在圖片、指令碼和 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'">

重新設定指令碼優先順序

網頁需要的互動指令碼應快速載入，但不應阻擋其他更重要的轉譯阻斷資源。您可以將這些項目標示為優先順序為 async。

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

如果指令碼需要使用特定的 DOM 狀態，就無法將指令碼標示為 async。不過，如果網頁稍後會在網頁上執行，您可用較低的優先順序載入這些素材資源：

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

這樣做仍會封鎖剖析器抵達這個指令碼後的內容，但會在優先處理此事前的內容。

如果需要完整的 DOM，您可以改用 defer 屬性 (會依序在 DOMContentLoaded 後執行)，甚至是頁面底部的 async。

降低非必要資料擷取作業的優先順序

瀏覽器會以高優先順序執行 fetch。如果您有多個擷取作業可能會同時觸發，可以將較重要的資料擷取作業設為高預設優先順序，並降低較不重要的資料優先順序。

// 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'});

擷取優先順序實作注意事項

擷取優先順序可針對特定用途提高效能，不過使用「擷取優先順序」時，請注意下列事項：

fetchpriority 屬性是提示，而非指令。瀏覽器會嘗試尊重開發人員的偏好設定，但也能對資源優先順序套用資源優先順序偏好設定，藉此解決衝突問題。
請不要將「擷取優先順序」與預先載入設定混淆：
- 預先載入是強制擷取，而非提示。
- 預先載入可讓瀏覽器提早發現資源，但仍會以預設優先順序擷取資源。相反地，「擷取優先順序」並不能提高曝光度，但可讓您提高或降低擷取優先順序。
- 相較於優先順序變更的效果，您可更容易觀察及測量預先載入的效果。
透過提高優先順序的精細程度，擷取優先順序可補足預先載入功能。如果您已將預先載入作業指定為 LCP 圖片 <head> 中的第一個項目，則 high 擷取優先順序可能不會大幅改善 LCP。不過，如果預先載入是在其他資源載入後發生，high 擷取優先順序可進一步改善 LCP。如果重要圖片是 CSS 背景圖片，請使用 fetchpriority = "high" 預先載入。
在更多資源爭用可用網路頻寬的環境中，優先順序最佳化的載入時間會更加相關。在無法並行下載的 HTTP/1.x 連線，或低頻寬的 HTTP/2 或 HTTP/3 連線上，這類情況很常見。在這種情況下，排定優先順序有助於解決瓶頸。
CDN 不會統一實作 HTTP/2 優先順序，也不會對 HTTP/3 採取類似做法。即使瀏覽器向「擷取優先順序」傳遞優先順序，CDN 可能不會按照指定的順序重新排定資源的優先順序。這會導致測試擷取優先順序的難度提高。優先順序會在瀏覽器內部和支援優先順序的通訊協定 (HTTP/2 和 HTTP/3) 中套用。不過，如果您只想為內部瀏覽器優先順序 (不論是否支援 CDN 或來源) 使用 Fetch Priority，還是值得這麼做，因為瀏覽器要求資源時，優先順序經常會變更。舉例來說，當瀏覽器處理重要的 <head> 項目時，圖片等低優先順序資源通常會暫緩要求。
您可能無法在初始設計中將「擷取優先順序」導入最佳做法。在開發週期後期，您可以將優先順序指派給網頁上的不同資源，如果這些資源不符合您的預期，您可以導入擷取優先順序來進一步進行最佳化。

開發人員應將預先載入功能用於預期用途，也就是預先載入剖析器未偵測到的資源 (字型、匯入項目、背景 LCP 圖片)。preload 提示的位置會影響資源的預先載入時間。

擷取優先順序是指擷取資源時的擷取方式。

使用預先載入功能的提示

使用預先載入功能時，請注意下列事項：

在 HTTP 標頭中加入預先載入內容，會將該內容置於載入順序中的所有其他項目之前。
一般來說，系統會按照剖析器 (優先順序為 Medium 以上) 的任何項目預先載入，並依序載入。如要在 HTML 開頭加入預先載入項目，請格外小心。
預先載入字型可能最適合用於開頭或內文開頭。
匯入預先載入項目 (動態 import() 或 modulepreload) 應在需要匯入的指令碼標記之後執行，因此請務必先載入或剖析指令碼，以便在依附元件載入時進行評估。
圖片預先載入的預設優先順序為 Low 或 Medium。並將其排在非同步指令碼和其他低或最低優先順序的代碼之後。

記錄

在 2018 年，Chrome 首次以來源試用計畫的形式實驗擷取優先順序，並在 2021 年再次使用 importance 屬性進行實驗。當時稱為「優先提示」。在網路標準處理程序中，HTML 介面現已變更為 fetchpriority，JavaScript 的 Fetch API 適用的介面現已變更為 priority。為避免混淆，我們現在將這個 API 稱為 Fetch Priority。

結論

開發人員可能會對 Fetch Priority 感興趣，因為這項功能修正了預先載入行為，且最近也著重於網站體驗核心指標和 LCP。現在，他們可以使用額外旋鈕來達成偏好的載入序列。