網頁瀏覽器層級的延遲載入圖片

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

您可以使用 loading 屬性延後載入圖片，而無須編寫自訂延後載入程式碼或使用個別的 JavaScript 程式庫。以下是這項功能的示範：

本頁面將詳細說明如何在瀏覽器中實作延遲載入功能。

為何要使用瀏覽器層級的延遲載入？

根據 HTTP 封存資料，圖片是大多數網站要求最多的素材資源類型，且通常會比其他資源占用更多頻寬。在第 90 百分位數中，網站會在電腦和行動裝置上傳送超過 5 MB 的圖片。

先前有兩種方式可延遲載入畫面外圖片：

• 使用 Intersection Observer API
• 使用 scroll、resize 或 orientationchange 事件處理常式

這兩種做法都能讓開發人員加入延遲載入行為，許多開發人員都已建構第三方程式庫，提供更易於使用的抽象項目。

不過，由於瀏覽器可直接支援延後載入，因此不需要外部程式庫。瀏覽器層級的延遲載入功能還可確保即使用戶端停用 JavaScript，圖片仍能正常載入。不過請注意，只有在啟用 JavaScript 時，載入作業才會延遲。

loading 屬性

Chrome 會根據圖片相對於裝置檢視區的位置，以不同優先順序載入圖片。可視區域下方的圖片會以較低的優先順序載入，但仍會在網頁載入時擷取。

您可以使用 loading 屬性，完全延遲載入螢幕外圖片：

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

以下是 loading 屬性支援的值：

• lazy：延遲載入資源，直到資源距離可視區域的計算距離為止。
• eager：瀏覽器的預設載入行為，與不納入屬性相同，表示無論圖片位於網頁上的哪個位置，都會載入圖片。這是預設值，但如果工具在沒有明確值時自動新增 loading="lazy"，或是如果 Linter 在未明確設定時發生錯誤，明確設定這個值可能會很有幫助。

loading 屬性與擷取優先順序的關係

eager 值是指示以一般方式載入圖片的指令，如果圖片不在螢幕上，則不會進一步延遲載入作業。與沒有 loading 屬性的圖片相比，這類圖片的載入速度並沒有比較快。

如果您想提高重要圖片 (例如 LCP 圖片) 的擷取優先順序，請搭配使用 fetchpriority="high" 和 擷取優先順序。

含有 loading="lazy" 和 fetchpriority="high" 的圖片在離開螢幕時仍會延遲，然後在幾乎位於檢視區內時以高優先順序擷取。這種組合其實並非必要，因為瀏覽器很可能會以高優先順序載入該圖片。

可視區域距離門檻

所有不需捲動即可立即顯示的圖片，且載入速度正常。只有在使用者捲動到附近時，系統才會擷取位於裝置檢視區下方的圖片。

Chromium 實作延遲載入功能，試圖確保畫面外圖片在使用者捲動畫面時已載入，也就是在圖片在可視區域中顯示前，系統就會擷取圖片。

距離門檻會因下列因素而異：

• 要擷取的圖片資源類型
• 有效連線類型

您可以在 Chromium 來源中找到不同有效連線類型的預設值。您可以在開發人員工具中節流網路，嘗試使用這些不同的門檻。

改善資料儲存和距離檢視區閾值

2020 年 7 月，Chrome 大幅改善了圖片延後載入距離與檢視區閾值的對齊方式，以便更符合開發人員的期望。

在高速連線 (4G) 中，我們將 Chrome 的視區範圍距離閾值從 3000px 降低為 1250px，在低速連線 (3G 以下) 中，則將閾值從 4000px 變更為 2500px。這項異動可達成以下兩件事：

• <img loading=lazy> 的行為更接近 JavaScript 延遲載入程式庫提供的體驗。
• 新的距離檢視區閾值仍表示，在使用者捲動到圖片時，圖片可能已載入。

您可以比較舊版和新版的距離檢視區閾值，並在下方以快速連線 (4G) 進行示範：

以及與 LazySizes (熱門的 JavaScript 延遲載入程式庫) 相比的新門檻：

為圖片提供維度屬性

瀏覽器載入圖片時，除非明確指定，否則不會立即知道圖片的尺寸。為了讓瀏覽器在網頁上保留足夠的空間給圖片，並避免發生干擾性的版面配置變更，建議您在所有 <img> 標記中加入 width 和 height 屬性。

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

或者，您也可以直接在內嵌樣式中指定其值：

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

無論是否使用延遲載入，設定維度的最佳做法都適用於 <img> 標記，但延遲載入可讓這項做法更重要。

Chromium 中的延遲載入功能採用的方式，可讓圖片在可見時更有可能立即載入，但仍有可能不會在正確時間載入。如果發生這種情況，在圖片上未指定 width 和 height，會使圖片對累積版面配置偏移的影響加劇。如果您無法指定圖片的尺寸，延遲載入圖片可節省網路資源，但會增加版面配置變動的風險。

在大多數情況下，如果您未指定尺寸，圖片仍會延遲載入，但您應注意幾種邊緣情況。如果未指定 width 和 height，圖片尺寸預設為 0×0 像素。如果您有圖片庫，瀏覽器可能會決定讓所有圖片在開始時都位於檢視區內，因為每張圖片都不會佔用空間，且不會有圖片被推送至畫面外。在這種情況下，瀏覽器會決定載入所有內容，導致網頁載入速度變慢。

