延遲載入過多會導致效能影響

以 Core Web Vitals 為重點,提供資料導向的圖片延遲載入建議。

Felix Arntz
Felix Arntz

延遲載入是一種技巧,可在需要時才下載資源,藉此節省資料並減少關鍵資產的網路爭用情形。2019 年,它成為網路標準,目前大多數主要瀏覽器都支援圖片的 loading="lazy"

本指南概述如何分析可公開取得的網頁透明度資料和臨時 A/B 測試,以瞭解瀏覽器層級圖片延遲載入的採用率與效能特性。研究結果指出,延後載入功能可有效減少不必要的圖片位元組,但過度使用可能會對效能造成負面影響。具體來說,這項分析顯示,在初始檢視區內盡可能提早載入圖片,同時放寬其他圖片的延遲載入,可讓我們兼顧兩種做法的好處:減少載入的位元組數,並改善網站體驗核心指標

根據 HTTP Archive 的最新資料,29% 的網站都使用內建圖片延後載入功能,而且採用率正在快速成長。

顯示 WordPress 佔「延遲載入」採用率的 84.1%、其他 CMS 為 2.3%,非 CMS 佔 13.5% 的圓餅圖。
分類顯示使用瀏覽器層級圖片延後載入功能的網站類型。(資料來源)

查詢 HTTP 檔案庫專案中的原始資料,有助我們更清楚瞭解哪些類型的網站推動採用率:84% 使用瀏覽器層級圖片延後載入功能的網站使用 WordPress,2% 使用其他內容管理系統,其餘 14% 則未使用已知的內容管理系統。這些成果清楚說明瞭 WordPress 如何主導採用企業的發展策略

延遲載入採用率的時間序列圖,WordPress 是主要採用者,相較於其他 CMS 和非 CMS,比例與前一個圖表相似。根據研究顯示,從 2020 年 7 月到 2021 年 6 月,總採用率從 1% 快速增加至 17%。
分類顯示使用瀏覽器層級圖片延後載入功能的網站類型。(資料來源)

另外值得注意的是採用率。一年前的 2020 年 7 月,在約 600 萬個網站的語料庫中,有數萬個網站使用延遲載入功能 (約佔總數的 1%)。自此之後,採用 WordPress 延遲載入功能的網站已超過 100 萬個 (佔總數的 14%)。

相關效能

深入瞭解 HTTP 存檔,您可以比較有無瀏覽器層級圖片延遲載入功能的網頁,並透過最大內容繪製 (LCP) 指標評估其效能。LCP 資料取自 Chrome 使用者體驗報告 (CrUX) 的實際使用者體驗,而不是研究室的綜合測試。下圖使用箱和範圖來呈現各個頁面 75 百分位 LCP 的分布情形:線條代表第 10 和第 90 百分位,方框代表第 25 和第 75 百分位。

盒形和莖條圖顯示使用和未使用瀏覽器層級圖片延後載入功能的網頁,分別為第 10、25、75 和 90 個百分位數。相對來說,未使用 LCP 的網頁分佈速度較慢。
所有網頁的第 75 個百分位數 LCP 體驗分布情形,並依據是否使用瀏覽器層級圖片延後載入功能進行細分。(資料來源)

不含延遲載入的網頁中位數字的 LCP 為 2,922 毫秒,而含延遲載入的網頁中位數字的 LCP 為 3,546 毫秒。整體而言,採用延遲載入的網站通常 LCP 效能較差。

請注意,這些結果是相關的,不一定代表延遲載入是效能緩慢的原因。假設 WordPress 網站的速度較慢,且考量到這些網站佔懶載群組的比例,就能解釋這項差異。為了消除這種變化,我們可以將重點縮小到 WordPress 網站。

這個方塊和魔術盒圖顯示 WordPress 網頁包含和未使用瀏覽器層級圖片延遲載入時的第 10 個、25、75 個百分位數和第 90 個百分位數。相較之下,未使用預先算繪的網頁 LCP 分布較快,如同上一個圖表所示。
WordPress 網頁的第 75 個百分位數 LCP 體驗分布情形,並依是否使用瀏覽器層級圖片延遲載入技術進行細分。(來源)

不幸的是,深入分析 WordPress 網頁時,也會發現相同的模式:使用延遲載入的網頁,通常 LCP 效能較慢。相較於延遲載入的 WordPress 網頁,相較於延遲載入的 WordPress 網頁,LCP 為 3,495 毫秒的第 75 個百分位數,第 3,495 毫秒。

這仍無法證明延遲載入「導致」網頁速度變慢,但使用延遲載入確實會導致效能變慢。為了回答因果關係問題,我們設定了實驗室 A/B 版本測試。

