Implementing lazy load with woocommerce product archives via Lozad.js

Published

February 21, 2019

The loading performance of your web shop ist crucial in terms of the page speed and conversion rate. Especially on the product archive pages a lot of images are loading. To improve this amount of requests lazy loading helps to load the items only at the moment they are entering the viewport.

The JavaScript library “Lozad.js”

Lozad.js is a popular and very flexible open source lazy loading library by Apoorv Saxena. Enqueue the following script via the functions.php of your theme.

Via a small Script we are defining class “lozad” to be the selector for our lazy loading. Add this to the footer.php of your theme.

Enabling lazy loading with images of woocmmerce archive

Via a hook we have to replace the standard image tag of each product item with a data-src attribute to enable lazy loading via Lozad.js. Further on the item has to have the class “lozad” as defined in our script above. Add the following code to your functions.php of your theme:

Note: The hook will replace the image tag of Woocommerce in all archive pages and for all standard shortcodes.

INTERNETKULTUR | © 2019 | Imprint