本頁面由 Cloud Translation API 翻譯而成。

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

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

Felix Arntz

Rick Viscomi

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

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

採用率

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

查詢 HTTP 檔案庫專案中的原始資料，有助我們更清楚瞭解哪些類型的網站推動採用率：84% 使用瀏覽器層級圖片延後載入功能的網站使用 WordPress，2% 使用其他內容管理系統，其餘 14% 則未使用已知的內容管理系統。這些結果清楚顯示 WordPress 在採用率方面領先。

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

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

因果效能

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

停用 WordPress 範例網頁上的瀏覽器層級圖片延遲載入功能，藉此調整 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%

這些結果比較了電腦和行動裝置上封存檔和單頁測試的 LCP 中位數 (以毫秒為單位)。因此，如果封存頁面停用延遲載入功能，LCP 會大幅改善空間。不過，在單頁上，這項功能的效果就沒那麼明顯。

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

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

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

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

測試修正項目

在本實驗中，WordPress 目前的延遲載入實作方式最重要的部分，就是在可視區域 (不需捲動位置) 內延遲載入圖片。CMS 部落格文章承認這是要避免的模式，但當時的實驗資料顯示，對 LCP 的影響微乎其微，因此值得在 WordPress 核心中簡化實作方式。

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

針對 WordPress 範例網頁，我們提議修正的瀏覽器層級圖片延遲載入問題，導致 LCP (毫秒) 變化。
系列	預設	已停用	修正	與預設值的差異	與停用狀態的差異
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%

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

在 WordPress 範例網頁中，針對瀏覽器層級圖片延遲載入功能提出的修正方式，可減少圖片位元組數 (KB)。
系列	預設	已停用	修正	與預設值的差異	與停用狀態的差異
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 會判斷哪些圖片在伺服器端需要延遲載入，也就是說，它並不知道使用者的可視區域大小，或不會在圖片中最初載入圖片。因此，修正方式會根據標記中的圖片相對位置經驗法則，推測圖片是否能在可視區域中載入。具體來說，如果圖片是網頁上的第一張圖片，或是主要內容中的第一張圖片，系統會假設該圖片位於不需捲動位置或靠近該圖片的位置，因此不會延遲載入。

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

基於這些原因，請務必瞭解修正項目只會在一般情況下提供良好效能，可能需要進行微調，才能讓這些結果適用於所有實際情境。

實作

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

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

採用率

相關效能

因果效能

測試修正項目

實作

結論