因果效能

這項 A/B 測試的目標,是證明或推翻以下假設:WordPress 核心實作的內建圖片延後載入功能,會導致 LCP 效能變慢,且圖片位元數減少。我們採用的方法是測試使用 twentytwentyone 主題的 WordPress 示範網站。並且分別在電腦和模擬行動裝置上使用 WebPageTest 測試封存和單一網頁類型,就像首頁和文章網頁一樣。我們測試了每個頁面的組合,包括啟用和停用延後載入的組合,並執行九次測試,以取得 LCP 值和圖片位元組數的中位數。

系列 預設 已停用 與預設值的差異
twentytwentyone-archive-desktop 2,029 1,759 -13%
twentytwentyone-archive-mobile 1,657 1,403 -15%
twentytwentyone-single-desktop 1,655 1,726 4%
twentytwentyone-single-mobile 1,352 1,384 2%
在 WordPress 範例網頁中停用瀏覽器層級的圖片延遲載入功能,以便觀察 LCP 的變化 (毫秒)。

這些結果會比較封存以及電腦和行動裝置專用單一網頁的 LCP 測試中位數 (以毫秒為單位)。在封存頁面中停用延遲載入功能後,LCP 大幅改善。但在單一頁面上卻無法帶來差異。

停用延遲載入功能似乎可讓單頁網頁的載入速度略微加快。不過,無論是電腦版還是行動版測試,LCP 的差異都小於一個標準差,因此這可能是變異所致,整體而言,變動對測試結果的影響不大。相較之下,封存頁面的差異更接近二到三個標準差。

系列 預設 已停用 與預設值的差異
twentytwentyone-archive-desktop 577 1173 103%
twentytwentyone-archive-mobile 172 378 120%
twentytwentyone-single-desktop 301 850 183%
twentytwentyone-single-mobile 114 378 233%
在 WordPress 範例網頁中停用瀏覽器層級的圖片延遲載入功能,以便變更圖片位元組數 (KB)。

這些結果會比較每項測試的圖片位元組中位數 (以 KB 為單位)。如預期,延後載入功能對減少圖片位元組數有非常明確的正面影響。如果真實使用者捲動整個網頁,所有圖片都會在進入檢視區時載入,但這些結果顯示初始網頁載入的效能已改善。

總結來說,WordPress 採用的延遲載入技術確實有助於減少圖片位元組,但代價是 LCP 延遲。

測試修正項目

在這項實驗中,WordPress 目前採用延遲載入功能時,最重要的是延遲載入可視區域 (不需捲動位置) 中的圖片。CMS 網誌文章確認這是避免的模式,但當時的實驗資料顯示,LCP 對 LCP 的影響不大,也值得簡化 WordPress 核心的實作程序。

有了這些新資料,我們便建立了實驗性修正項目,避免在首頁上載入延遲載入的圖片,並在與第一次 A/B 測試相同的條件下測試修正項目。

系列 預設 已停用 修正 與預設之間的差異 與停用選項的差異
twentytwentyone-archive-desktop 2,029 人 1,759 1,749 -14% -1%
twentytwentyone-archive-mobile 1,657 1,403 1,352 人 -18% -4%
twentytwentyone-single-desktop 1,655 人 1,726 1,676 1% -3%
twentytwentyone-single-mobile 1,352 1,384 1,342 -1% -3%
針對 WordPress 範例網頁,我們提議修正的瀏覽器層級圖片延遲載入問題,導致 LCP (毫秒) 變化。

這些結果的成效大幅提升。只為下方圖片啟用延後載入功能,即可完全逆轉 LCP 回歸現象,甚至可能比完全停用延後載入功能還要略微改善。為什麼這比完全不使用延遲載入更快?其中一個原因是,如果不載入下方圖片,網路爭用情形就會減少,因此 LCP 圖片的載入速度會加快。

系列 預設 已停用 修正 與預設之間的差異 與停用選項的差異
twentytwentyone-archive-desktop 577 1173 577 0% -51%
twentytwentyone-archive-mobile 172 378 172 0% -54%
twentytwentyone-single-desktop 301 850 301 0% -65%
twentytwentyone-single-mobile 114 378 114 0% -70%
在 WordPress 範例網頁中,針對瀏覽器層級圖片延遲載入功能提出的修正方式,可減少圖片位元組數 (KB)。

就圖片位元組而言,相較於預設行為,修正方式絕對沒有任何變化。這很棒,因為這是目前方法的優點之一。

進行這項修正時,有一些注意事項。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 網站上