如要瞭解 loading 如何處理大量圖片，請參閱這個示範。

您也可以使用 <picture> 元素，為已定義的圖片啟用延遲載入功能：

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

雖然瀏覽器會決定從任何 <source> 元素載入哪張圖片，但您只需要將 loading 新增至備用 <img> 元素。

一律在第一個可視區域中急載顯示的圖片

針對使用者首次載入網頁時可見的圖片 (尤其是 LCP 圖片)，請使用瀏覽器的預設急切載入功能，讓圖片能立即顯示。詳情請參閱「過度使用延遲載入的效能影響」。

請僅將 loading=lazy 用於初始可視區域外的圖片。瀏覽器必須先知道圖片在網頁上的正確位置，才能延後載入圖片，因此圖片的載入速度會變慢。

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

優雅降級

不支援 loading 屬性的瀏覽器會忽略該屬性。雖然無法享有延遲載入的優點，但加入這項功能不會造成負面影響。

常見問題

瀏覽器層級延後載入的常見問題。

我可以在 Chrome 中自動延後載入圖片嗎？

先前，如果在 Android 版 Chrome 中啟用Lite 模式，且未提供 loading 屬性或將其設為 loading="auto"，Chromium 會自動延後載入任何適合延後載入的圖片。不過，簡易模式和 loading="auto" 已淘汰，我們也沒有計劃在 Chrome 中提供自動延遲載入圖片的功能。

我可以變更圖片在載入前需要多靠近可視區域嗎？

這些值為硬式編碼，無法透過 API 變更。不過，隨著瀏覽器嘗試使用不同的門檻距離和變數，這些值日後可能會有所變動。

CSS 背景圖片可以使用 loading 屬性嗎？

不行，您只能搭配 <img> 代碼使用。

loading 是否可與檢視區內未立即顯示的圖片搭配使用？

使用 loading="lazy" 可在圖片不可見但位於計算距離內時，避免圖片載入。這些圖片可能會在輪轉介面後方，或是在特定螢幕大小下因 CSS 而隱藏。舉例來說，Chrome、Safari 和 Firefox 不會在圖片元素或父項元素上使用 display: none; 樣式載入圖片。不過，其他圖片隱藏技巧 (例如使用 opacity:0 樣式) 仍會導致瀏覽器載入圖片。請務必徹底測試導入作業，確保其運作正常。

Chrome 121 變更了輪轉介面等水平捲動圖片的行為。這些項目現在採用與垂直捲動相同的門檻。也就是說，在輪轉介面用途中，圖片會在可視區域顯示前載入。這表示使用者較不容易察覺圖片載入情形，但代價是下載次數會增加。使用水平延遲載入示範，比較 Chrome 與 Safari 和 Firefox 的行為。

如果我已使用第三方程式庫或指令碼來延後載入圖片，該怎麼辦？

由於新式瀏覽器內建的延後載入功能可提供完整支援，您可能不需要第三方程式庫或指令碼來延後載入圖片。

繼續使用 loading="lazy" 和第三方程式庫的原因之一，是為了為不支援該屬性的瀏覽器提供 polyfill，或是進一步控管觸發延遲載入的時機。

如何處理不支援延後載入的瀏覽器？

瀏覽器層級的圖片延後載入功能在所有主要瀏覽器中都獲得良好支援，且建議在大多數用途中使用，以免需要額外依賴 JavaScript。

不過，如果您需要支援更多瀏覽器，或是想進一步控管延後載入門檻，可以使用第三方程式庫來延後載入網站上的圖片。

您可以使用 loading 屬性來偵測瀏覽器是否支援該功能：

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

舉例來說，lazysizes 是熱門的 JavaScript 延遲載入程式庫。只有在 loading 不支援時，您才能偵測是否支援 loading 屬性，以便載入 lazysizes 做為備用程式庫。運作方式如下：

• 將 <img src> 替換為 <img data-src>，以免在未支援的瀏覽器中使用急切載入。如果支援 loading 屬性，請將 data-src 換成 src。
• 如果不支援 loading，請從 lazysizes 載入備用項目並啟動，並使用 lazyload 類別指示要延後載入哪些圖片：

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

以下是此模式的示範。請嘗試在舊版瀏覽器中使用，看看備用方案的運作情形。

瀏覽器是否也支援 iframe 的延後載入？

<iframe loading=lazy> 也已標準化。這樣一來，您就能使用 loading 屬性延遲載入 iframe。詳情請參閱「現在是時候使用延遲載入功能，讓螢幕外的 iframe 延後載入！」。

瀏覽器層級的延後載入功能會如何影響網頁上的廣告？

所有廣告都會以圖片或 iframe 形式向使用者顯示，並採用延遲載入技術，就像其他圖片或 iframe 一樣。

列印網頁時，系統如何處理圖片？

當頁面列印時，所有圖片和 iframe 都會立即載入。詳情請參閱問題 #875403。

Lighthouse 是否會辨識瀏覽器層級的延遲載入？

Lighthouse 6.0 和更高版本會納入離開螢幕圖片延後載入方法，這些方法可使用不同的門檻，讓這些方法通過延後離開螢幕圖片稽核。

延後載入圖片，改善效能

瀏覽器支援圖片延後載入功能，可讓您更輕鬆地改善網頁效能。

你是否在 Chrome 中啟用這項功能時，發現任何異常行為？回報錯誤！