how to implement lazy loading?

Shopify Discussion
1

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.

2

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.

  1. Find and Modify Image Tags:

Search for image tags () 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:

{{ product.title }}

Add the loading=“lazy” attribute:

{{ product.title }}

  1. 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!

3

As I can see the pictures are lazy loading?

4

how can i check if that is the case?

5

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

6

Okay let me know if it works