最佳化圖片優先順序

網頁功能：擷取優先順序延遲載入圖片和 iframe

瀏覽器會使用經驗法則指派圖片的載入優先順序，但這些預設值不一定符合網頁的 Largest Contentful Paint (LCP)。

在 <img> 元素上使用 fetchpriority，可明確向瀏覽器表明圖片的重要性，確保重要圖片載入速度更快，非必要圖片則不會爭用頻寬。

loading=lazy 屬性可防止系統下載距離螢幕太遠的圖片，進一步優先處理圖片。

導入方式

找出 LCP 圖片：判斷哪張圖片最可能是 Largest Contentful Paint (通常是網頁頂端的主頁橫幅)。
提高 LCP 優先順序：在 LCP 候選元素的 <img> 元素中加入 fetchpriority="high"。
降低非關鍵圖片的優先順序：如果圖片屬於次要 UI，或只有在使用者互動後才會顯示 (例如大型選單、互動視窗或畫面外的輪轉介面投影片)，請新增 fetchpriority="low"。
最佳化延遲載入：請勿在 LCP 圖片上使用 loading="lazy"。對於標準不需捲動位置圖片，loading="lazy" 足以延遲要求，直到使用者捲動至圖片附近。請避免在這些圖片中加入 fetchpriority="low"，因為您希望在使用者捲動到這些圖片時，以正常優先順序載入。請將 fetchpriority="low" 保留給技術上「不需捲動位置」但一開始不會顯示的圖片 (例如隱藏的輪轉介面投影片或大型選單)。對於這些隱藏圖片，也可以使用 loading="lazy"；瀏覽器會處理要求時間，同時優先處理低優先順序。
優先使用預設優先順序：如果圖片應採用一般載入優先順序，請完全省略 fetchpriority 屬性，而非設為 auto。這是一種樣式慣例，可讓 HTML 保持簡潔，同時仰賴瀏覽器的原生經驗法則。

範例程式碼

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

最佳做法

必要：一律將 fetchpriority="high" 套用至 LCP 圖片。
強制：最多只能在 1 到 2 張重要圖片上使用 fetchpriority="high"，以免發生網路爭用情形，並降低優先順序提升效果。
強制：如果圖片在技術上屬於「不需捲動位置」，但一開始處於隱藏狀態 (例如隱藏的輪轉介面投影片、大型選單圖片)，請使用 fetchpriority="low"。
強制：請勿在已使用 loading="lazy" 的標準不需捲動位置圖片上使用 fetchpriority="low"。這些圖片進入可視區域後，應以正常優先順序載入。
建議：避免使用 fetchpriority="auto"。如要使用預設優先順序，請完全省略該屬性，讓 HTML 保持簡潔。
請勿合併 fetchpriority="high" 與 loading="lazy"。
請勿使用已淘汰的 importance 屬性。這個元素已由 fetchpriority 取代，且任何瀏覽器都不支援。
請勿使用已淘汰的 loading="auto" 值。Chrome 最初支援這項功能，但現已移除，且任何瀏覽器都不支援。

備用策略

fetchpriority 屬性是 <img> 元素的漸進增強功能。如果瀏覽器不支援，就會忽略該屬性，並使用預設的優先順序推測機制。