specific lazy loading

Store Design
,
1

Hi I am trying to setup my store to load this way,

loading=“lazy” should not be used in the first image (of every page), and first image should be loading=“eager”.

so I want to set the first image (of every page) to loading=“eager”, and for rest of the images to loading=“lazy”.

So for Home page - hero banner’s first image (i mean first slide image) = eager.

collections page - pages first 6 image (because first row has 6 images ) = eager

Product page - only slider’s first image. = eager

Blog page - first image. = eager

the rest of the images should be set to lazy.

My site is alanrichardtextiles.com https://alanrichardtextiles.com

Thank you

2

It’s hard to predict in code which image will be the LCP one.

Your theme may already have a checkbox for this on some sections, but code is different between themes.

Otherwise you may try adding this code to the “Custom liquid” section, ideally in Header or Footer groups:

Ideally, though, it should still be done in liquid – then it would be possible to also utilise preload parameter on image_tag to further prioritise loading this image (https://shopify.dev/docs/api/liquid/filters/image_tag#image_tag-preload)