本頁面由 Cloud Translation API 翻譯而成。

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

內建延遲載入功能終於登場！

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

網路功能現在支援延遲載入圖片的瀏覽器層級！這部影片示範功能：

你可以使用 loading 屬性延遲載入圖片，不必編寫自訂延遲載入程式碼，也不用另外使用 JavaScript 程式庫。一起來深入瞭解詳情吧！

瀏覽器相容性

瀏覽器支援

77
79
75
15.4

不支援 loading 屬性的瀏覽器會直接忽略該屬性，而不會產生副作用。

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

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

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

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

兩者皆可讓開發人員加入延遲載入功能，許多開發人員也建構了第三方程式庫，藉此提供更容易使用的抽象化機制。不過，瀏覽器直接支援延遲載入功能，就不需要使用外部程式庫。瀏覽器層級延遲載入也可確保即使用戶端停用 JavaScript，延遲載入圖片仍會正常運作。

`loading` 屬性

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

您可以使用 loading 屬性，完全延遲載入捲動時觸及的螢幕外圖片：

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

以下是 loading 屬性支援的值：

lazy：延後載入資源，直到資源與可視區域「計算的距離」達到為止。
eager：瀏覽器的預設載入行為，與未納入屬性相同，表示無論圖片位於網頁上的何處，系統都會載入圖片。雖然這是預設值，但如果您的工具沒有明確值，loading="lazy"或 Linter 未明確設定時，您可以明確設定這個屬性。

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

eager 值只是指示照常載入圖片的指示，如果圖片位於畫面外，也不會進一步延遲載入。這並不表示圖片的載入速度比沒有 loading="eager" 屬性的其他圖片更快。

瀏覽器會根據各種經驗法則決定資源的優先順序，而 loading 屬性只會指出圖片資源已排入佇列的「時間」，而不是該佇列在佇列中的優先順序。eager 只是表示瀏覽器預設使用的一般等待佇列。

如要提高重要圖片 (例如 LCP 圖片) 的擷取優先順序，建議您搭配 fetchpriority="high" 使用「擷取優先順序」。

請注意，當圖片位於畫面外時，含有 loading="lazy" 和 fetchpriority="high" 的圖片仍會延遲。在接近可視區域時，系統會以高優先順序擷取圖片。無論如何，系統擷取這類檔案時可能會優先考慮高優先順序，因此不需要或不會用到。

與可視區域的距離門檻

位於不需捲動位置的所有圖片 (也就是無需捲動即可直接查看) 的所有圖片，都會照常載入。只有在使用者捲動畫面附近時，系統才會擷取位於裝置可視區域下方的相片。

Chromium 實作延遲載入功能時，會嘗試確保及早載入畫面外的圖片，確保使用者捲動畫面靠近圖片時，圖片已載入完成。只要先妥善擷取附近的圖片，再於可視區域中顯示，就能在這些圖片出現在可視區域中時，盡可能提高圖片載入的機率。

與 JavaScript 延遲載入程式庫相比，擷取捲動瀏覽圖片的門檻可能都比較保守。

距離門檻並未固定，而且會受到許多因素的影響：

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

您可以在 Chromium 來源中查看不同有效連線類型的預設值。這些數字，甚至只在到達可視區域有特定距離時才擷取方法，但隨著 Chrome 團隊不斷改進經驗法則，決定何時開始載入，

改善數據節省模式和從可視區域的距離門檻

截至 2020 年 7 月，Chrome 已大幅改善圖片延遲載入距離與可視區域的閾值，以符合開發人員的期望。

在快速連線 (4G) 上，我們將 Chrome 的距離可視區域門檻從 3000px 降至 1250px，且連線速度較慢 (3G 或更低) 時，將閾值從 4000px 變更為 2500px。此次異動達成以下兩點：

<img loading=lazy> 的行為會更接近 JavaScript 延遲載入程式庫提供的體驗。
我們根據新的與可視區域距離新門檻，仍可確保使用者捲動至圖片時，圖片應該都會載入。

以下比較幾種使用快速連線 (4G) 網路連線 (4G) 的示範內容，即可瞭解新舊兩種指標的舊版與新版距離門檻比較：

舊閾值與新閾值比較：

新增改善圖片延遲載入門檻，將快速連線快速連線的距離門檻從 3000 像素降低至 1250 像素

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

在相同網路條件下，Chrome 能載入 90KB 圖片的距離與可視區域新門檻，與透過相同網路條件並以 70KB 載入的 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> 代碼是否延遲載入，設定維度的最佳做法都適用於標記。如果採用延遲載入，這個結果會更貼近需求。在新版瀏覽器中設定圖片的 width 和 height，也可讓瀏覽器推測其內建函式的大小。

