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

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

網頁結構越來越複雜，需要載入的物件也越來越多，該如何降低首次連入網頁的延遲，對於使用者體驗影響不小。目前跨網頁瀏覽器的做法為埋入一小段 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!

（本文由 T客邦 授權轉載；首圖來源：shutterstock）