I implemented lazy loading as shown in this guide: https://speedboostr.com/shopify-lazy-loading/
When I run it through PageSpeed and https://analyze.speedboostr.com/, it still says my images aren’t lazy-loaded. A lot of my img tags look like this:
It has data-src AND src, should I remove the src attribute? Wondering if this is getting in the way of my lazyloading. My site is: https://mairobotics.com/
Not sure if you’ve fixed your problem or not so I’ll just put this out there.
If you want to lazy load product description images automatically with no coding required, you should check out an app I made recently called Lazify. It scans your site and you can select the images you wish to lazy load and hit the “Lazy Load” button and that does the trick.
There’s a free trial available if you’d like to check it out: https://apps.shopify.com/lazify-lazy-load-images-1
@chazeichazy – Yes, the problem is that you still have a src=“…” property.
And check your site with Google PageSpeed Insights as it’s better to use the original tool – it will show you the actual offending images. You will also see what size image is loaded, so you can tell if it’s a placeholder, or lazyloading is not lazy enough – i’ve seen it several times too.
@Sumesh does it insert code into the theme file or how does it work? if i remove the app will there be any lingering code?
@tim_1 i removed all the src’s and no longer appears to show up under pagespeed! although my score did drop from 20 to 10..
@chazeichazy It alters the image code in the product description. The theme files are not meddled with to avoid breaking code. All lingering code is removed after disabling lazy loading.
Hope that helps!