在大多數情況下，如果圖片沒有提供尺寸，圖片仍會延遲載入，但但請注意在少數情況下需要注意。如未指定 width 和 height，則圖片最初尺寸為 0×0 像素。如果您有這類圖片的圖片庫，瀏覽器一開始可能會將所有圖片都放到可視區域內部，因為每個圖片幾乎不會佔用空間，而且圖片不會超出畫面外。在這種情況下，瀏覽器會判斷使用者是否看得到全部內容，並決定載入所有項目。

此外，指定圖片尺寸可以降低版面配置位移的機率。如果您無法提供圖片尺寸，則延遲載入圖片可以在節省網路資源之間取得平衡，而且有望增加版面配置位移的風險。

雖然 Chromium 的延遲載入功能實作方式會在圖片顯示後立即載入，但仍有少數機會可能尚未載入圖片。在這種情況下，如果這類圖片缺少 width 和 height 屬性，就會增加對累計版面配置位移的影響。

注意： 請參閱這個示範，瞭解 loading 屬性如何與 100 張圖片搭配運作。

使用 <picture> 元素定義的圖片也可以延遲載入：

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

雖然瀏覽器會決定要從任何 <source> 元素載入哪張圖片，但只需要在備用的 <img> 元素中加入 loading 屬性即可。

避免在第一個可見可視區域中的圖片延遲載入

建議您避免為第一個可見可視區域的圖片設定 loading=lazy。這與 LCP 圖片特別相關。詳情請參閱「過度延遲載入對效能的影響」一文。

建議只將 loading=lazy 加入定位在需捲動位置的圖片 (可以的話)。載入迅速的圖片可立即擷取，而瀏覽器延遲載入圖片；瀏覽器目前必須等到找到圖片在網頁中的位置，才能使用 IntersectionObserver。

一般而言，您應使用瀏覽器的預設值快速載入可視區域中的所有圖片。您不需要為可視區域圖片指定 loading=eager。

<!-- 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 屬性的瀏覽器將忽略其顯示。雖然這些瀏覽器當然無法獲得延遲載入的優點，但加入這項屬性對瀏覽器沒有負面影響。

常見問題

Google 是否計劃在 Chrome 中自動延遲載入圖片？

先前，如果你在 Android 版 Chrome 中啟用精簡模式，而且未提供或設為 loading="auto" 屬性，Chromium 會自動延遲載入任何適合延遲載入的圖片。loading不過，精簡模式已淘汰 (屬於非標準的 loading="auto")，目前也沒有計劃在 Chrome 中自動延遲載入圖片。

我是否可以變更圖片需多近距離才能觸發載入作業？

這些值是以硬式編碼的方式寫入，無法透過 API 變更。不過，隨著瀏覽器實驗不同的門檻距離和變數，這些參數未來可能會改變。

CSS 背景圖片能使用 `loading` 屬性嗎？

不行，目前只能與 <img> 標記搭配使用。

裝置可視區域內是否有延遲載入圖片的缺點？

建議您避免將 loading=lazy 放在不需捲動位置的圖片上，因為 Chrome 不會在預先載入掃描器中預先載入 loading=lazy 圖片，而且會延遲擷取這類圖片，直到所有版面配置完成為止。詳情請參閱避免在第一個可見可視區域中的圖片延遲載入圖片。

`loading` 屬性如何與位於可視區域，但無法立即看見的圖片搭配運作 (例如：在輪轉介面後方，或針對特定螢幕大小隱藏 CSS)？

使用 loading="lazy" 可以防止在計算距離內載入的這些元素無法顯示。舉例來說，Chrome、Safari 和 Firefox 不會在圖片元素或父項元素上使用 display: none; 樣式載入圖片。不過，其他隱藏圖片的技術 (例如使用 opacity:0 樣式) 仍會載入圖片。請務必徹底測試導入，確保運作情況符合預期。

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

由於新版瀏覽器現已完整支援原生延遲載入，如果您仍需使用第三方程式庫或指令碼才能延遲載入圖片，建議您重新考慮使用。

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

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

建立 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，請載入備用 (延遲) 並啟動。根據 Lazysize 文件，您可以使用 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> 也經過標準化，且已在 Chromium 和 Safari 中實作。這可讓您使用 loading 屬性延遲載入 iframe。詳情請參閱這篇 iframe 延遲載入相關文章。

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

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

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

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

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

Lighthouse 6.0 及以上方法會將畫面外圖片延遲載入的方法納入考量，而這可能會使用不同的門檻值，以通過延遲載入畫面外圖片稽核。

結語

只要支援延遲載入圖片，就能大幅改善網頁效能。

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