Does the debut theme truly lazyload images?

Solved
Stuart_Brown
Excursionist
15 1 2

I've been trying to reduce page load times, using SpeedBoostr, Pagespeed and GTMetrix to help, but there seems to be some confusion whether images are being lazyloaded or not.

I'm using the Debut theme for my store and it certainly looks like they are lazyloaded, they receive the correct classname, but looking at my page code the <img> tag contains both data-srcset and srcset attributes, where I'm expecting to see only data-srcset until the page is scrolled down to the image.

Here's an example page: www.cardtoons.co.uk/collections/calendars/products/cal006-yorkshire-dales-images-slimline-calendar-2...

So, is the lazyload working properly, or do I need to make some code changes?

0 Likes
David_Weru
Trailblazer
153 14 32

Hello, @Stuart_Brown 

The best way to test lazy loading is to use a page inspector which artificially lets you reduce bandwidth to see what someone with say 2g internet might see.

https://developer.chrome.com/docs/devtools/speed/get-started/

 

Once you've diagnosed that, you can download your entire theme and do a search of image elements and implement lazy loading yourself just to be sure.  

It sounds complex, but your task is basically reduced to adding a js library in your assets, including it in the header, and doing a few string search and replace operations in the ide of your choice.

 

Here are a few lazy loading libraries to try

https://www.cssscript.com/top-10-lazy-loading-javascript-libraries/

 

If you'd like further assistance, just let me know.

Stuart_Brown
Excursionist
15 1 2

This is an accepted solution.

Okay, to answer my own question, it turns out that the Debut theme (and probably other Shopify inhouse themes) lazypreload images on the product page. This is better than no lazyload at all, because it loads the pictures after the page load. I believe it will do this because of the gallery function as the lazysizes javascript probably won't be able to detect the images when they come into view as they are hidden until the thumbnail picture is clicked. 

0 Likes