當瀏覽器剖析網頁,並開始搜尋並下載資源 (例如圖片、指令碼或 CSS) 時,就會指派擷取 priority
,讓瀏覽器能以最佳順序下載這些內容。資源的優先順序通常取決於資源在文件內的位置舉例來說,可視區域圖片的優先順序可能是 High
,而提早載入的 CSS 的優先順序在 <head>
中使用 <link>
可能是 Very High
。自動優先順序指派作業通常運作正常,但在某些情況下,指派順序並不夠理想。
本頁說明 Fetch Priority API 和 fetchpriority
HTML 屬性,這個屬性可讓您提示資源的相對優先順序,進而改善 Core Web Vitals 指標 (high
或 low
)。
摘要
「擷取優先順序」功能可在以下幾個重要層面派上用場:
- 指定圖片元素上的
fetchpriority="high"
來提高 LCP 圖片的優先順序,以加快 LCP 的執行速度。 - 提高
async
指令碼的優先順序,使用比目前最常見的駭客更有效的語意 (為async
指令碼插入<link rel="preload">
)。 - 將延遲指令碼的優先順序降低至圖片序列。
以往,開發人員在使用預先載入和預先連線,對資源優先順序的影響有限。預先載入功能可讓您在瀏覽器自然發現重要資源之前,告訴瀏覽器您要載入的重要資源。對於較難搜尋的資源 (例如樣式表內的字型、背景圖片或從指令碼載入的資源) 而言,這項功能特別實用。預先連線有助於暖機與跨來源伺服器的連線,有助於改善時間到第一個位元組等指標。當您知道來源,但不一定是所需資源的確切網址時,這個方法就很實用。
擷取優先順序可以彌補這些資源提示的不足。這是透過 fetchpriority
屬性提供的標記式信號,可讓開發人員用來指出特定資源的相對優先順序。您也可以透過 JavaScript 和具有 priority
屬性的 Fetch API 使用這些提示,藉此決定資料擷取資源的優先順序。擷取優先順序也可以搭配預先載入。使用「最大內容繪製」圖片,圖片在預先載入時仍會視為低優先順序。如果其他早期低優先順序資源被推送回,使用「擷取優先順序」可能有助於加快圖片載入的速度。
資源優先順序
資源下載序列取決於瀏覽器針對網頁各項資源指定的優先順序。可能影響優先順序計算邏輯的因素包括:
- 資源類型,例如 CSS、字型、指令碼、圖片和第三方資源。
- 文件參照資源的位置或順序。
preload
資源提示,可協助瀏覽器更快找到資源並提早載入。async
或defer
指令碼的優先順序計算變更。
下表顯示 Chrome 如何決定大多數資源的優先順序,並排列出順序:
載入版面配置封鎖階段 | 在版面配置封鎖階段中一次載入一次性載入 | ||||
---|---|---|---|---|---|
Blink 優先順序 |
VeryHigh | 高 | 中等 | 低 | VeryLow |
開發人員工具 優先順序 |
最高 | 高 | 中等 | 低 | 最低 |
主要資源 | |||||
CSS (提早**) | CSS (延遲**) | CSS (媒體不相符***) | |||
指令碼 (提前** 或不從預先載入掃描器取得) | 指令碼 (後期**) | 指令碼 (非同步) | |||
Font | 字型 (rel=preload) | ||||
匯入 | |||||
圖片 (在可視區域中) | 圖片 (前 5 張圖片 > 10,000px2) | 圖片 | |||
媒體 (影片/音訊) | |||||
預先擷取 | |||||
XSL | |||||
XHR (同步) | XHR/擷取* (非同步) |
瀏覽器會按照搜尋到的順序下載優先順序相同的資源。在 Chrome 開發人員工具的「Network」分頁中載入頁面時,您可以查看指派給不同資源的優先順序。(請務必在表格標題上按一下滑鼠右鍵,以加入「Priority」欄)。
當優先順序改變時,您可以在「Big request rows」設定或工具提示中查看初始和最終優先順序。
何時需要使用擷取優先順序?
現在,您已瞭解瀏覽器的優先順序邏輯,現在可以調整網頁的下載順序,使其發揮最佳效能和網站體驗核心指標。以下列舉幾個可在不使用擷取優先順序的情況下變更的項目:
- 依照您希望瀏覽器下載的順序,放置
<script>
和<link>
等資源標記。 - 使用
preload
資源提示提早下載必要資源,特別是瀏覽器較不易發現的資源。 - 使用
async
或defer
下載指令碼,而不會封鎖其他資源。 - 延遲載入需捲動位置的內容,讓瀏覽器能夠使用可用的頻寬來處理更重要的前幾行資源。
以下為較複雜的情況,使用擷取優先順序可協助您取得需要的資源優先順序:
- 您有多張不需捲動位置的圖片,但有些圖片的優先順序不應相同。舉例來說,在圖片輪轉介面中,只有第一則顯示的圖片需要較高的優先順序。
- 可視區域中的主頁橫幅通常從
Low
或Medium
的優先順序開始。版面配置完成後,Chrome 就會發現其位於可視區域,並提高優先順序。這通常會增加載入圖片的時間。在標記中提供擷取優先順序,可讓圖片從「高」優先順序開始,並提早開始載入。
如要提前探索可做為 CSS 背景的 LCP 圖片,還是需要預先載入。如要提高背景圖片的優先順序,請在預先載入項目中加入fetchpriority='high'
。 - 宣告指令碼為
async
或defer
會指示瀏覽器以非同步方式載入指令碼。不過,如優先度表所示,這些指令碼的優先順序也會設為「低」。您可能需要提高委刊項優先順序,同時確保非同步下載,特別是對使用者體驗至關重要的指令碼。 - 如果您使用 JavaScript
fetch()
API 以非同步方式擷取資源或資料,瀏覽器會指派High
的優先順序。您可能會希望部分擷取作業以較低的優先順序執行,特別是在將背景 API 呼叫與回應使用者輸入內容的 API 呼叫混用時。將背景 API 呼叫標示為Low
優先順序,並將互動式 API 呼叫標示為High
優先順序。 - 瀏覽器會為
High" priority
指派 CSS 和字型,但有些資源的重要性可能高於其他資源。您可以使用「擷取優先順序」來降低非關鍵資源的優先順序。
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="/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"
(即時通訊) 會標示該資源類型的預設優先順序。
載入版面配置封鎖階段 | 在版面配置區塊階段中一次載入一個 | ||||
---|---|---|---|---|---|
Blink 優先順序 |
VeryHigh | 高 | 中等 | 低 | VeryLow |
開發人員工具 優先順序 |
最高 | 高 | 中等 | 低 | 最低 |
主要資源 | ◉ | ||||
CSS (提早**) | ⬆◉ | ⬇ | |||
CSS (延遲**) | ⬆ | ◉ | ⬇ | ||
CSS (媒體不相符***) | ⬆*** | ◉⬇ | |||
指令碼 (提前** 或不從預先載入掃描器取得) | ⬆◉ | ⬇ | |||
指令碼 (後期**) | ⬆ | ◉ | ⬇ | ||
指令碼 (非同步/延遲) | ⬆ | ◉⬇ | |||
Font | ◉ | ||||
字型 (rel=preload) | ⬆◉ | ⬇ | |||
匯入 | ◉ | ||||
圖片 (在可視區域中 - 在版面配置之後) | ⬆◉ | ⬇ | |||
圖片 (前 5 張圖片 > 10,000px2) | ⬆ | ◉ | ⬇ | ||
圖片 | ⬆ | ◉⬇ | |||
媒體 (影片/音訊) | ◉ | ||||
XHR (同步) - 已淘汰 | ◉ | ||||
XHR/擷取* (非同步) | ⬆◉ | ⬇ | |||
預先擷取 | ◉ | ||||
XSL | ◉ |
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 秒。
降低不需捲動位置圖片的優先順序
使用 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>
根據先前的 Oodle 應用程式實驗,我們使用這個選項降低載入時未顯示的圖片優先順序。把頁面載入時間縮短 2 秒。
降低預先載入資源的優先順序
如要阻止預先載入的資源與其他關鍵資源競爭,您可以降低資源的優先順序。請針對圖片、指令碼和 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'">
變更指令碼優先順序
網頁需要互動式指令碼才能快速載入,但不應封鎖其他資源。您可以將其標示為高優先順序的 async
。
<script src="async_but_important.js" async fetchpriority="high"></script>
如果指令碼必須使用特定 DOM 狀態,您就無法將指令碼標示為 async
。但是,如果之後在頁面上執行,您就可以以較低優先順序載入這些內容:
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
降低非關鍵資料擷取的優先順序
瀏覽器執行以高優先順序執行的 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/2 連線的情況下,HTTP/1.x 連線很常見。在這種情況下,優先順序有助於解決瓶頸。
CDN 不會統一實作 HTTP/2 優先順序。即使瀏覽器會透過擷取優先順序傳送優先順序,CDN 可能不會按照指定的順序重新安排資源優先順序。導致測試擷取優先順序變得困難。優先順序會同時套用到瀏覽器內部,以及支援優先順序的通訊協定 (HTTP/2 和 HTTP/3)。即使內部瀏覽器的優先順序不受 CDN 或來源支援,仍然值得使用擷取優先順序,因為在瀏覽器要求資源時,優先順序往往會改變。舉例來說,在瀏覽器處理重要的
<head>
項目時,低優先順序資源 (例如圖片) 通常不會遭到要求。在初次設計時,您可能無法介紹「擷取優先順序」做為最佳做法。在開發週期的後續階段,您可以將優先順序指派給頁面上的不同資源,如果優先順序不符合您的預期,則可推出「擷取優先順序」功能,以便進一步最佳化。
使用預先載入的提示
使用預先載入功能時,請注意下列事項:
- 如果在 HTTP 標頭中加入預先載入,其順序會優先於其他內容之前。
- 一般而言,如果剖析器接收到的優先順序高於「中」的優先順序,系統就會按照剖析器接收到的順序預先載入。如要在 HTML 的開頭加入預先載入內容,請務必小心謹慎。
- 字型預先載入效果可能適合在內文的開頭或開頭。
- 匯入預先載入 (動態
import()
或modulepreload
) 應在需要匯入的指令碼標記之後執行,因此請務必先載入或剖析指令碼,以便在載入依附元件時進行評估。 - 根據預設,圖片預先載入的優先順序為「低」或「中」。請依據非同步指令碼和其他低優先順序標記 (或最低優先順序) 的標記將這兩個標記排序。
記錄
「擷取優先順序」是在 2018 年首次在 Chrome 中實驗為來源試用,並在 2021 年再次使用 importance
屬性。當時稱為優先提示。根據網路標準流程,HTML 的介面已變更為 fetchpriority
和 JavaScript 的 priority
擷取 API。為避免混淆,我們現在稱之為 API 擷取優先順序