最近在看一些網站的效能報告… 發現很多網站圖片都超多，然後速度就… 嗯，你知道的。😅
很多人就用了圖片延遲加載 (Lazy Loading)，想說這樣頁面一開始會快一點。但問題來了，這樣做對 SEO 到底是好是壞？這問題其實蠻值得聊聊的。🤔
重點一句話
簡單講：用對了，就是加分；用錯了，比不用還慘。 關鍵在於，你要確保 Google 的爬蟲看得到你那些「延遲出現」的圖片。就這麼簡單，也這麼複雜。
實際影響是好是壞？來看證據
以前啊，大家很怕用 lazy load，因為舊的 Googlebot 對 JavaScript 的處理能力沒那麼好，它可能只看到一堆空白，然後就… 判定你這頁沒內容。但現在情況不太一樣了。
現在的 Googlebot 會執行大部分的 JavaScript，所以只要你的 lazy load 寫得不太差，Google 是能看到圖片的。重點反而轉移到另一個東西上面了：Core Web Vitals。
你想想，延遲載入可以讓頁面「初始」載入速度變快，因為不用一次把所有圖片都下載回來。這對 LCP (最大內容繪製) 可能有幫助，特別是如果你的最大內容是文字的話。但… 如果你沒處理好，一個最討厭的問題就會出現：CLS (累計版面配置轉移)。
就是那種，你正要點一個按鈕，結果上面突然載入一張圖片，整個頁面往下跳，你點到別的東西。超煩，對吧？使用者不喜歡，Google 也不喜歡。所以，lazy load 是一把雙面刃，它改善了初期的載入時間，但可能搞砸了頁面的穩定性。
那…到底要怎麼做？
方法主要就兩種啦，一種是「原生」的，一種是靠「JavaScript」。
我自己是比較偏愛原生的，因為最簡單，也不容易出錯。基本上就是在你的 `` 標籤裡多加一個屬性：`loading="lazy"`。就這樣，沒了。瀏覽器自己會決定何時要去載入這張圖。現在主流瀏覽器都支援，很方便。
另一種就是用 JavaScript，最有名的就是 `IntersectionObserver API`。這種方法比較有彈性，你可以自己決定圖片在進入畫面「前」多少距離就開始載入，或是加上一些淡入的動畫效果。不過… 程式碼比較複雜，如果你的網站本身 JS 就很多很亂，可能會有效能或衝突問題。
老實說，除非你有很特殊的客製化需求，不然用原生的 `loading="lazy"` 就夠解決 90% 的問題了。
| 比較項目 | 原生延遲載入 (Native) | JavaScript 延遲載入 |
|---|---|---|
| 實作難度 | 超簡單。就加個屬性，複製貼上而已。 | 嗯…需要寫程式，或是裝外掛。有點門檻。 |
| 瀏覽器支援 | 現在大部分都支援了。舊的 IE 那種就算了吧… | 基本上都行，因為是 JS 嘛。但要確保程式碼沒寫錯。 |
| 客製化彈性 | 幾乎沒有。就是讓瀏覽器自己決定。 | 彈性很大。可以做動畫、提早載入、追蹤載入狀況等等。 |
| SEO 風險 | 很低。這是 Google 推薦的標準作法。 | 比較高。如果 JS 失敗或寫法不對，爬蟲可能看不到圖。 |
不同情境，用法也不同
這東西不是無腦全站套用的。你要看情況。
- 部落格文章：內文裡面的圖片，非常適合用 lazy load。因為使用者一定是往下捲動才會看到。
- 電商網站：商品列表頁的那些小圖，可以用。但商品「詳情頁」那張最大的主圖，千萬不要用！那通常是使用者第一眼就要看的東西。
- 首頁或活動頁：道理一樣，在畫面「第一屏」(Above the fold) 就會看到的任何圖片，特別是主視覺 (Hero Image)，絕對不能延遲載入。用了反而會變慢，因為瀏覽器得先等一下，才發現「喔，原來這裡有張圖」，然後才開始載入。
說到這個，Google 的官方文件寫得很清楚，建議不要對首屏內容延遲載入。 但我之前看過一個台灣電商技術團隊的分享，他們發現對台灣普遍的行動網路環境來說，就算是一些接近首屏的次要圖片，用了 lazy load 對於降低使用者跳出率還是有幫助的。他們的結論是，你得在「速度」跟「CLS 風險」之間做取捨，而且要一直測試。
用錯了會怎樣？這些坑要避開
來，說說最容易踩的幾個雷。
第一個就是我剛一直唸的 CLS (版面配置轉移)。解法其實很簡單：永遠在你的 `` 標籤上，或是用 CSS，指定好圖片的 `width` 和 `height`。這樣瀏覽器在圖片還沒載入前，就會先留一個一樣大小的空位。等圖片來了，就剛好放進去，頁面就不會跳動了。
第二個坑，就是把首屏圖片也 lazy load。這真的很多人犯錯… 特別是有些 WordPress 外掛會無腦把全站圖片都加上 lazy load，結果最重要的那張圖反而變慢了。記得要去手動排除掉。
第三，如果用 JavaScript 做，要小心備援機制。例如用 `
常見錯誤與修正
整理一下好了，感覺有點亂…
- 錯誤：把 Logo、網站主視覺 Banner 也延遲載入。
修正：手動把這些在首屏一定會出現的圖片，從你的 lazy load 規則或外掛設定中排除。 - 錯誤：`
` 標籤沒有寫 `width` 和 `height`。
修正：不管是寫在 HTML 裡還是用 CSS 的 `aspect-ratio`，想辦法在圖片載入前就撐開空間。 - 錯誤：圖片是透過點擊按鈕之類的互動才載入，而且 HTML 裡完全沒有圖片的 URL。
修正：確保圖片的 URL 至少存在 `` 的 `src` 或 `data-src` 屬性中，讓爬蟲能發現它。
總之，Lazy Loading 是個好工具，但需要細心一點去用。不是裝個外掛就沒事了。你自己的網站有用 Lazy Loading 嗎？是自己寫的還是用外掛？有沒有踩過什麼坑？留言分享一下吧 👇
