Chrome Now Supports Native iframe Lazy-Loading
https://web.devChrome has just rolled out browser-level native lazy-loading for iframes, this is similar to the native lazy loading for images that were previously rolled out. Now, all that social media embeds, Youtube embeds, Google map embeds, won’t have a give you a huge performance hit ?
Native lazy-loading of iframes defers offscreen iframes from being loaded until the user scrolls near them. This saves data, speeds up the loading of other parts of the page, and reduces memory usage.
All you have to do is use the loading
attribute which allows a browser to defer loading offscreen iframes and images until users scroll near them. loading
supports three values:
lazy
: is a good candidate for lazy-loading.eager
: is not a good candidate for lazy-loading. Load right away.auto
: browser will determine whether or not to lazily load. ( auto is currently a non-standard value )
As for browser support, most modern browsers support it except Safari, it’s a hidden feature for them which means it’s being tested and we may soon have it on Safari as well.