谷歌將在新版瀏覽器中啟用延遲加載 iframe 元素的標準功能

一年前，谷歌為 Chrome 76 引入了延遲加載圖片的功能。 昨日，Chrome 工程主管 Addy Osmani 又宣布，他們將在新版瀏覽器中啟用延遲加載 iframe 元素的標準功能。 在啟用屬性之后，Chrome 將推遲相關元素的加載，直到用戶將網頁滾動到附近為止。

Andy Osmani 表示：“很高興向大家分享已經標準化的 iframe 本機延遲加載優(yōu)化功能，其現(xiàn)已在 Chrome 和基于 Chromium 的瀏覽器中得到支持”。

據悉，iframe 延遲加載有助于減少內存使用量、提升頁面其它部分的加載速度并保存數據。

盡管來自 Twitter、Facebook 和 YouTube 的第三方嵌入元素將不會在被用戶看到前立即可見，但傳統(tǒng)網頁加載方式仍會消耗大量的數據和處理時間。

在啟用 iframe 延遲加載之后，Chrome 團隊得以節(jié)省 2-3% 的中位數據量、1-2% 的首次內容渲染、以及 2% 的首次輸入延遲(FID)。

Lazyload iFrame-Compressed( via )

目前 Chrome 已支持三種屬性值：

● lazy：延遲加載的理想選擇。

● eager：立即加載(非延遲加載的理想選擇)。

● auto：由瀏覽器來決定是否延遲加載。

博客文章指出，在 YouTube 上加載嵌入內容的時候，可讓移動設備的互動時間節(jié)省 10 秒。

Instagram 和 Spofity 仍會在初始加載時處理嵌入式內容，但壓縮后可節(jié)省 >100KB 和 51 4K B 。

此外現(xiàn)在 Facebook 上的所有社交插件都已支持在本機瀏覽器執(zhí)行 iframe 元素的延遲加載。

不過需要指出的是，精簡模式下的 Chrome for Android 瀏覽器，仍會自動加載當前顯示窗口之外的圖片和 iframe 元素。