Chrome 75 將原生支援 lazy loading，動動手也可以搶先試玩

不少網站包含電腦王，都會在網頁當中埋入延遲載入的 JavaScript 程式碼，以便降低首次載入的圖片數量，加快網頁首次呈現時間。Google Chrome 已預定在 75 版本當中原生支援這項功能並自動啟動，包含 lazy image loading 和 lazy iframe loading。

網頁結構越來越複雜，需要載入的物件也越來越多，該如何降低首次連入網頁的延遲，對於使用者體驗影響不小。目前跨網頁瀏覽器的做法為埋入 1 小段 JavaScript 程式碼，延後載入顯示視區以外的物件，等到使用者滑動頁面，接近視區時才會向伺服器發出請求並下載，此種做法可有效降低首次進入網頁的載入時間。

▲lazy loading 不僅讓網頁顯示時間縮短，也可以減少一開始的資料傳輸量。

Google Chrome 網頁瀏覽器將從 75 版本號開始，原生支援 <img>、<picture> 裡的 srcset、<iframe> 等 lazy loading 延遲載入，無須另外透過撰寫 JavaScript 支援，原生處理速度更快。網頁開發者有 3 種選項，分別為 loading="lazy"、loading="eager"、loading="auto"。

loading="lazy" 就如同現在的處理方式，當使用者捲動網頁至接近視區時才會載入，loading="eager" 則是要求瀏覽器立即下載載入，loading="auto" 則是交由網頁瀏覽器自行決定載入時機點。由於 Google Chrome 預計是第一個導入原生 lazy loading 的網頁瀏覽器，若是網頁開發者欲達成跨瀏覽器相容性，則必須額外加入判斷語法 if ('loading' in HTMLImageElement.prototype)，在 else{} 段落填入原本用以 lazy loading 的 JavaScript。

▲Google Chome 桌面版 73 版已加入 lazy image loading和lazy iframe loading 實驗性功能，於網址列鍵入 chrome://flags 即可找到。

lazy loading 還可以降低剛開始載入網頁的流量，因此 Google Chrome 這項功能一開始其實是從 Android 版本進行試驗，如今桌面版本也放在 chrome://flags 實驗功能選單當中，使用者可自行選擇是否先行開啟該功能。另外一家 Mozilla Firefox 目前僅支援新分頁內容的延遲載入，當使用者確實點擊新分頁使其顯示在最上層，才會開始載入該分頁內容，至於是否原生支援圖片或是 iframe 的延遲載入，目前並未有任何風聲傳出。

參考資料

Intent to Ship: Lazily load below-the-fold images and iframes

Native image lazy-loading for the web!