Ben Schwarz
August 16, 2018
A new Chrome feature dubbed "Blink LazyLoad" is designed to dramatically improve performance by deferring the load of below-the-fold images and third party iFrames.
The goals of this bold experiment are to improve the overall render speed of content that appears within the users viewport (also known as above-the-fold), as well as, reduce network data and memory usage. ✨
It's thought that temporarily delaying less important content will drastically improve overall perceived performance.
If this proposal is successful, automatic optimisations will be run during the load phase of a page:
The public proposal has a few interesting details:
The lazy loading attribute will allow authors to specify which elements should, or should not be lazy loaded. Here's an example that indicates that this content is non-essential:
1<iframe src="ads.html" lazyload="on"></iframe>
There are three options:
Feature policy: lazyload will provide a mechanism that allows authors to force opting in or out of lazyload functionality on a per-domain basis (similar to how Content Security Policies work). There is a yet-to-be-merged pull request that describes how it might work.
At this point, it is difficult to tell if these page optimisations could cause compatibility issues for existing sites.
Third party iFrames are used for a large number of purposes like ads, analytics or authentication. Delaying, or not loading a crucial iFrame (because the user never scrolls that far) could have dramatic unforeseeable effects.
Pages that rely on an image or iFrame having been loaded and present when onLoad fires could also face significant issues.
These automatic optimisations could silently and efficiently speed up Chrome's rendering speed without any notable issues for users. The Google team behind the proposal are carefully measuring the performance characteristics of LazyLoad's effects through metrics that Chrome records.
At the time of writing LazyLoad is available in only available in Chrome Canary, behind two required flags:
Flags can be enabled by navigating to chrome://flags in a Chome browser.
As we embark on welcoming the next billion users to the web, it's humbling to know that we are only just getting started in understanding the complexity of browsers, connectivity and user-experience. Be sure to subscribe to see more posts like this.
We will send you the latest web performance articles, tools, case studies and more, so you can become a better performance advocate.