Google Chrome now supports lazy loading iframes for speeding up page loads
The increase of web traffic from mobile users and people around the globe with limited connection capabilities pushed the companies and developers to heavily optimize website loading speeds. Traditionally, when you navigate to a web page, it downloads and displays all the content available: images, icons, GIFs, styles, scripts, and so on. As you can imagine, loading all that stuff causes a delay as the website starts up, especially for users on slow connections. Google has been trying to eliminate this problem for a while. Just last year, they added image lazy-loading feature in Google Chrome 76. Now, Google is bringing the same functionality to iframes.
Lazy loading loads the contents of the web page on-demand, meaning that they won’t be downloaded and displayed until you scroll down and get them in the view, thus decreasing the initial website startup speed. As mentioned, the lazy loading of images has been available on Chrome since last year, but now developers can use the same method on iframes, too. To implement it on your own website, all you have to do is add loading=”lazy” attribute to your images and/or iframe elements. Browsers like Firefox and Safari have already implemented the native image lazy loading feature. As for the iframes, they are still working to fix a couple of bugs. Google also mentioned that Chrome for Android in Lite mode automatically lazy loads offscreen images and iframes.
Ironically, during the testing of how YouTube video embeds (which are iframe-based) would influence the web page loading speed when lazy-loaded, the Chrome team found out that they “saved 10 seconds off of how soon our pages could be interactive on mobile devices.” Needless to say, lazy-loading has real advantages over the traditional method of downloading the whole contents of the web page as soon as you visit it.