圖片緩載入lazy loading
【圖片緩載入lazy loading】讓網站圖片慢一點載入的方式｜天矽科技網頁設計
圖片緩載入(lazy loading)
Lazy Loading可稱 圖片緩載入、圖片懶載入、元素懶加載、圖片延遲載入 或 圖片延後載入，是一種網頁設計的前端優化技術，是一種讓網站在載入時，不會立即載入所有圖片，而是等到使用者需要看到圖片時再載入的技術，如此便可節省網站開啟時所消耗的流量，並同時提升網站的開啟速度，以減少使用者因沒有耐心而離站的機會。
lazy loading執行方式
簡單來說，網站若沒有使用 lazy loading，如果網站有100張照片，那麼在開啟網站時，網站就會直接把這 100 張照片下載下來，讓使用者能夠進入網站一口氣瀏覽這 100 張照片，但也因為網站需要一口氣下載所有的照片，才會導致使用者必須忍受網站緩慢地開啟速度。
若網站有使用 lazy loading，則可讓圖片在需要被檢視的時候再載入就好，也就是說當使用者捲動畫面並有意繼續瀏覽下方圖片時，lazy loading可監視圖片元素是否進入到畫面中，當元素進入畫面後再將照片載入，以提供使用者瀏覽檢視；如果網站有100張照片，進入網站時僅需下載一開始呈現於畫面中的照片就好(可能15張)，接下來照片只要等使用者有意往下看再載入即可，如此便可減少網站的開啟速度並降低使用者離站的機會，拆開來說就是…
- 刻意不讓照片與圖片正常載入(先載入一開始要呈現的照片就好)
- 監視圖片元素、判斷照片與圖片是否進入畫面
- 當監視的元素被判斷進入畫面後，照片與圖片即可載入
此作法對擁有超多圖片的電子商務網站、工業工程零件網站或社群媒體網站…等，是除了限制上傳的圖片檔案大小外，不可或缺的提升網站載入速度的方式。
▲ 天矽科技案例｜CLA電子商務購物網站
▲ 天矽科技案例｜黑占手機殼電子商務購物網站
圖片緩載入的好處
圖片在載入時，網站通常需要花費大量的流量將圖片下載，當使用者的網路不穩定時，網站的開啟速度一定會非常緩慢、開不起來或出現一堆破圖，因此圖片緩載入(lazy loading)會有幾個相當不錯的優勢與好處。
➤ 節省流量、提升開啟速度
在上方說明中，我們不斷提到網站開啟圖片需要消耗大量的流量並可能導致開啟速度緩慢，因此網站若使用 lazy loading 則可讓原本要一次載入全部圖片的開啟方式變成只需載入必要顯示的圖片，如此當然可節省相當多的流量消耗並提升網站的開啟速度，像 Facebook 就是一個例子。
➤ 降低使用者跳出的機會
根據 2016 年雲端服務供應商 Akamai 針對行動用戶行的分析，發現台灣用戶對上網延遲的忍受度相當低，台灣平均的網頁載入時間為3.4秒，但願意等待網頁載入的時間約為2秒鐘，超過這個時間多數用戶會選擇離開且不會再回到該網頁瀏覽，因此能盡快讓使用者看到網站畫面會是非常重要的一件事。
➤ 提升SEO搜尋排名
網站的開啟、執行與瀏覽速度是相當重要的，除了影響使用者的耐心與檢視意願，更影響SEO的搜尋排名！因為搜尋引擎希望能提供使用者找到良好的搜尋結果，若是難以開啟檢視的網站，搜尋引擎自然不願意推薦，也同時會將SEO分數降低。
不過這裡也要提醒，使用 lazy loading 後，圖片的資訊是否能被搜尋引擎正確的索引收錄並提供給使用者搜尋是一個問題，因為lazy loading是用JavaScript產生的，而搜尋引擎有時候並不會這麼有耐心的去爬「由JS產生的內容」，因此若使用lazy loading來將圖片緩載入，則圖片搜尋流量會發生較低的問題。
圖片緩載入lazy loading的確能有效提升網站的開啟速度、減輕網站開啟時的流量消耗，並降低使用者因網站的開啟速度緩慢、圖片下載速度緩慢或破圖而離開的機會，對SEO也確實有幫助；不過相對的，圖片搜尋流量則有可能會因為lazy loading的關係造成銳減，這裡的解決方式可再思考，哪些頁面需要加入lazy loading？哪些不需要？或是可犧牲圖片搜尋流量來提升網站開啟速度，都是可行的。
