Lazy loading is web development optimization technique which skips loading of heavy content (i.e. images) on initial page load, and instead they are being loaded when user scrolls to these areas.
In this article we will check how it can be applied to WooCommerce Shop and Category pages for product images:
1.Open your theme js file and insert the following code:
// Lazy loading images
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
let active = false;
const lazyLoad = function() {
if (active === false) {
active = true;
setTimeout(function() {
lazyImages.forEach(function(lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});
if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}
});
active = false;
}, 200);
}
};
lazyLoad();
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
});
The above JavaScript code interates through images with class ‘lazy’ and if they are visible on screen, it loads and assigns actual images to them.
Source Code Reference: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video
Also, it includes a small fix to load lazy load check on page load (in case there are product images visible initially, not just on page scroll).
2. Open your theme functions.php file and insert the following code:
add_action('init', function(){
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
});
if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
function woocommerce_template_loop_product_thumbnail() {
echo woocommerce_get_product_thumbnail();
}
}
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
function woocommerce_get_product_thumbnail( $size = 'shop_catalog' ) {
global $post, $woocommerce;
$output = '';
if ( has_post_thumbnail() ) {
$src = get_the_post_thumbnail_url( $post->ID, $size );
$output .= '<img class="lazy" src="your-placeholder-image.png" data-src="' . $src . '" data-srcset="' . $src . '" alt="Lazy loading image">';
} else {
$output .= wc_placeholder_img( $size );
}
return $output;
}
}
The above code overrides WooCommerce image loading and replace them with a placeholder images.
Note: Make sure you have changed ‘your-placeholder-image.png’ to a valid place holder image URL from your website.
Applying the above to our side increased our website load speed significantly (according to Google PageSpeed Insights tool):
Thanks for sharing. I would love to try your code on my site. I have added it to WP using the Code Snippet plugin but I’m getting this error:
The snippet has been deactivated due to an error on line 8:
Cannot redeclare function woocommerce_template_loop_product_thumbnail.
Line 8 is this: echo woocommerce_get_product_thumbnail();
Any idea what the issue might be?
Hi SBenley,
I presume the issue is related to code snippet plugin. Could you please try to insert the code in functions.php file instead?
Great idea,
Do you know if it will work with the DIVI builder/Theme as with that there is no theme.js.
Thanks
Phil
I would insert the code into the theme’s head file.
Hi, how can I do Lazy Load WooCommerce Product Images for all pages.
Or how can I add it on the home page?
A Huge thanks in Advance.
Hi, how can I do Lazy Load WooCommerce Product Images for all pages? Or how can I add it on the home page?
A Huge thanks in Advance.
For some reason this is making my images duplicate on category pages?
Thank you has helped me.
Not working…
Hi. Thanks for this it works great to improve my page speed. but in the Gmetrix report it says my placeholder image is not found. Where should I put the image / how should I write the pathname so it can find the image?