<iframe src="https://example.com" loading="lazy" width="600" height="400"></iframe>
This feature delays the loading of the iframe outside the window until the user scrolls the webpage to a nearby location. This can save data, speed up the loading of other parts of the page, and reduce memory usage.
The Chrome team’s research shows that lazy iframe loading can save 2-3% of the median data volume, 1-2% of the first content rendering, and 95% of the position can save 2% of the first input delay (FID).
Currently the loading has supported three attribute values:
- lazy: Ideal for lazy loading.
- eager: Load immediately (ideal for non-lazy loading).
- auto: The browser decides whether to delay loading.
Osmani said that when it loads embedded content on YouTube, it saves 10 seconds of interaction time on mobile devices. Instagram and Spofity will still process embedded content during initial loading, but save >100KB and 514KB respectively after compression.
And, all Facebook social plug-ins now support the native browser to delay loading iframes. It finally concluded that the support for lazy loading of iframes will allow users to greatly easily improve the performance of web pages.
It is worth mentioning that Chrome for Android will still automatically delay loading pictures and iframes outside the window in Lite mode. For more details, please check the official blog .