What is Chrome Native Lazy-Loading?

The official announcement went out at the beginning of April 2019: support for natively lazy-loading images and iframes is going to be automatically enabled at a browser-level, starting from Chrome 76.

This news raised enthusiasm within the web performance community, and with good reason: lazy-loading is a very beneficial technique that can improve your users’ experience and the overall web performance of your site.

At WP Rocket, we started implementing our lazy-loading system since the beginning of (our) time: this is a feature we’re really proud of and that we keep improving month after month.

That’s why, since the first time this topic was brought forward by Addy Osmani, we started asking ourselves how we could enable support for native lazy-loading in WP Rocket:

Addy Osmani announced Chrome's native lazy-loading in April 2019 on Twitter
Addy Osmani announcing native image lazy-loading on Twitter

To spoil the ending for you, let’s say this off the bat: we eventually decided not to support native lazy-loading by default.

To understand the reasons behind this decision, keep reading!

First Things First: What Is Lazy-Loading?

If you landed on this blog post without previous knowledge of the topic of this discussion, no worries, we got you covered. 😎

Lazy-loading is the technique that defers the loading of non-critical resources (images, in our case), leaving them ”off-screen” until you need them.

Images or iframes load on the page only when users need to display them.

In this way, your users won’t have to wait for the loading of all the elements on the page and, therefore, can start enjoying the web page sooner.

If you use lazy-loading on your site, only above-the-fold images will load; the rest will be fetched as soon as the user scrolls the page.

Technically speaking, lazy-loading works thanks to a JavaScript that checks the current viewport of your visitors and only loads images (almost) visible to them.

Lazy-loading only comes into play when visitors reach your images as they scroll down the page. For example, if they never reach the images, they don’t need to load them. 

This saves the user bandwidth because they won’t have to download all your images; furthermore, the user can browse your site a lot faster.

In a nutshell, lazy-loading is a brilliant way of optimizing both perceived and real performance. To read more about how it works, check out our in-depth guide about the benefits of lazy-loading.

What Is Native Lazy-Loading?

Initially, lazy-loading could only work through a plugin or programmatically.

That’s what WP Rocket’s LazyLoad feature does!

Native lazy-loading means that the technique described above is taken in charge by the browser itself, instead of a plugin.

At the moment of this writing, native lazy-loading is supported in Chrome 76 and any Chromium 76-based browsers.

With Chrome 76, Google implemented the possibility to use the new loading attribute to lazy-load resources.

This is how they describe it:

“In Chrome 76, you can use the loading attribute to completely defer the loading of offscreen images and iframes that can be reached by scrolling:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

<iframe src="https://example.com" loading="lazy"></iframe>

Here are the supported values for the loading attribute:

auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
– lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
eager: Load the resource immediately, regardless of where it’s located on the page.“

What it’s very important to consider here, is the fact that Chrome’s implementation sets a very large threshold (up to 8000 px): this means that on many web pages, all or most of the images will be downloaded immediately and will not benefit from lazy-load.  

Why Is WP Rocket Not Enabling Support for Native Lazy-Loading By Default?

The information about Chrome’s native lazy-loading threshold was crucial for us, and triggered the first doubts: should we really implement a solution that could harm the effectiveness of our built-in LazyLoad feature?

In fact, WP Rocket’s LazyLoad has a smaller threshold (300 px), which means that more images will be lazy-loaded: this makes it more effective in reducing the amount of data transferred on initial page load. 

Out Internal Tests

Apart from assessing this critical difference between our LazyLoad and Chrome’s native lazy-loading, we wanted to corroborate the theory with data.  

So we started testing.

Since GTmetrix still uses Chrome 75, which doesn’t support native lazy-loading, we ran our tests via Uptrends, which relies on Chrome 77.

We ran three tests per each case: without lazy-loading, with Chrome’s Native lazy-loading, and with WP Rocket LazyLoad.

Here are the results we got:

Test Page 1  

Page height: 8747.910 px

No lazy-loading:

Performance results without lazy-loading
Performance results without lazy-loading

With Chrome’s native lazy-loading:

(numbers increase as we scroll the page and load all the images)

Performance results with Chrome's native lazy-loading
Performance results with Chrome’s native lazy-loading

With WP Rocket LazyLoad:

(numbers increase as we scroll the page and load all the images)

Performance results with WP Rocket LazyLoad
Performance results with WP Rocket LazyLoad

Test Page 2

Again, we ran three tests per each case: without lazy-loading, with WP Rocket LazyLoad, and with Chrome’s Native lazy-loading.

Here’s a few screenshots summarizing some of the results we got with Uptrends:

No lazy-loading

Uptrends results without lazy-loading
Uptrends results without lazy-loading

With Chrome’s native lazy-loading:

Uptrends results with Chrome's native lazy-loading
Uptrends results with Chrome’s native lazy-loading

With WP Rocket LazyLoad:

Uptrends results with WP Rocket LazyLoad
Uptrends results with WP Rocket LazyLoad

Given these results, and the fact that loading time and page size are consistently better with WP Rocket’s LazyLoad, we decided not to enable Chrome’s native lazy-loading automatic compatibility.

How to Enable Native Lazy-Loading with WP Rocket?

Even if we do not include automatic compatibility with Chrome browsers using native lazy-loading, with the upcoming WP Rocket 3.4 you’ll have the possibility to choose support for Chrome’s native lazy-loading: you can enable it through a helper plugin.

With this helper plugin, you can make sure that:

You can either keep enjoying our powerful LazyLoad system or decide to go with Chrome’s native lazy-loading.

It’s up to you! Test both solutions on your site, and decide what’s best for you.

Wrapping Up

Native lazy-loading is the innovative technology that allows compatible Chrome browsers (starting from Chrome 76) to manage lazy-load by themselves, without the use of any plugin.

This is undoubtedly a benefit for web performance since all websites visited from compatible Chrome versions will automatically benefit from lazy-loading.

On the other hand, WP Rocket already includes a robust LazyLoad feature that has been implemented and continuously improved over the years. 

While our first intention was to make WP Rocket automatically compatible with Chrome’s native lazy-loading, we eventually decided to not go down that road: after several tests, we realized our LazyLoad feature is more efficient than Google’s native lazy-loading.

Our tests showed that WP Rocket LazyLoad could guarantee better page loading time and the best page size optimization. Nonetheless, we created a helper plugin for customers who still prefer to enable support for Chrome’s native lazy-load, instead of our built-in feature.

Have you tried native lazy-loading yet? What results are you getting? Don’t hesitate to share your thoughts in the comments below!

Author's avatar

Alice is a content writer with strong experience in international customer service and empathic communication. She is an active member of the WordPress community: she loves translating WordPress into Italian and speaking at WordCamps. You can follow @Alice_Ridice on Twitter.

0 comments
Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to shader ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

Get a Faster Website in a Few Clicks

Setup Takes 3 Minutes Flat

Get WP Rocket Now What are you waiting for?

{"cart_token":"","hash":"","cart_data":""}