在追求極致效能的過程中，lazy loading（懶載入）是一項廣為流傳的優化技巧，但若使用不當，反而會成為拖累核心指標 LCP 的元凶。本文將深入探討 lazy loading 對 LCP 的影響與正確應用策略，幫助你辨識哪些元素可以安全使用，哪些關鍵資源必須確保立即載入，從而避開常見的性能陷阱。
為什麼 lazy loading 會讓 LCP 變慢？
當你將 LCP（Largest Contentful Paint）元素，通常是頁面首屏最大的那張圖片，加上 loading="lazy" 屬性時，瀏覽器會認定它不是需要立即載入的關鍵資源。這會導致瀏覽器延遲對該圖片的網路請求，直到該元素接近或進入可視區域（viewport）才開始載入。在典型的瀑布圖中，你會發現這個本應最早被發起的請求被大大推遲，與其他關鍵資源（如 CSS、JS）的載入產生衝突，最終導致 LCP 的時間點顯著延後，使用者體驗大打折扣。這種延遲在網路狀況不佳時尤其明顯。
哪些元素適合 lazy loading？哪些絕對不行？
懶載入的正確使用場景非常明確：它專門針對那些非首屏關鍵的資源，例如摺頁（fold）以下的裝飾性圖片、產品列表中的次要圖片、非必要的影片與 iframe。這些資源的延遲載入不會影響首次繪製（FCP）或使用者感知的頁面載入速度。絕對禁止使用 lazy loading 的元素包括：所有可能成為 LCP 候選的元素（如首屏主視覺圖、大型產品圖）、首屏內的任何大型元素，以及你透過效能分析確認是 LCP 的資源。判斷準則很簡單：問自己「如果這個元素晚載入半秒，頁面看起來會不會殘缺或明顯延遲？」如果答案是肯定的，那就絕對不要用 lazy loading。
實測：對 LCP 圖片加上 loading="lazy" 的後果
為了驗證 lazy loading 對 LCP 的實際衝擊，我們模擬了桌面版 3G 網路環境進行 A/B 測試。同一張作為 LCP 候選的首屏大圖，在未啟用 lazy loading 時，測得的 LCP 時間約為 2.1 秒。而當我們為該圖片加上 loading="lazy" 後，LCP 時間驟增至 4.8 秒，延遲超過一倍。這個實驗結果清晰地顯示了對關鍵元素誤用 lazy loading 的嚴重後果。測試工具使用 WebPageTest，數據來源為特定測試環境下的實測結果，旨在說明現象而非提供固定數值門檻，實際數值會因內容大小與網路環境而異。
如何正確使用 fetchpriority 與 preload 保護 LCP 元素
要確保 LCP 元素不受 lazy loading 的負面影響，最直接的方法是主動賦予其最高的載入優先級。你可以透過兩種方式達成：使用 fetchpriority="high" 屬性，或使用 <link rel="preload"> 標籤。fetchpriority="high" 告訴瀏覽器「這個資源很重要，請盡早處理」，它的靈活性較高。而 preload 則是更強力的指令，瀏覽器會在解析 HTML 時立即開始載入該資源，其優先級通常高於一切。在實務上，為 LCP 圖片同時加上 fetchpriority="high" 並搭配 preload 是常見的保險作法。請注意，fetchpriority 屬性在舊版瀏覽器（如 Safari）上可能不被支援，需要漸進式增強。
原生 loading="lazy" vs Intersection Observer：哪個更安全？
實現懶載入主要有兩種方式：瀏覽器原生的 loading="lazy" 與使用 Intersection Observer API 的自訂實作。原生方式極其簡單，只需一個屬性，效能通常也更好，因為瀏覽器內部有最佳化。然而，它的危險之處在於容易被無差別地套用在所有圖片上，進而誤傷 LCP 元素。Intersection Observer 方案雖然需要撰寫 JavaScript，但能讓你更精準地控制「何時」開始載入，例如你可以設定當元素距離視口還有 200px 時才開始載入，從而避免誤觸。儘管如此，自訂方案的效能開銷略高於原生。綜合評估，建議優先使用原生 loading="lazy"，但必須建立嚴格的開發規範，搭配 fetchpriority 等機制保護 LCP 元素，並在上線前徹底測試。
檢測與除錯：如何確認 LCP 元素是否被 lazy loading？
在網站上線前或效能評估時，確認 LCP 元素沒有被誤加 lazy loading 至關重要。你可以使用 Chrome DevTools 進行診斷。在「Network」面板中，篩選出 LCP 圖片的請求，觀察它的「Time」欄位，如果其開始載入的時間點明顯晚於其他關鍵資源（如 CSS），就可能被延遲了。更進階的方法是切換到「Performance」面板，錄製一次頁面載入，檢查 LCP 條目發生的時間點以及對應圖片請求的時序。此外，使用 Lighthouse 進行審計時，若出現「Largest Contentful Paint image was lazily loaded」這類警告，便是明確的警訊。你也可以在 Console 中執行 performance.getEntriesByType('largest-contentful-paint') 來輔助分析。