前陣子接到一個需求，客戶網站做完「PageSpeed Insights」檢測後分數很低，於是尋求協助。對客戶網站進行健檢後提供一份報告與建議，客戶詢問「延遲載入畫面外圖片」的部分如何改善。這個項目「PageSpeed Insights」本身提供了不少參考資料，不過研究後才發覺水相當深，本篇為心得記錄整理。
(圖片出處: lozad.js)
一、PageSpeed Insights 測試
1. 測試畫面
下圖為網站經「PageSpeed Insights」檢測後的報告範例：
每個項目 Google 都提供了改善建議，點擊右方的向下箭頭圖示即可展開。而「延遲載入畫面外圖片」上圖可看到若改善的話，可節省 15 秒的載入時間，是非常巨大的優化。此項的改善建議，可進入「Defer offscreen images」這個網頁。
2. 改善建議
這個頁面先顯示了「延遲載入畫面外圖片」可能出現的畫面：
列出進入網站首屏後，螢幕外的圖片有哪些、圖片大小等資訊。如果我們能讓這些圖片先不載入，就能節省大量網頁載入時間。
而如何延遲圖片載入，可藉助「Lazy Load」這類外掛，官方此頁面推薦的外掛為「lazysizes」，接下來介紹運作原理。
二、Lazy Load 運作原理
1. Lozad.js 介紹
Lazy Load 的外掛相當多，其運作原理都是類似的，但請注意要找年份較近、版本比較新的外掛，才能支援最新的瀏覽器技術，效能較佳。
本篇非以 Google 介紹的 lazysizes 來說明，而是另一個外掛「Lozad.js」，原因為：
- 檔案相當小，不佔空間
- DEMO 頁面效果一目了然
2. Lazy Load 原理
- 延遲圖片載入的構思為，讓所有的 img 標籤沒有 src 屬性，圖片自然就無法載入
- 取而代之，將原本
src 的圖片網址，改放在data-src 屬性 - Lazy Load 外掛的工作就是，偵測目前螢幕範圍內有哪些 img 需要顯示，再將這些 img 的
data-src 圖片網址改放到src ，就能讓圖片載入 - Lazy Load 會持續偵測螢幕捲到哪裡，並載入該處的 img
- 而如何偵測網頁的所有圖片，距離螢幕多遠，則利用瀏覽器最新的 Intersection Observer API
3. Intersection Observer API
關於「 Intersection Observer API」，除非我們要自己寫外掛，否則可以忽略這部分如何操作，其介紹可參考這篇「如何用 Intersection Observer API 實作 Infinite Scroll/Lazy Loading」的說明即可。
4. Lazy Load 效果
可進入「Lozad」的展示頁面：
當捲動螢幕，載入其他圖片時，右上角會顯示目前載入了什麼圖片：
每捲動一次，便會顯示載入了不同圖片，這就是 Lazy Load 的絕佳展示效果。
如果沒有使用 Lazy Load 外掛的話，進入網站會一次載入所有圖片，有可能導致網頁效能不佳，出現前面「PageSpeed Insights」的不良效果報告。
5. 實作
Lazy Load 的原理幾句話就說完了，但要實作的話就會發現很痛苦，因為在使用外掛之前，得自行將網站的所有圖片，也就是 img 標籤的
三、實作困境
1. 一頁式、形象網站
比較有可能做到的是「一頁式、形象網站」這類網站，因為網站內容變動較少，img 標籤可以一次處理。
但日後若需增加內容、且有圖片時，所有圖片也需將 src 改為 data-src。
2. 部落格網站
部落格類的網站就麻煩了，除了新文章得改 img 格式，所有舊文章的 img 如何處理將十分頭疼。
3. 動態生成的內容
一些常見的網站小工具例如「最新文章」、「熱門文章」、「相關文章」、「輪播」等等，會用 js 動態產生縮圖。如果這些圖片也需考慮延遲載入的話，那麼得全部修改這些工具的 js 程式碼，讓圖片的 src 都改成 data-src，並且每個外掛都得個別執行一次 Lazy Load，才能產生延遲載入的效果。
四、SEO 問題
1. 圖片能否被搜尋引擎索引
使用 Lazy Load 效果後，背後隱藏的問題為，網站的圖片資訊能否被搜尋引擎正確收錄。
img 缺少正確 src 後，搜尋引擎來爬的時候如果沒抓到，網站會失去「圖片搜尋」而來的流量。
如果網站的「圖片搜尋流量」佔比很低，那麼這點損失應該是可以承受的。
2. 搜尋引擎不保證索引 js 生成內容
其實 Google 有能力索引 Lazy Load 動態產生的圖片 src 內容，運氣好的話，網站並不會損失「圖片搜尋流量」。
然而這也要看網站權重，並不是每個網站 Google 都有耐心去爬 js 產生的內容，所以使用 Lazy Load 後，心理上做好準備得不到「圖片搜尋流量」會比較好。
3. noscript
SEO 界有個技巧，把 js 動態生成的原始內容，放一份在
五、Chrome 原生 Lazy Load
1. 瀏覽器內建功能
這是一年前 2019 的消息：「Chrome 75 將原生支援 lazy loading」，意思就是說，不需安裝任何外掛，Chrome 就能讓圖片有 Lazy Load 效果。
同時也可參考 Google 的英文說明「Native lazy-loading for the web」，這裡提供了 DEMO 頁面，可實際看到 Lazy Load 效果。
這功能生效的話真的非常棒，因為：
- 再也不需圖片 img 的
src 扭曲成data-src ，少了很多麻煩事 - img 一定可被索引，不影響圖片 SEO
- 不需另外安裝、執行外掛
- 但是仍需要為 img 加上屬性
loading="lazy"
只是不能高興太早，因為並非所有瀏覽器都支援原生 Lazy Load 參數。
2. 效果測試
不過我還是測試了一下，想體驗 Chrome 的原生 Lazy Load 效果如何，結果試不太出來...
Google 了一下，發現很多人跟我有同樣遭遇，可參考這個討論串「Native lazy-loading not working even with flags enabled」，摘要一下：
- 這功能用 Chrome 試不出來，FireFox 反而有效果
- 推測 Chrome 比 FireFox 在更早的時候就載入圖片
- 經實驗，Chrome 遠在 3200px 之前的距離就載入圖片了
難怪我沒看到效果，因為我的測試網頁沒有 3200px 這麼長。
不過如果是以圖片為主的部落格，例如美食、旅遊，因為圖片多網頁自然很長，就適合使用原生瀏覽器的 Lazy Load 功能了。
六、總結
我發現要對這篇的探勘做出結論還滿困難的，每一條路的結果都不算最佳解，而且也都不輕鬆。
也許以下的作法，會是我認為 CP 值比較高、比較有彈性的構想：
- 一頁式、形象網站：適合進行 Lazy Load 這樣的大工程，對所有 img 標籤進行修改
- 部落格網站：
- 文章以外的區塊若有圖片，進行 Lazy Load 優化
- 文章區塊不強求使用 Lazy Load 效果，取而代之的是，對所有圖片進行瘦身
- 圖片長寬尺寸不要過大，圖片都要經過壓縮，盡量單檔都在 100k 以下
- 只要圖檔不大，那麼圖片有無延遲載入，對網頁載入的負擔都不會太大
- 如果某個單獨頁面的圖片太多，再對該頁面進行優化，實施 Lazy Load 為佳
- 圖片多的網站，盡量在製作新的文章(頁面)時，使用瀏覽器原生的 Lazy Load 參數
優化網站效能 相關文章：
原來還有Intersection Observer API這種用法，真是漲知識了
回覆刪除我之前在其他專案上要算現在畫面跟某個元素的距離，發現做起來超級困難。
特別是如果元素的position是relative的時候，取getBoundingClientRect() 算起來都會怪怪的
下次我就來試試看Intersection Observer API吧，感謝！
也就是說，如果採用Lazyload，會對Google圖片搜尋SEO有影響？
回覆刪除如果不用就對網頁載入速度有影響，如果使用又會有機會不利於 Image search SEO，魚與熊掌
我的網站是 www.buydomdom.com，每個方法將測試兩個月，再作出結論