How can I use the native loading 'lazy' attribute in my code?

[Lizanne]

Good day,

can someone please assist me - in my shopify code it gives me this msg:

use the native loading= "lazy" attribute instead of lazysizes shopify

[rajvee_kadchha · Accepted solution]

Hello Lizanne,

You have to add the attribute loading='lazy' in img tag. i.e <img src="a.jpg" loading="lazy">.
Although I recommend using loading="eager" for LCP images to improve site speed.

If you find my suggestion difficult to implement send an email at rajvee.kadchha@mlveda.com 

[Lizanne]

Good day Rajvee,

Thank you.

I have changed it to eager. Can you maybe please help me, if i change it my collection images is blurry. can i do something regarding this? It now longer is clear like it was before i change from lazyload to eager.

[rajvee_kadchha]

Thank you for contacting me.
Would you please share your collection page URL, we will check and let you know our feedback in 24 hours.

[Lizanne]

Thank you so much, the collection images is on the main page.

https://flowbins.co.za/

[rajvee_kadchha]

I suggested that you add the attribute loading="eager" rather than a class. 

Also if you don't mind, can you please share your mail id, so we can take this discussion there as it will be long discussion.

[Lizanne]

thank you, I have send you a private msg.