How to implement Lazy Loading Images

[TimboH3at5]

Hello Shopify,

Our Website is showing Core Web Vitals as need improving for Mobile - Specifically INP LCP - Will implementing lazy loading Images help with this and if so how do you go about doing that? Or is there anything else I should be looking at and how important is this?

Best Wishes

Tim 

[Huptech-Web]

Hi @TimboH3at5 
Please share the store URL so I can get a better idea. If you get an LCP issue you need to make the image not load lazy as it will increase LCP the issue.

[TimboH3at5]

Thanks @Huptech-Web 

Here

Shopify shows the below and GSC shows Need improvement on INP issue: longer than 200 ms (mobile) & LCP issue: longer than 2.5s (mobile)

[Huptech-Web]

Hi @TimboH3at5 
I checked the score on Google Page Speed Insights and it shows the webvitals are passed
- https://pagespeed.web.dev/analysis/https-www-westmorlandsheepskins-co-uk/trcozd37gs?form_factor=desk...

Here you can check how Shopify measures it: https://help.shopify.com/en/manual/online-store/web-performance/web-performance-dashboard

Also, Remove lazyload from the images on the top banner to improve LCP.👇

Thank you

D.P

[TimboH3at5]

Thanks @Huptech-Web but performance on mobile is poor? 

So removing Lazy loading is the answer?? How would you suggest doing this?

[Huptech-Web]

Hi @TimboH3at5 
Only remove the lazyloading from the images I have suggested, Because LCP elements like images or videos on top of any pages need to load immediately. So that when the user visits the store they will have a good experience. & not the blank elements.

So, to remove the lazyloading, Search file promo-mosaic-3.liquid & promo-block.liquid in snippets share here so I can update the code.
Or if you find in the file with code something like below 👇

{%
      include 'rimg'
      img: block.settings.image,
      background: true,
      lazy: true,
      size: '1350x1350'
    %}

update the value of lazy: true, to lazy: false; 

It will remove the lazyloading from the image.

[TimboH3at5]

Thanks for the advice - I think I have found the section with the code.

There is no code in either with reference to Lazy:true, does this mean there isnt lazy loading? 

BW Tim

[Huptech-Web]

HI @TimboH3at5 
Can you share the code so that I can check it.

[TimboH3at5]

I have emailed the info@huptechweb.com with the code

[TimboH3at5]

@Huptech-Web Dynamic-promo-mosaic.liquid

[Huptech-Web]

Hi @TimboH3at5 
If you check this thread https://community.shopify.com/c/technical-q-a/how-to-implement-lazy-loading-images/m-p/2740229/highl...

I have mentioned 2 files another is promo-block.liquid  👈 Can you please check that file also?

[TimboH3at5]

@Huptech-Web promo-grid liquid??

[Huptech-Web]

Hi @TimboH3at5 
No, Search for the exact file name promo-block.liquid in Shopify 

[TimboH3at5]

Found it.... and changed 

{%
render 'rimg'
img: block.settings.image,
background: true,
lazy: false,
size: '1350x1350'
%}

[Huptech-Web · Accepted solution]

Great@TimboH3at5 

Did it resolve the issue with the LCP?

I have just checked the score on Google Page Speed Insights, which is slightly improved.
- https://pagespeed.web.dev/analysis/https-www-westmorlandsheepskins-co-uk/9sgjtpogpm?form_factor=desk...

There are still many things to improve here.

For that, you can consider hiring a Shopify developer.

We also provide store optimization services, You can find more here: https://www.huptechweb.com/shopify-speed-optimization-service

Thank you.

D.P