After supporting the lazy loading of images, Chrome if you use <iframe loading=lazy> attribute, postpones loading of iframes until the user scrolls nearer to them.
A year back, Google added Lazy loading support for images to Chrome in version 76. Chrome Eng manager, Addy Osmani yesterday announced Chrome and Chromium browsers now support Lazy Loading of iframes and says its a standard now.
“We are happy to share that native lazy-loading for iframes is now standardized and is also supported in Chrome and Chromium-based browsers,” Osmani said.
Native lazy loading of iframes reduces memory usage, speeds up other parts of the page, and saves data.
Third-party embeds from Twitter, Facebook and YouTube videos don’t visible immediately in the viewport but costs the user data even when the user doesn’t scroll to them.
Chrome team’s research reveals, iframes lazy loading could save 2-3% median data, 1-2% First-contentful paint reductions at the median, and 2% First Input Delay (FID) improvements at the 95th percentile.
.The loading attribute supports three values:
- lazy: is a good candidate for lazy-loading
- eager: is not a good candidate for lazy-loading. Load right away.
- auto: the browser will determine whether or not to lazy load.
According to the blog post, Lazy loading youtube embeds on Chrome.com lead to 10 seconds reduction in reduction time to interact on mobile.
Similarly, lazy loading Instagram and Spotify embeds on initial load, saved >100KB gzipped, and 514KB.
All Facebook social plugins now support native browser lazy-loading iframes.
It’s worth noting that Chrome for Android in Lite mode automatically lazy loads offscreen images and iframes.
Related articles:
Firefox 75 adds Lazy Loading for Images
Native Lazy Loading comes to Chrome 76
Chrome’s Lite mode to Sync with Android’s Data Saver Mode
Chrome in Lite Mode to Play Streaming Videos in Low Resolution to Save Data