Liquid, JavaScript, themes, sales channels
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?
Solved! Go to the solution
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.
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.
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024