How to implement Lazy Loading Images

Technical Q&A
,
1

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

2

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.

3

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)

Screenshot 2024-08-29 125907.jpg
Screenshot 2024-08-29 125907.jpg1693×385 48.3 KB

4

Hi @TimboH3at5
I checked the score on Google Page Speed Insights and it shows the webvitals are passed

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. :backhand_index_pointing_down:

HuptechWeb_0-1724939574230.png
HuptechWeb_0-1724939574230.png1879×883 229 KB

Thank you

D.P

5

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

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

6

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 :backhand_index_pointing_down:

{%
      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.

7

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

8

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

9

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

10

@Huptech-Web Dynamic-promo-mosaic.liquid

11

Hi @TimboH3at5
If you check this thread https://community.shopify.com/post/2740229

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

12

@Huptech-Web promo-grid liquid??

13

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

14

Found it… and changed

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

15

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.

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