當瀏覽器剖析網頁，並開始搜尋並下載資源 (例如圖片、指令碼或 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」欄)。
type = "font" 的優先順序
當優先順序改變時，您可以在「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 擷取優先順序