一年前,谷歌曾在 Chrome 76 中添加了對(duì)圖片的延遲加載支持。近日,ChromeEng 經(jīng)理 Addy Osmani 則宣布,該團(tuán)隊(duì)已將 iframe 的延遲加載作為標(biāo)準(zhǔn)功能,添加至了 Chrome 瀏覽器和 Chromium 瀏覽器中。
<iframe src="https://example.com" loading="lazy" width="600" height="400"></iframe>
該功能會(huì)延遲窗口外 iframe 的加載,直到用戶(hù)將網(wǎng)頁(yè)滾動(dòng)到附近為止。此舉可以節(jié)省數(shù)據(jù)、加快頁(yè)面其他部分的加載速度,并減少內(nèi)存使用量。
Chrome 小組的研究表明,iframe 延遲加載可以節(jié)省 2-3% 的中位數(shù)據(jù)量、1-2% 的首次內(nèi)容渲染、以及在 95% 的位置上可以節(jié)省 2% 的首次輸入延遲(FID)。
目前該 loading 已支持三種屬性值:
lazy:延遲加載的理想選擇。
eager:立即加載(非延遲加載的理想選擇)。
auto:由瀏覽器來(lái)決定是否延遲加載。
Osmani 表示,當(dāng)其在 YouTube 上加載嵌入內(nèi)容時(shí),可讓移動(dòng)設(shè)備的互動(dòng)時(shí)間節(jié)省 10 秒。而 Instagram 和 Spofity 仍會(huì)在初始加載時(shí)處理嵌入式內(nèi)容,但壓縮后分別可節(jié)省 >100KB 和 514KB。
并且,現(xiàn)在所有的 Facebook 社交插件都支持本機(jī)瀏覽器延遲加載 iframe。其最后得出結(jié)論稱(chēng),對(duì)延遲加載 iframe 的支持將使得用戶(hù)可以大大輕松地提高網(wǎng)頁(yè)的性能。
值得一提的是,Chrome for Android 在 Lite 模式下仍會(huì)自動(dòng)延遲加載窗口外的圖片和 iframe。更多詳細(xì)內(nèi)容可查看官方博客。