How to implement lazy loading?

[Sensei_Ryan]

Hello,

I’ve been following some instruction I found online but am getting stuck on adding a class to image tag (step 3).

 

Does anyone know how to locate the image tag for the theme?

website: follownoonestore.com

theme: Label

[made4Uo]

Hi @Sensei_Ryan,

You need to add loading="lazy" to your img tag. You only add this loading lazy to the image that you want to load later or not on the top of the browser when the browser loads 

<img src="image-link" alt="image-alt" loading="lazy">

[Cedcommerce]

Hello @Sensei_Ryan ,

Finding each “img” tag is quite complex as we are using multiple sections or snippets in the Shopify theme. 

To get this issue resolved and implement Lazy loading properly first you need to write a custom code for selecting all “img” tags and then add this attribute loading="lazy" as shown in the below-provided code.

<img src="img_url" alt="img_alt" loading="lazy"/>

This will properly implement lazy loading. Let us know if you need any help with this.

Regards, 

CedCommerce