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
The goals of this bold experiment are to improve the overall render speed of content that appears within a user’s viewport (also known as above-the-fold), as well as, reduce network data and memory usage. ✨
If you're looking to add lazy loading to your site's media right now, you'd be smart to include these native lazy loading attributes, but as of this update (July 2019), support in stable browsers in non-existent still. You'll want to look at doing more:
👨🏫 How will it work?
It’s thought that temporarily delaying less important content will drastically improve overall perceived performance.
If this proposal is successful, automatic optimizations will be run during the load phase of a page:
- Images and iFrames will be analysed to gauge importance.
- If they’re seen to be non-essential, they will be deferred, or not loaded at all:
- Deferred items will only be loaded if the user has scrolled to the area nearby.
- A blank placeholder image will be used until an image is fetched.
The public proposal has a few interesting details:
- LazyLoad is made up of two different mechanisms: LazyImages and LazyFrames.
- Deferred images and iFrames will be loaded when a user has scrolled within a given number of pixels. The number of pixels will vary based on three factors:
- If it is an iframe or an image
- Data Saver is enabled or disabled
- The "effective connection type"
- Once the browser has established that an image is located below the fold, it will issue a range request to fetch the first few bytes of an image to establish its dimensions. The dimensions will then be used to create a placeholder.
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:
<iframe src="ads.html" loading="lazy"></iframe>
There are three options:
on- Indicates a strong preference to defer fetching until the content can be viewed.
off- Fetch this resource immediately, regardless of view-ability.
auto- Let the browser decide (has the same effect as not using the
loadingattribute at all).
🔒 Implementing a secure lazy loading policy
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.
🤔 What about backwards compatibility?
At this point, it is difficult to tell if these page optimizations 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 optimizations 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.
💻 Enabling Lazy Loading in Chrome
At the time of writing, native lazy loading is only available in Chrome Canary, behind two required flags:
Flags can be enabled by navigating to
chrome://flags in a Chrome browser.
📚 References and materials
- LazyLoad public proposal
- HTML Living Standard Pull Request - lazyload attribute
- HTTP Range Requests
- Chrome Platform Status - Feature policy: lazyload
- LazyLoad Frames was merged into Chromium (minutes after publishing)
- Calibre performance monitoring
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Mobile / Tablet
|iOS Safari||Opera Mobile||Opera Mini||Android||Android Chrome||Android Firefox|
👋 In closing
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.