Lazy Loading 是什麼？延遲載入能讓網站跑更快，幫 SEO 加分！

Lazy Loading 是什麼：先載入使用者看得到的部分

Lazy Loading（延遲載入）是一種效能優化技巧，核心概念是不在頁面一開始就載入所有圖片與資源，而是優先載入使用者當下視窗範圍內看得到的內容，其餘位於頁面下方、尚未捲動到的圖片或區塊，則延後到使用者實際捲動接近時才載入，藉此縮短頁面初次載入所需的時間與流量。

實作方式一：瀏覽器原生支援的 loading="lazy"

現代主流瀏覽器已內建支援在 img 標籤加上 loading="lazy" 屬性，只需要簡單一行設定，瀏覽器就會自動判斷該圖片是否位於可視範圍之外，並延後載入時機，是目前最簡單、最容易導入的延遲載入做法，幾乎不需要額外撰寫程式邏輯。

實作方式二：透過 Intersection Observer 取得更精細的控制

若需要更精細的控制，例如針對非圖片的內容區塊、背景圖，或是希望自訂載入的觸發時機與載入動畫效果，則可以透過 JavaScript 的 Intersection Observer API，主動偵測元素何時進入可視範圍，再動態觸發載入行為，提供比原生屬性更高的彈性。

對效能與 SEO 的實質幫助：核心網頁指標的改善

減少頁面初次載入需要處理的資源量，能直接縮短使用者感受到的載入時間，這對行動裝置或網路環境較差的使用者尤其有感。而載入速度正是 Google 核心網頁指標（Core Web Vitals）評估的重要面向之一，屬於實際會影響搜尋排名的技術因子，因此延遲載入不僅改善使用者體驗，也是對 SEO 有實質幫助的技術優化手段。

常見誤區：別把首屏內容也一併延遲載入

延遲載入雖然好處明確，但並非「全站圖片都套用就一定加分」。如果連使用者一打開頁面就應該立刻看到的首屏（above the fold）圖片或關鍵內容也套用延遲載入，反而可能造成畫面短暫空白或明顯的載入延遲，實質上拖累了使用者感受到的載入速度，甚至讓核心網頁指標中的最大內容繪製時間不減反增。建議只針對頁面下方、使用者需要捲動才會看到的內容套用這項技巧。