瀏覽器支援
- 77
- 79
- 75
- 15.4
您可以使用 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>
元素載入的圖片,但您只需在備用 <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
可以處理無法立即顯示可視區域中的圖片嗎?
使用 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 啟用這項功能後出現任何異常行為?回報錯誤!