Chromium browsers support iframe lazy loading now to support performance

[Karlston]

Chromium browsers support iframe lazy loading now to support performance

Google revealed on July 24, 2020 that Google Chrome and Chromium-based web browsers support the lazy loading of iframe content now. The integration of the feature comes right after Google introduced support for the lazy loading of images in Chromium and Chrome. Mozilla's Firefox web browser supports the lazy loading of images as well.

 

Technically speaking, lazy loading keeps the browser from loading certain content until it is accessed by the user. When a page is loaded for the first time, content that is not visible, below the fold, may be lazy loaded. When a user scrolls down, content gets loaded while the scroll action takes place.

 

The lazy loading of iframes in Chromium-based web browsers follows the same methodology. Webmasters need to use the loading="lazy" attribute for iframes in the code of the site to inform the browser that the content should not be loaded right away. Browsers that don't support the functionality will ignore the attribute while browsers that support it will handle the loading accordingly.

image by Google

Google ran a few tests to determine the effect of the lazy loading of iframes. It noted the following:

• 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.

Generally speaking, lazy loading of offscreen iframes leads to 2-3% median data savings, 1-2% first contentful paint, and 2% first input delay.

 

Google notes that there is also potential to use the loading attributes for advertisement on websites.

 

Webmasters need to specify the loading="lazy" parameter to get browsers that support lazy loading to postpone the loading until the content is accessed. It is furthermore possible to use the "eager" parameter to inform the browser that content should be loaded right away, and to use "auto" to let the browser decide.

 

Google implemented an exception into the Lite mode on Chrome for Android. Lite mode, or Data Saver mode, is a special mode supported by Chrome for Android that is been designed to improve the loading performance by using Google servers to load content faster. Offscreen images and iframes are automatically lazy-loaded if Lite mode is active in the Chrome web browser.

Closing Words

Lazy loading's main goal is to speed up the initial loading of a website. The content that is not loaded initially when the site is loaded is loaded when users scroll on the page; this may result in some content being not displayed right away depending on the speed of scrolling and the device's and network's performance.

 

 

Chromium browsers support iframe lazy loading now to support performance