Solved

Does the debut theme truly lazyload images?

Stuart_Brown
Shopify Partner
18 1 3

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?

Accepted Solution (1)

Stuart_Brown
Shopify Partner
18 1 3

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. 

View solution in original post

Replies 2 (2)

David_Weru
Shopify Partner
177 16 43

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
Shopify Partner
18 1 3

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.