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."
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.
All images, including those from external domains, found within <img> tags, added to your content in posts, widgets etc, should be LazyLoaded automatically.
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:
Inside the <img> tag you will see:
lazyloadedclass is added
data-lazy-srcattribute is added
- If the images use srcset, you’ll see
<noscript>tag added after the image
Inside the <div> you will see:
rocket-lazyloadclass is added
data-bgattribute is added
<noscript>is not added
data-lazy-srcsetis added on each <source>
lazyloadedclasses 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
If LazyLoad causes a problem you can disable it in various ways:
- Disable LazyLoad on specific images
- Disable LazyLoad on specific posts
- Disable LazyLoad on mobile
- Disable LazyLoad on background images
- We use this script: https://github.com/verlok/lazyload
- LazyLoad is applied on the template_redirect hook
- The LazyLoad script is already minified and is loaded at the footer asynchronously.
- Srcset is supported.
- LazyLoad can be manually applied if necessary: https://docs.wp-rocket.me/article/130-manually-apply-lazyload-to-an-image
- 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:
- 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.