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

針對延遲載入圖片，請參考資料導向的建議，遵循 Core Web Vitals 指標。

Felix Arntz

Rick Viscomi

延遲載入這項技術會將資源下載至有需要的時間延後，藉此節省資料並減少重要資產的網路爭用情況。早在 2019 年成為網路標準，如今多數主要瀏覽器都支援 loading="lazy" 圖片搜尋。

本指南概述如何分析可公開取得的網頁透明度資料和臨時 A/B 測試，以瞭解瀏覽器層級圖片延遲載入的採用率與效能特性。研究結果包含延遲載入是減少不需要的圖片位元組非常有效的工具，但是過度使用可能會對效能造成負面影響。具體來說，這項分析結果顯示，更積極地載入初始可視區域中的圖片，同時盡量延遲載入其餘圖片，可為我們帶來最佳效果，也就是減少載入的位元組數，以及改善網站體驗核心指標。

採用率

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

透過 HTTP 封存專案中的查詢原始資料，我們就能更清楚瞭解哪種網站採用這類技術：84% 採用瀏覽器層級圖片延遲載入的網站中，有 84% 使用的是 WordPress，其餘 2% 則未使用已知的 CMS。這些成果清楚說明瞭 WordPress 如何主導採用企業的發展策略。

我們也值得注意採用率。2020 年 7 月前，使用延遲載入功能的 WordPress 網站共有約 600 萬個網站 (佔總數的 1%)。自 WordPress 才開始採用延遲載入功能，如今有超過 100 萬個網站採用這項功能 (佔總數的 14%)。

關聯效能

深入探索 HTTP 封存檔：使用 Largest Contentful Paint (LCP) 指標，比較沒有瀏覽器層級圖片延遲載入的網頁成效。LCP 資料取自 Chrome 使用者體驗報告 (CrUX) 的實際使用者體驗，而不是研究室的綜合測試。以下圖表使用拳擊手繪圖，以視覺化方式呈現每個頁面第 75 個百分位數的 LCP 分佈情形：線條代表第 10 和第 90 個百分位數，方塊則代表第 25 個和第 75 個百分位數。

未延遲載入的網頁中位數有 75 個百分位數的 2,922 毫秒，而延遲載入的網頁中位數則有 3,546 毫秒。整體而言，使用延遲載入的網站通常 LCP 效能較差。

請特別指出這些是關聯結果，但不一定指向延遲載入，因為這是效能較慢的「原因」。假設 WordPress 網站往往速度較慢，並考量到延遲載入同類群組所佔的比重，這可能代表兩者的差別。如要避免這項差異，您可以將重點範圍縮小至 WordPress 網站。

然而，深入研究 WordPress 網頁時會出現相同的模式，使用延遲載入的網頁通常 LCP 效能較慢。相較於延遲載入的 WordPress 網頁，相較於延遲載入的 WordPress 網頁，LCP 為 3,495 毫秒的第 75 個百分位數，第 3,495 毫秒。

這種情況還是無法證明延遲載入會導致網頁變慢，但使用會也會影響效能較慢。為了回答因果問題，我們設定了研究室型 A/B 測試。

因果成效

A/B 測試的目標是證明內建圖片延遲載入的假設是在 WordPress 核心中實作，導致 LCP 效能變慢且圖片位元組更少。該公司採用的方法是測試二十二十一度主題的示範 WordPress 網站。並且分別在電腦和模擬行動裝置上使用 WebPageTest 測試封存和單一網頁類型，就像首頁和文章網頁一樣。系統會測試每個已啟用和未啟用延遲載入功能的網頁組合，每次測試都會執行 9 次，藉此取得 LCP 值和圖片位元組的中位數值。

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

停用延遲載入功能似乎可讓單一網頁的速度稍微加快。不過，在電腦測試和行動裝置測試中，LCP 的差異小於一項標準差，因此可能就反映了變異情況，並考量整體的變化中立的不變。相較之下，封存頁面的差異更接近二到三個標準差。

這些結果會比較每項測試的圖片位元組中位數 (以 KB 為單位)。延遲載入對圖片位元組數量有非常明顯的正面影響。如果實際使用者需要捲動瀏覽整個網頁，則所有圖片會在使用者進入可視區域時仍能載入，但結果顯示初始網頁載入的改善效能。

總結來說，WordPress 採用的延遲載入技術可明確協助減少圖片位元組，但會因為 LCP 延遲而降低圖片位元組。

測試修正結果

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

根據這些新資料，此工具建立了實驗性修正，避免了不需捲動位置的延遲載入圖片，並在與第一次 A/B 版本相同的條件下測試修正程式。

這些結果的成效大幅提升。如果只延遲載入位於需捲動位置的圖片，將會完全撤銷 LCP 迴歸，甚至在完全停用延遲載入方面，甚至可能略有改善。如何讓它比完全延遲載入更快？其中一個原因在於，如果不載入需捲動位置的圖片，LCP 圖片的網路爭用就會減少，進而加快載入速度。

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

進行這項修正時，有一些注意事項。WordPress 會判斷哪些圖片在伺服器端需要延遲載入，也就是說，它並不知道使用者的可視區域大小，或不會在圖片中最初載入圖片。因此，修正方式會根據標記中的圖片相對位置經驗法則，推測圖片是否能在可視區域中載入。具體來說，如果圖片是網頁上的第一張圖片，或是主要內容中的第一張圖片，系統會假設該圖片位於不需捲動位置或靠近該圖片的位置，因此不會延遲載入。

網頁層級條件 (例如標題中的字詞數量，或是主要內容開頭的段落文字量) 可能會影響圖片是否位於可視區域。此外，有些使用者層級的條件可能會影響經驗法則的準確度，特別是可視區域大小，以及使用會改變網頁捲動位置的錨點連結。

基於這些原因，請務必瞭解修正內容在一般情況下已經過校正，可帶來良好成效，您可能需要微調，才能讓這些結果適用於各種實際情境。

導入 (:#implementation)

找出更好的延遲載入圖片方法後，就能節省更多圖片並加快 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 網站上