Google Chrome, and all web browsers that rely on the Chromium base like Microsoft’s new Edge, Opera, Vivaldi, Brave, and more, will now support a new feature that will help improve the overall performance. These browsers have now the ability to support the ‘lazy loading of iframe content’. The new feature should assist in balancing out and improving the performance of these web browsers by intelligently arranging and scheduling the loading of web content.
Google has improved the Chromium base that powers some of the most popular web browsers. The core now supports ‘iframe lazy loading’. The feature is important for loading large web pages with a massive amount of content. Lazy loading prevents the simultaneous loading of content, which burdens the browser. Additionally, simultaneous loading can negatively impact the performance of web browsers and eventually, the PC.
Chromium’s Feature ‘iframe Lazy Loading’ Feature To Ensure Smooth Operation Of Web Pages In Browsers:
Google has confirmed that the Chromium-based which powers not only its own Google Chrome web browser but also several other browsers, now supports the lazy loading of iframe content. The new feature comes right after Google introduced support for the lazy loading of images in Chromium and Chrome recently. Simply put, now not only the images and multimedia content load selectively but also the core content that’s usually arranged inside iframes.
From a technical perspective, lazy loading restricts the browser from loading certain content until it is accessed by the user or is in the scrolling range. When a page is loaded for the first time, content that is not visible, below the fold, can be “lazy loaded”. When a user scrolls down, content gets loaded while the scroll action takes place.
— ghacksnews (@ghacks) July 25, 2020
The “lazy loading of iframes” feature in Chromium-based web browsers follows the same technique. However, it is important for webmasters or website designers to use the loading=”lazy” attribute for iframes in the code of the site. This attribute informs the browser that the content should not be loaded right away and can be loaded as per the scrolling pattern.
Needless to add, until recently, browsers that did not have the support of ‘lazy loading’ would completely ignore the attribute and loaded as much content as possible or accessible. This puts some pressure on the web browser and eventually the PC or internet-enabled device, be it a smartphone, tablet, etc. While devices with a large amount of RAM and a powerful CPU wouldn’t have much effect from the browser loading a lot of content simultaneously, devices with limited or low RAM and lightweight CPU could have been negatively impacted.
On the other hand, browsers that support ‘lazy loading’ will handle the loading accordingly. Incidentally, Mozilla Firefox had the ability to support the feature ever since its version 75 was released. Firefox is currently on version v78 (stable).
How Much Positive Impact Does Lazy Loading Have On Web Browsers?
Google ran a few tests to judge the impact of the lazy loading of iframes on web browsers. Following are the observations:
- Lazy loading of YouTube embeds would save about 500 Kilobytes on the initial page load.
- On Chrome.com, Google managed to reduce the load time by 10 seconds on mobile devices when it added the lazy attribute to YouTube embeds on the page.
- Lazy loading Instagram embeds save about 100 Kilobytes on initial load.
- Lazy loading Spotify embeds saves 514 Kilobytes on initial load.
I’m really excited for native image lazy-loading for the web! https://t.co/9TRTnSmjti
Start adding loading="lazy" attributes to your <img> and <iframe> tags! 🤩 pic.twitter.com/roW75mxR6Q
— Jeffrey Bennett ❤🧡💛💚💙💜 (@PickJBennett) April 12, 2019
While the results can vary, lazy loading of offscreen iframes usually leads to 2-3 percent median data savings, 1-2 percent first content-full paint, and 2 percent first input delay. Google also noted that there is potential to use the loading attributes for advertisements on websites. Simply put, Google may have indicated how it could use the feature to selectively load advertisements.