使用 <link rel="preload"> 預先載入資源，向瀏覽器表示很快就會需要資源。不過，預先載入會沿用資源類型的預設優先順序，尤其是圖片，優先順序較低。使用 fetchpriority 可調整這項相對優先順序，特別是確保圖片預先載入作業以高優先順序預先載入，以便提早開始並使用更多頻寬資源。
導入方式
- 找出預先載入候選項目：找出瀏覽器未提早發現，但對網頁外觀至關重要的資源 (例如影片海報圖片或 CSS 中的背景圖片)。
- 提高重要圖片預先載入的優先順序：對於 LCP 圖片或其他預設未優先處理的重要圖片，請使用
<link rel="preload" fetchpriority="high">，確保這些圖片的優先順序高於其他預先載入的圖片。請注意，字型預設為高優先順序。 - 降低非關鍵預先載入資源的優先順序：對於初始算繪不重要的資源 (例如背景影片或次要字型)，請使用
<link rel="preload" fetchpriority="low">。 - 與資源類型協調：請注意，不同的
as類型有不同的預設優先順序；必要時，請使用fetchpriority覆寫這些預設值。
範例程式碼
<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">
<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">
<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>
最佳做法
- 必要：最多只能在 1 到 2 個重要圖片預先載入作業中使用
fetchpriority="high"，以免發生網路爭用情形，並稀釋優先順序提升效果。 - 必要：在 Largest Contentful Paint (LCP) 圖片上使用
fetchpriority="high"。 - 建議做法：將網頁預先載入的總數限制在最多 2 張圖片和 2 到 3 種必要字型，以免頻寬爭用。
- 建議使用
fetchpriority="low"預先載入您希望瀏覽器提早啟動，但不會影響重要資源 (尤其是非重要字型) 的資源。 - 務必正確指定
as屬性，確保系統會使用預先載入功能。 - 建議透過
<img>標記，在 HTML 中以靜態方式顯示重要資源 (例如 LCP 圖片)，而非依賴背景圖片的預先載入。 - 務必確保字型預先載入一律具有
crossorigin屬性 (即使是同源)。 - 請勿使用已淘汰的
importance屬性。已由fetchpriority取代。
備用策略
<link rel="preload"> 上的 fetchpriority 屬性是漸進增強。不支援的瀏覽器仍會使用該資源類型的預設優先順序預先載入資源。為確保相容性，請務必提供正確的 as 和 type 屬性。