It’s no secret that we’re a huge fan of lazy loading your below-the-fold images to improve page speed. In fact, some were pretty upset that we practically insulted you if you weren’t doing it. But now it appears the Google Chrome team has jumped aboard and is planning to implement it natively in an upcoming Chrome release. Exciting!
The news was released just last week when Addy Osmani, a Chrome Engineering Manager, tweeted about the future plans.
Native <img> lazy-loading is coming to the web! … <img loading=lazy> defers offscreen images until the user scrolls near them. Shipping in Chrome ~75
He then later detailed it in a blog post of his own, which includes examples and a demo:
How to use it
The new ‘loading’ attribute will be supported on images and iframes, and can contain one of these values:
- lazy: loads when the user scrolls near it
- eager: loads right away (default browser behavior)
- auto: leave it up to the browser to decide when to load it
When can we use it?
While this feature was proposed back in January 2018, it wasn’t until recently that they decided it was happening. There’s no official date other than saying ‘about Chrome 75.’
The current stable version of Chrome at the time of this writing is 73, with version 74 in beta and 75 being in development. Given the pace of Google is to release a new stable version every 1-2 months, we can be confident that Chrome 75, with the native lazy-loading, will be released to the public before the end of this year, 2019. Optimistically it’ll happen this summer.
Performance Enthusiasts Rejoice!
While this is not part of the HTML spec, and other browsers such as Firefox and Safari have yet to comment on it, it’s a step in the right direction and hopefully others will follow.
Think of all the bandwidth that’s going to be saved by not loading images until they’re within reach, especially on mobile. I’m celebrating!