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.
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.
Now You: Lazy loading, yay or nay, what is your take? (via Techdows)
Chromium has had these flags for quite a while now.
Ahhhh . . . I haven’t found lazy loading to be doing much other than leaving grey boxes on sites which means the developer may not have the configuration correct. I looked at the sample code. One couldn’t really make a mistake. What does make Chrome a bit faster are some flags:
Enable Experimental QUIC Protocol
Enable Parallel Downloading
Zero-Copy Rasterization
Maybe these are all enabled by default; don’t think so.
Scary thought–I’m starting to use Chrome more than Firefox!
@Yuliya, unless your on a satellite (W)LAN Network with only 10 GB a month data limit like me maybe it would help. I wonder if Falkon browser will also include this feature?
iframes are used for spam most of the time. Now your spam will load up to 2x faster! Maybe Google can add popup acceleration next.
Chromium best browser :3 Much better than alternatives.
Though, seriously, this feature is welcomed on mobile/metered networks. I don’t see any use of this on a (W)LAN network.
Is it maybe a good idea that there should be a mode that gives you different possibilities for different operating systems.
There should be a switch for slow, medium, or high internet connection speed. This be a really great feature for a slow telephone line, a slow cable, Wifi 4 G or 5 G, or even a fiberglass cable (255 Tbit/s, or 32 TB per second.), etc?
Like Android -, Apple, Linux and all other phones who are connected with the internet thru 4G – or 5G WIFI. Or laptops and tablets connected with 4G – or 5G wifi.
I am not reading there is that possibility build in so when necessary you can flip the switch?
Is there maybe already a Firefox add-on who does such a thing?
There are Connection status API and Client Hints, which can be used to differentiate devices and connection speeds and then let JS insert images with either attribute.
However, making a site fast on slow networks in general might be better than to try and exhaust all network resources on fast devices and networks.
Chrome 85: Throttle back
Chrome 85 will drastically curtail the amount of power background tabs consume by throttling them to a maximum of only 1% of CPU time. And background tabs will only be allowed to “wake up” – to repaint the page, for instance – once per minute.
Administrators will be able to control this throttling with the IntensiveWakeUpThrottlingEnabled policy.
https://www.computerworld.com/article/3378017/fast-forward-whats-coming-in-future-versions-of-chrome.html
In light of google actively encouraging websites to develop against only Chrome, this looks anticompetitive.
Consider that websites and web scripts currently use lazyloading scripts. Those work across all browsers unless badly coded. This change would make any website that targets chrome able to remove the lazyloading libraries that worked across browsers – this way theyd load fast on chrome, whereas theyd load the full webpage on firefox (“slow”).
Firefox already supports lazyloading. Consider reading the article next time.