針對延遲載入圖片,請參考資料導向的建議,遵循 Core Web Vitals 指標。
延遲載入這項技術會將資源下載至有需要的時間延後,藉此節省資料並減少重要資產的網路爭用情況。早在 2019 年成為網路標準,如今多數主要瀏覽器都支援 loading="lazy"
圖片搜尋。
本指南概述如何分析可公開取得的網頁透明度資料和臨時 A/B 測試,以瞭解瀏覽器層級圖片延遲載入的採用率與效能特性。研究結果包含延遲載入是減少不需要的圖片位元組非常有效的工具,但是過度使用可能會對效能造成負面影響。具體來說,這項分析結果顯示,更積極地載入初始可視區域中的圖片,同時盡量延遲載入其餘圖片,可為我們帶來最佳效果,也就是減少載入的位元組數,以及改善網站體驗核心指標。
採用率
根據 HTTP 封存的最新資料,29% 的網站都使用內建圖片延遲載入功能,而且採用率正在快速成長。
![顯示 WordPress 佔「延遲載入」採用率的 84.1%、其他 CMS 為 2.3%,非 CMS 佔 13.5% 的圓餅圖。](https://web.developers.google.cn/static/articles/lcp-lazy-loading/image/pie-chart-showing-wordpre-4b9f571267fae.png?authuser=19&hl=zh-tw)
透過 HTTP 封存專案中的查詢原始資料,我們就能更清楚瞭解哪種網站採用這類技術:84% 採用瀏覽器層級圖片延遲載入的網站中,有 84% 使用的是 WordPress,其餘 2% 則未使用已知的 CMS。這些成果清楚說明瞭 WordPress 如何主導採用企業的發展策略。
![相較於其他 CMS 和非 CMS,WordPress 延遲載入採用率的時間序列圖表,呈現類似先前圖表的比例。根據研究顯示,從 2020 年 7 月到 2021 年 6 月,總採用率從 1% 快速增加至 17%。](https://web.developers.google.cn/static/articles/lcp-lazy-loading/image/timeseries-chart-lazy-lo-bb9c26a3fb041.png?authuser=19&hl=zh-tw)
我們也值得注意採用率。2020 年 7 月前,使用延遲載入功能的 WordPress 網站共有約 600 萬個網站 (佔總數的 1%)。自 WordPress 才開始採用延遲載入功能,如今有超過 100 萬個網站採用這項功能 (佔總數的 14%)。
關聯效能
深入探索 HTTP 封存檔:使用 Largest Contentful Paint (LCP) 指標,比較沒有瀏覽器層級圖片延遲載入的網頁成效。LCP 資料取自 Chrome 使用者體驗報告 (CrUX) 的實際使用者體驗,而不是研究室的綜合測試。以下圖表使用拳擊手繪圖,以視覺化方式呈現各頁面的分佈情形第 75 個百分位數:線條代表第 10 和第 90 個百分位數,方塊則代表第 25 和第 75 個百分位數。
![方塊和威士忌圖,顯示未使用瀏覽器層級圖片延遲載入的網頁時的第 10 個、25、75 個百分位數和第 90 個百分位數。相對來說,未使用 LCP 的網頁分佈速度較慢。](https://web.developers.google.cn/static/articles/lcp-lazy-loading/image/box-whisker-chart-showin-fab6befef771c.png?authuser=19&hl=zh-tw)
未延遲載入的網頁中位數有 75 個百分位數的 2,922 毫秒,而延遲載入的網頁中位數則有 3,546 毫秒。整體而言,使用延遲載入的網站通常 LCP 效能較差。
請特別指出這些是關聯結果,但不一定指向延遲載入,因為這是效能較慢的「原因」。假設 WordPress 網站往往速度較慢,並考量到延遲載入同類群組所佔的比重,這可能代表兩者的差別。如要避免這項差異,您可以將重點範圍縮小至 WordPress 網站。
![這個方塊和魔術盒圖顯示 WordPress 網頁包含和未使用瀏覽器層級圖片延遲載入時的第 10 個、25、75 個百分位數和第 90 個百分位數。相對地,相較於先前的圖表,未使用 LCP 的網頁分佈速度較慢。](https://web.developers.google.cn/static/articles/lcp-lazy-loading/image/box-whisker-chart-showin-c37339441feb8.png?authuser=19&hl=zh-tw)
不幸的是,下鑽至 WordPress 網頁時出現了相同的模式;使用延遲載入的使用者通常擁有較慢的 LCP 效能。相較於延遲載入的 WordPress 網頁,相較於延遲載入的 WordPress 網頁,LCP 為 3,495 毫秒的第 75 個百分位數,第 3,495 毫秒。
這種情況還是無法證明延遲載入會導致網頁變慢,但使用會也會影響效能較慢。為了回答因果問題,我們設定了研究室型 A/B 測試。
因果成效
A/B 測試的目標是證明內建圖片延遲載入的假設是在 WordPress 核心中實作,導致 LCP 效能變慢且圖片位元組更少。該公司採用的方法是測試二十二期主題的示範 WordPress 網站。並且分別在電腦和模擬行動裝置上使用 WebPageTest 測試封存和單一網頁類型,就像首頁和文章網頁一樣。系統會測試每個已啟用和未啟用延遲載入功能的網頁組合,每次測試都會執行 9 次,藉此取得 LCP 值和圖片位元組的中位數值。
系列 | 預設 | 已停用 | 與預設之間的差異 |
---|---|---|---|
twentytwentyone-archive-desktop | 2,029 人 | 1,759 人 | -13% |
二十二期-封存行動 | 1,657 人 | 1,403 人 | -15% |
二十二期-單台電腦 | 1,655 人 | 1,726 人 | 4% |
2021 年單一行動裝置 | 1,352 人 | 1,384 人 | 2% |
這些結果會比較封存以及電腦和行動裝置專用單一網頁的 LCP 測試中位數 (以毫秒為單位)。因此,如果封存頁面停用延遲載入功能,LCP 會大幅改善空間。但在單一頁面上卻無法帶來差異。
停用延遲載入功能似乎可讓單一網頁的速度稍微加快。不過,在電腦測試和行動裝置測試中,LCP 的差異小於一項標準差,因此可能就反映了變異情況,並考量整體的變化中立的不變。相較之下,封存頁面的差異更接近二到三個標準差。
系列 | 預設 | 已停用 | 與預設之間的差異 |
---|---|---|---|
twentytwentyone-archive-desktop | 577 | 1173 | 103% |
二十二期-封存行動 | 172 | 378 | 120% |
二十二期-單台電腦 | 301 | 850 | 183% |
2021 年單一行動裝置 | 114 | 378 | 233% |
這些結果會比較每項測試的圖片位元組中位數 (以 KB 為單位)。延遲載入對圖片位元組數量有非常明顯的正面影響。如果實際使用者需要捲動瀏覽整個網頁,則所有圖片會在使用者進入可視區域時仍能載入,但結果顯示初始網頁載入的改善效能。
總結來說,WordPress 採用的延遲載入技術可明確協助減少圖片位元組,但會因為 LCP 延遲而降低圖片位元組。
測試修正結果
WordPress 最重要的面向這項實驗目前採用的延遲載入功能,就是將圖片延遲載入可視區域 (不需捲動位置)。CMS 網誌文章確認這是避免的模式,但當時的實驗資料顯示,LCP 對 LCP 的影響不大,也值得簡化 WordPress 核心的實作程序。
根據這些新資料,此工具建立了實驗性修正,避免了不需捲動位置的延遲載入圖片,並在與第一次 A/B 版本相同的條件下測試修正程式。
系列 | 預設 | 已停用 | 修正 | 與預設之間的差異 | 與停用選項的差異 |
---|---|---|---|---|---|
twentytwentyone-archive-desktop | 2,029 人 | 1,759 人 | 1,749 人 | -14% | -1% |
二十二期-封存行動 | 1,657 人 | 1,403 人 | 1,352 人 | -18% | -4% |
二十二期-單台電腦 | 1,655 人 | 1,726 人 | 1,676 人 | 1% | -3% |
2021 年單一行動裝置 | 1,352 人 | 1,384 人 | 1,342 人 | -1% | -3% |
這些結果的成效大幅提升。如果只延遲載入位於需捲動位置的圖片,將會完全撤銷 LCP 迴歸,甚至在完全停用延遲載入方面,甚至可能略有改善。如何讓它比完全延遲載入更快?其中一個原因在於,如果不載入需捲動位置的圖片,LCP 圖片的網路爭用就會減少,進而加快載入速度。
系列 | 預設 | 已停用 | 修正 | 與預設之間的差異 | 與停用選項的差異 |
---|---|---|---|---|---|
twentytwentyone-archive-desktop | 577 | 1173 | 577 | 0% | -51% |
二十二期-封存行動 | 172 | 378 | 172 | 0% | -54% |
二十二期-單台電腦 | 301 | 850 | 301 | 0% | -65% |
2021 年單一行動裝置 | 114 | 378 | 114 | 0% | -70% |
就圖片位元組而言,相較於預設行為,修正方式絕對沒有任何變化。因為這是目前做法的優點之一。
進行這項修正時,有一些注意事項。WordPress 會判斷哪些圖片在伺服器端需要延遲載入,也就是說,它並不知道使用者的可視區域大小,或不會在圖片中最初載入圖片。因此修正方法會使用圖片的經驗法則標記中的相對位置,以推測標記是否可在可視區域中載入。具體來說,如果圖片是網頁上的第一張圖片,或是主要內容中的第一張圖片,系統會假設該圖片位於不需捲動位置或靠近該圖片的位置,因此不會延遲載入。
網頁層級條件 (例如標題中的字詞數量,或是主要內容開頭的段落文字量) 可能會影響圖片是否位於可視區域。此外,有些使用者層級的條件可能會影響經驗法則的準確度,特別是可視區域大小,以及使用會改變網頁捲動位置的錨點連結。
基於這些原因,請務必瞭解修正內容在一般情況下已經過校正,可帶來良好成效,您可能需要微調,才能讓這些結果適用於各種實際情境。
導入作業
找出更好的延遲載入圖片方法後,就能節省更多圖片並加快 LCP 效能。那麼,網站該如何開始使用這類圖片?變更的優先順序最高,是將修補程式提交至 WordPress 核心,以便實作實驗修正措施。此外,「CMS 瀏覽器層級延遲載入」網誌文章中的指南也將一併更新,闡明不需捲動位置延遲載入的負面影響,以及 CMS 如何使用經驗法則來避免這種情況。
由於這些最佳做法適用於所有網頁開發人員,因此在 Lighthouse 等工具中也很適合標示延遲載入反模式。如要追蹤稽核進度,請參閱 GitHub 的功能要求。在此之前,開發人員可以找出延遲載入的 LCP 元素例項,就是在欄位資料中加入更詳細的記錄。
new PerformanceObserver((list) => {
const latestEntry = list.getEntries().at(-1);
if (latestEntry?.element?.getAttribute('loading') == 'lazy') {
console.warn('Warning: LCP element was lazy loaded', latestEntry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
上述的 JavaScript 程式碼片段會評估最新的 LCP 元素,並在延遲載入時記錄警告。
此外,這也突顯了延遲載入技術的銳利邊緣,以及平台層級 API 的改進潛力。舉例來說,Chromium 仍有未解決的問題,可以嘗試原生載入前幾張圖片,與修正內容類似,但其實有 loading
屬性。
結論
如果網站使用瀏覽器層級圖片延遲載入功能,請查看實作方式並執行 A/B 測試,進一步瞭解網站效能成本。建議您更密集地載入不需捲動位置的圖片。如果您有 WordPress 網站,希望 WordPress 核心能盡快提供修補程式。如果您使用其他 CMS,請確保對方瞭解本文所述的潛在效能問題。
嘗試新型態的網頁平台 API 可能會帶來風險和回報,在理由上稱為先進功能。雖然我們才開始瞭解瀏覽器層級圖片延遲載入的最嚴重性,但我們也發現,使用這項工具提升效能的方式也有缺點。
相片來源:Frankie Lopez 發表於 Unsplash 網站上