how to implement lazy loading?

[Jdierck]

Hey! i know some themes automatically implement lazy loading to pictures, but i was wondering how i can check that. Our sites loading speed is 2.52 seconds overall and i really want to drop this below 2. As well as increasing  mobile site speed (3.26 seconds). 

On the contrary, if my theme does not automatically implement, I was hoping one of you could explain how to do so? I've been stuck on this for some time now and i'm hoping we can get this figured out!

I will send someone coffee money if it works!

Website: Esqclothing.com

Thanks again.

[Iwillsolveit]

Here’s how to manually implement lazy loading on your Shopify store if your theme doesn't do it automatically:

1. Access Your Theme Code:

In your Shopify admin, go to Online Store > Themes.

Find your current theme, then click Actions > Edit Code.

2. Find and Modify Image Tags:

Search for image tags (<img>) in your theme files. Common files to check include:

sections/product-template.liquid

sections/featured-product.liquid

snippets/product-card.liquid

Look for image tags like this:

<img src="{{ product.featured_image | img_url: '600x600' }}" alt="{{ product.title }}">

Add the loading="lazy" attribute:

<img src="{{ product.featured_image | img_url: '600x600' }}" alt="{{ product.title }}" loading="lazy">

3. Test Your Site:

After making changes, clear your browser cache or use an incognito mode to test.

Right-click on an image on your site, select Inspect, and confirm that the loading="lazy" attribute is present in the image tags.

You can also run a speed test using Google PageSpeed Insights or Shopify’s Speed Report to see improvements.

Other Speed Optimizations:

Image Compression: Ensure images are compressed or resized appropriately using Shopify’s image filters.

Remove Unnecessary Apps: Too many apps can slow your site. Disable or remove unused apps.

Let me kno

w if these changes improve your loading times!

[Jdierck]

thank you so much! ill attempt to do this and lyk the outcome!

[Iwillsolveit]

Okay let me know if it works

[jamalsoueidan]

As I can see the pictures are lazy loading?

[Jdierck]

how can i check if that is the case?