Lazy Loading（延遲載入）是指網頁先載入使用者馬上需要看到的內容，把畫面以外的圖片、影片或內嵌內容留到需要時才下載。做得好，能明顯減少首次載入的資料量，是改善網頁速度的常用方法；做得不好，卻可能拖慢主要內容，甚至讓搜尋引擎看不到部分內容。
Lazy Loading 的定義
一般情況下，瀏覽器開啟網頁時會下載頁面上所有圖片，即使其中大部分位於很長的頁面下方。延遲載入把下載的時間點，由「頁面開啟時」改為「快要出現在畫面時」。目前主流瀏覽器都支援在 img 與 iframe 標籤加上 loading="lazy" 屬性，不需要額外的程式就能做到。
另一種做法是用 JavaScript 偵測元素何時進入可視範圍再載入，常用於背景圖片或特殊效果。這種方式較複雜，也要留意 JavaScript SEO 的相關問題。
為什麼 Lazy Loading 對 SEO 重要
頁面載入速度屬於使用者體驗的一部分，延遲載入能減少初次載入的資料量，有助改善 Core Web Vitals 的表現。不過，web.dev 的分析也指出，過度使用同樣會造成反效果，特別是把畫面最上方的圖片也延遲載入，會拖慢 Largest Contentful Paint，讓主要內容更晚出現。
另一個重點是內容能否被搜尋引擎看到。如果圖片或文字要等使用者點擊、或做特定互動後才載入，Googlebot 可能無法取得，這些內容就較難被收錄。因此延遲載入應該以「內容進入可視範圍就自動載入」為原則，而不是依賴點擊。
Lazy Loading 的運作原理
- 瀏覽器先載入頁面的 HTML，並下載位於第一屏的圖片與資源。
- 對於標示為延遲載入的圖片，瀏覽器只預留位置，暫時不下載。
- 使用者向下捲動，圖片接近可視範圍時，瀏覽器才開始下載並顯示。
- 如果已經設定圖片的寬度與高度，圖片出現時版面不會跳動，這與 Cumulative Layout Shift 直接相關。
Lazy Loading 的優點與挑戰
- 優點：減少首次載入的資料量，節省流量與伺服器資源，長頁面與圖片較多的頁面效果尤其明顯。
- 挑戰：誤把第一屏的主圖也延遲載入，會拖慢主要內容；沒有預留圖片空間，則會造成版面跳動。
- 注意事項：內容若需要點擊或特殊互動才會載入，搜尋引擎可能看不到。
Lazy Loading 的最佳實踐
- 第一屏的圖片不要延遲載入，特別是可能成為最大內容的主圖；必要時可使用 fetchpriority="high" 提示瀏覽器優先下載。
- 為所有圖片設定寬度與高度（或固定比例），避免版面跳動。
- 只對畫面以外的圖片與 iframe 使用延遲載入，並優先採用原生的 loading 屬性。
- 保留有意義的替代文字，並參考圖片 SEO 的做法，讓圖片同時對使用者與搜尋引擎有意義。
- 上線後以網址檢查工具或其他檢測工具，確認延遲載入的內容在頁面渲染後可以被看到。
常見問題
所有圖片都應該使用延遲載入嗎？
不應該。只有位於可視範圍之外的圖片才適合延遲載入。第一屏的圖片應該盡快載入，否則會影響使用者看到主要內容的時間。
Lazy Loading 會影響圖片被 Google 收錄嗎？
只要圖片在進入可視範圍時會自動載入，並使用標準的圖片標籤與可被擷取的圖片網址，一般不會有問題。如果圖片需要點擊或其他互動才載入，就可能無法被看到。
要用 JavaScript 還是原生屬性實作？
建議優先使用原生的 loading 屬性，因為簡單而且穩定。只有在需要處理背景圖片或特殊效果時，才考慮使用 JavaScript 的做法。