How do I implement lazy loading images on the Dawn theme?

How do I implement lazy loading images on the Dawn theme?

bmdesign
Tourist
8 0 2

Hi,

 

Struggling trying to use lazy loading for product images.. trying to use this tutorial from https://github.com/aFarkas/lazysizes#readme 

 

I've added the <script src="lazysizes.min.js" async=""></script> into the Theme.liquid into the body section and that is as far as managed. Can not seem to find where to add the class and lazyload to the images.. could someone help me out?

Replies 6 (6)

oreoorbitz
Shopify Partner
261 31 134

What images need lazyloading?
Dawn should come with native lazyloading out of the box. I just think it's missing background image lazyloading.

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949
bmdesign
Tourist
8 0 2

You are right dawn does come with lazy loading. 

 

Next step would be adding low res images as a background. Would you have any tips? getting lost with google.. currently learning and would appreciate any help 

 

 

hasanarmstrong
Shopify Partner
25 5 5

Hi @bmdesign,

 

Just add the attribute loading="lazy" to your images e.g. <img src=".." loading="lazy"/>.

 

There is no need to add a low res image, unless you really want to 🙂

 

https://web.dev/browser-level-image-lazy-loading/

 

Best,

 

Hasan

Front-end developer who helps Shopify merchants with their website/s.
https://www.ecommercedevs.com/
bmdesign
Tourist
8 0 2

Thank you where can I find these in the code? cant find the images anywhere.. 

wczasiepracy
Visitor
3 0 0

I added this code on my website and it works. Thanks.

 

But I must say that I expected a more spectacular effect

 

Regards

­

bmdesign
Tourist
8 0 2

Where about are the images in the code? I cant seem to find them anywhere