Using LazyLoad for Images in WP Rocket

In this Article

What does it do? 

LazyLoad delays the loading of images on your website until the user scrolls down the page and actually needs to see them. We do this in an SEO-friendly way, as recommended by Google.

LazyLoad addresses the Google PageSpeed recommendation to “defer offscreen images”.

How does it help your website? 

"When we lazy load images and video, we reduce initial page load time, initial page weight, and system resource usage, all of which have positive impacts on performance."
Ref: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

Let’s say you have 10 images on your page, with a total of 2MB. If all 2MB worth of images have to be downloaded at once, that will impact the overall load time and perceived performance. This will especially impact mobile devices which have more limited processing power and are often on slower internet connections.

For mobile users that are paying for data, it also means they don’t have to pay to download images they won’t see, if they don’t scroll the entire page.

Standard images

All images, including those from external domains, found within <img> tags, added to your content in posts, widgets etc, should be LazyLoaded automatically. 

Images found in a CSS file, or loaded from a JavaScript, will not be LazyLoaded. 

Background Images

Background images are a special case and are more complex to LazyLoad since there are multiple ways they can be added to a page. However WP Rocket will automatically Lazyload those that are found in the HTML of your page using the following markup: 

<div style="background-image: url(image.jpg)">

The div element can have other attributes, classes, etc, it will still work. 

The element will then be transformed into:

<div data-bg="url(image.jpg)" class="rocket-lazyload" style="">

An example of background image markup that will be LazyLoaded:

With LazyLoad applied, it’s transformed to: 

Some common page builders use this markup and therefore background images will be automatically LazyLoaded when using: 

  • Divi - using a parallax background image on a section
  • Avada - using a background image image on a section

If the background image is added another way, such as in a CSS file, or inline CSS <style> tag, it cannot be LazyLoaded at this time.

If there is an issue, you may disable LazyLoad on background images with a helper plugin.

Picture Element and WebP

Images added with the <picture> element will be LazyLoaded, including WebP images added this way.

Each <source> element within the <picture> element will be LazyLoaded. 

How to check if it’s working

Use the Network tab in your browser

  • Open the developer tools in your browser. In Chrome: View > Developer > Developer Tools
  • Click the Network tab. 
  • Click the Img filter
  • Reload the page
  • As you scroll down the page, images that are LazyLoaded will appear in the Network tab as they are needed:

Markup changes 

Standard images

Inside the <img> tag you will see: 

  •  lazyloaded class is added
  • data-lazy-src attribute is added
  • If the images use srcset, you’ll see data-lazy-srcset
  • data-was-processed="true"
  • <noscript> tag added after the image 

Background images

Inside the <div> you will see: 

  • rocket-lazyload class is added
  • data-bg attribute is added
  • data-was-processed="true"
  • <noscript> is not added

Picture element

  • data-lazy-srcset is added on each <source>
  • rocket-lazyload and lazyloaded classes added in the <img>
  • data-was-processed="true"  added in the <img>
  • WP Rocket does not add a <noscript> tag here, but 3rd party plugins you use to implement <picture> may do this

Problem solving

If LazyLoad causes a problem you can disable it in various ways:

Technical notes

The process:
  • LazyLoad is a two part process. 
  • First we process the HTML in PHP, using a regex to detect images and rewrite the img src(s) with the placeholder. 
  • Therefore if you have malformed code on your site it could cause issues here or images could escape detection.
  • We replace the image src with this placeholder:
      data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E
  • You can set a custom placeholder: https://docs.wp-rocket.me/article/771-rocketlazyloadplaceholder
  • The second part of the process is handled by the LazyLoad script when the page is loaded. 
  • By default the threshold is 300, i.e. images within 300 pixels of the viewport will be Lazyloaded. 
  • The threshold can be adjusted: https://docs.wp-rocket.me/article/1032-adjust-lazyload-threshold
  • When the images reach the threshold the placeholder is replaced with the real image. To do this, the <img> tag is modified:
  • The image src is replaced with the original image stored in data-lazy-src or data-bg 
  • Depending on the specific type of image (see above) a class is added to the <img> tag:  lazyloaded and/or rocket-lazyload 
  • data-was-processed="true" is added to the <img> tag.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.