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

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

Addy Osmani
Addy Osmani
Leena Sohoni
Leena Sohoni
Patrick Meenan
Patrick Meenan

瀏覽器支援

  • Chrome:102。
  • Edge:102。
  • Firefox:132。
  • Safari:17.2。

資料來源

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

本頁面將說明 Fetch Priority API 和 fetchpriority HTML 屬性,可讓您提示資源 (highlow) 的相對優先順序。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、字型、指令碼、圖片和第三方資源)。
  • 文件參照資源的位置或順序。
  • 指令碼是否使用 asyncdefer 屬性。

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

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

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

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

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

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

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

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

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

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

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

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

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

fetchpriority 屬性

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

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

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

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

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

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

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

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

用途

如要向瀏覽器提供額外的提示,指出擷取資源的優先順序,請使用 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) 應在需要匯入的指令碼標記之後執行,因此請務必先載入或剖析指令碼,以便在依附元件載入時進行評估。
  • 圖片預先載入的預設優先順序為 LowMedium。並將其排在非同步指令碼和其他低或最低優先順序的代碼之後。

記錄

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

結論

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