本頁面由 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 月，在約 600 萬個網站的語料庫中，有數萬個網站使用延遲載入功能 (約佔總數的 1%)。自此之後，採用 WordPress 延遲載入功能的網站已超過 100 萬個 (佔總數的 14%)。

因果效能

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

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

採用率

相關效能

因果效能

測試修正項目

實作

結論