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

Addy Osmani
Addy Osmani
X GitHub
Houssein Djirdeh
Mathias Bynens
Mathias Bynens
X GitHub 首頁
Barry Pollard

瀏覽器支援

  • 77
  • 79
  • 75
  • 15.4

您可以使用 loading 屬性延遲載入圖片，不必編寫自訂延遲載入程式碼，也不用另外使用 JavaScript 程式庫。以下是這項功能的示範：

當使用者捲動網頁時，系統會載入延遲載入的圖片。

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

為何需要瀏覽器層級延遲載入？

根據 HTTP 封存檔，圖片是大多數網站要求最多的資產類型，而且佔用的頻寬通常比任何其他資源還多。在第 90 個百分位數，網站在電腦和行動裝置上傳送的圖片超過 5 MB。

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

這兩種方式都可以讓開發人員納入延遲載入行為，而許多開發人員都已建構第三方程式庫，來提供更容易使用的抽象化機制。

不過，瀏覽器直接支援延遲載入功能，就不需要使用外部程式庫。瀏覽器層級延遲載入也可確保即使用戶端停用 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) 連線的示範內容，比較新舊訪客與檢視點的距離門檻：

舊閾值與新閾值比較：

新增改善圖片延遲載入門檻，將快速連線快速連線的距離門檻從 3000 像素降低至 1250 像素。
比較舊版與新版的原生延遲載入閾值。

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

針對相同網路條件下，Chrome 能載入 90KB 圖片的距離與可視區域新門檻，與透過相同網路條件載入 70KB 的 LazySizes 相比。
瞭解 Chrome 和 LazySizes 延遲載入的門檻差異。

提供圖片尺寸屬性

瀏覽器載入圖片時，無法立即知道圖片尺寸 (除非已明確指定圖片尺寸)。為了讓瀏覽器保留網頁上的圖片空間，並避免造成版面配置位移造成乾擾，建議您在所有 <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> 元素載入的圖片，但您只需在備用 <img> 元素中加入 loading。

一律在第一個可視區域內顯示快速載入圖片

至於使用者首次載入網頁時顯示的圖片，尤其是 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 中啟用精簡模式，但未提供 loading 屬性或設為 loading="auto"，Chromium 會自動延遲載入任何適合延遲載入的圖片。不過，精簡模式和 loading="auto" 已淘汰，目前也沒有計劃在 Chrome 中自動延遲載入圖片。

我是否可以變更圖片與可視區域的距離，才能載入圖片？

這些值是以硬式編碼的方式寫入，無法透過 API 變更。不過，隨著瀏覽器實驗不同的閾值和變數，它們日後可能會改變。

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

不行，您只能將其與 <img> 標記搭配使用。

使用 loading="lazy" 可以防止系統在圖片未顯示但位於計算距離時載入圖片。這些圖片可能會放在輪轉介面後方，也可能是針對特定螢幕大小而遭到 CSS 隱藏。舉例來說，Chrome、Safari 和 Firefox 不會在圖片元素或父項元素上使用 display: none; 樣式載入圖片。不過，其他隱藏圖片技術 (例如使用 opacity:0 樣式) 仍會導致瀏覽器載入圖片。請務必徹底測試導入，確保運作情況符合預期。

Chrome 121 版變更了橫向捲動圖片 (例如輪轉介面) 的行為。現在這些門檻與垂直捲動的門檻相同。這表示如果圖片是輪轉介面用途，則圖片會先載入，然後才在可視區域中顯示。也就是說，使用者較不可能察覺到圖片載入，但會需要下載更多。使用水平延遲載入示範來比較 Chrome 和 Safari 和 Firefox 的行為。

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

新版瀏覽器已內建延遲載入功能，您大概不需要第三方程式庫或指令碼，即可延遲載入圖片。

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

如何處理不支援延遲載入的瀏覽器？{browsers-dont-support}

建立 polyfill 或使用第三方程式庫來延遲載入網站上的圖片。 您可以使用 loading 屬性偵測瀏覽器是否支援這項功能：

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

例如 Lazysizes 是常見的 JavaScript 延遲載入程式庫。只有在不支援 loading 的情況下，您才能偵測出對 loading 屬性的支援，將延遲載入為備用程式庫。運作方式如下：

  • 將 <img src> 替換為 <img data-src>，避免在不支援的瀏覽器上緊急載入。如果支援 loading 屬性，請將 data-src 切換為 src。
  • 如果不支援 loading，請從延遲載入並啟動備用項，並使用 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 的延遲載入功能嗎？

瀏覽器支援

  • 77
  • 79
  • 121
  • 16.4

<iframe loading=lazy> 也已標準化。這樣即可使用 loading 屬性延遲載入 iframe。詳情請參閱「延遲載入畫面外 iframe 的好時機！」一文。

瀏覽器層級延遲載入對網頁上的廣告有何影響？

所有以圖片或 iframe 延遲載入的廣告向使用者顯示，就像其他圖片或 iframe 一樣。

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

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

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

Lighthouse 6.0 及更高等級的因素，適用於螢幕外圖片延遲載入而採用不同的閾值，藉此通過延遲載入畫面外圖片的稽核。

延遲載入圖片以提升效能

只要瀏覽器支援延遲載入圖片，您就可以輕鬆提升網頁效能。

您是否發現 Chrome 啟用這項功能後出現任何異常行為？回報錯誤！