Chrome native lazyload

Chrome 76 introduced native lazy-load. This means that lazy-loading can be done by the browser itself instead of a plugin. 

At the moment, Chrome's implementation of native lazy-load is very conservative. The purpose of lazy-load is to only load images onto the page as the user scrolls and needs to see them. However, Chrome's implementation sets a very large threshold which means that on many web pages, all or most of the images will be downloaded immediately and will not benefit from lazy-load. 

WP Rocket's LazyLoad has a smaller threshold, therefore more images will be lazy-loaded, so it is currently more effective in reducing the amount of data transferred on initial page load. For this reason we have not automatically enabled support for native lazy-load.

But you can choose to enable support for Chrome's native lazy-load if you wish by using the helper plugin below.

📥  Download (.zip): WP Rocket | Enable Native Lazyload
Developers: You can find the code for this plugin on GitHub.

How native lazy load works

To take advantage of Native lazy-load, your site must use certain HTML markup on its images: 

The attribute loading="lazy" should be added to <img> and/or <iframe> tags.

Example: <img src="image.png" loading="lazy" alt="cat">

When you activate the helper plugin it will do the following: 

• Add the necessary HTML markup to your images to take advantage of native lazy-load
• Compatible Chrome browsers will automatically use native lazy-loading
• All others will automatically use WP Rocket's LazyLoading