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

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

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

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

瀏覽器相容性

瀏覽器支援

  • 77
  • 79
  • 75
  • 15.4

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

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

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

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

兩者皆可讓開發人員加入延遲載入功能,許多開發人員也建構了第三方程式庫,藉此提供更容易使用的抽象化機制。不過,瀏覽器直接支援延遲載入功能,就不需要使用外部程式庫。瀏覽器層級延遲載入也可確保即使用戶端停用 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> 標記都納入 widthheight 屬性。如未指定尺寸,就可能會發生版面配置位移,這種情況在載入時間上會比較明顯。

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

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

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

無論 <img> 代碼是否延遲載入,設定維度的最佳做法都適用於標記。如果採用延遲載入,這個結果會更貼近需求。在新版瀏覽器中設定圖片的 widthheight,也可讓瀏覽器推測其內建函式的大小。

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

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

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

使用 <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="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 啟用這項功能後出現任何異常行為?回報錯誤