Chrome現已支持延遲加載網頁中的iframe元素
一年前,谷歌為Chrome 76引入了延遲加載圖片的功能。昨日,Chrome工程主管Addy Osmani又宣布,他們將在新版瀏覽器中啟用延遲加載iframe元素的標準功能。在啟用<iframe loading = lazy>屬性之後,Chrome將推遲相關元素的加載,直到用戶將網頁滾動到附近為止。
(來自:Web Dev)
Andy Osmani 表示:“很高興向大家分享已經標準化的iframe 本機延遲加載優化功能,其現已在Chrome 和基於Chromium 的瀏覽器中得到支持”。
據悉,iframe 延遲加載有助於減少內存使用量、提升頁面其它部分的加載速度並保存數據。
儘管來自Twitter、Facebook 和YouTube 的第三方嵌入元素將不會在被用戶看到前立即可見,但傳統網頁加載方式仍會消耗大量的數據和處理時間。
在啟用iframe 延遲加載之後,Chrome 團隊得以節省2-3% 的中位數據量、1-2% 的首次內容渲染、以及2% 的首次輸入延遲(FID)。
Lazyload iFrame-Compressed(via)
目前Chrome 已支持三種屬性值:
● lazy:延遲加載的理想選擇。
● eager:立即加載(非延遲加載的理想選擇)。
● auto:由瀏覽器來決定是否延遲加載。
博客文章指出,在YouTube 上加載嵌入內容的時候,可讓移動設備的互動時間節省10 秒。
Instagram和Spofity仍會在初始加載時處理嵌入式內容,但壓縮後可節省>100KB和51 4K B 。
此外現在Facebook 上的所有社交插件都已支持在本機瀏覽器執行iframe 元素的延遲加載。
不過需要指出的是,精簡模式下的Chrome for Android 瀏覽器,仍會自動加載當前顯示窗口之外的圖片和iframe 元素。