Table of Contents

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="" 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 Doesn’t WP Rocket Enable Native Lazy Loading Support 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:

  • Page size: 709 KB
  • Requests: 29
  • Resources: 953 KB
  • Finish: 8.39 s
Performance results without lazy-loading
Performance results without lazy loading

With Chrome’s native lazy loading:

  • Page size: 264 KB
  • Requests: 34
  • Resources: 525 KB
  • Finish: 5.45 s

(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:

  • Page size: 96.2 KB to 102 KB
  • Requests: 24
  • Resources: 351 KB
  • Finish: 4.35 s

(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

  • Page size: 832.6 KB
  • Requests: 26
  • Load time: 1.6 s
Uptrends results without lazy-loading
Uptrends results without lazy-loading

With Chrome’s native lazy loading:

  • Page size: 418.9 KB
  • Requests: 24
  • Load time: 0.7 s
Uptrends results with Chrome's native lazy-loading
Uptrends results with Chrome’s native lazy-loading

With WP Rocket LazyLoad:

  • Page size: 341.3 KB
  • Requests: 14
  • Load time: 0.4 s
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:

  • All your images will have the necessary HTML markup to take advantage of native lazy loading;
  • Compatible Chrome browsers will automatically use native lazy loading;
  • All others will automatically use WP Rocket’s LazyLoad.

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!

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 share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.
Comments (3)

Looks like WordPress core will be making chrome/edge native lazy load part of WordPress Core Will this affect WP Rocket's implementation?

Is there any speed comparison available for the lazy loading feature of WP Rocket vs Jetpack? I am currently using Jetpack lazy loading and would like to know the expected performance improvement before switching to WP Rocket lazy loading feature.

Latest Articles of Page speed and caching
Subscribe to Our Newsletter

Stay in the loop with the latest WordPress and web performance updates.
Straight to your inbox every two weeks.

Get a Faster Website
in a Few Clicks

Setup Takes 3 Minutes Flat