How do I remove lazy loading on an image banner - Craft theme

[stripedcircle]

Hi there - first time poster but long time user of this community board to resolve numerous issues 🙂

Can someone help me to set loading to eager on my Image Banner on my homepage, please?  It is currently set to lazy and this is impacting my LCP.  URL is https://stripedcircle.com if helpful!  I am currently using the Craft theme.

See below snip of Page Insights - but I can't see any code that sets loading to lazy in the image-banner.liquid file...

Any advice gratefully received!

Many thanks, Tim.

[Taknify]

Why would you want to remove lazy loading? For users with slow internet speed, lazy loading actually helps because your image will load only if they are needed, instead of loading everything at once. But is it indeed true that removing lazy loading on "above the fold" content actually helps. 
I can help you out to check your theme code and remove that if you DM me your access.

[Ahmad31]

• Locate the File:

  • Go to Online Store > Themes > Actions > Edit Code.
  • Open image-banner.liquid (usually in the Sections folder).

• Edit the <img> Tag:

  • Find the <img> tag, which might look like:

<img src="{{ image | img_url: '1600x' }}" alt="{{ image.alt | escape }}" loading="lazy">

Change it to :

<img src="{{ image | img_url: '1600x' }}" alt="{{ image.alt | escape }}" loading="eager" fetchpriority="high">

Save and Test:

• Save changes.
• Use Google PageSpeed Insights to verify LCP improvements.

[Dan-From-Ryviu]

Hi @stripedcircle 

Please go to your Online Store > Themes > Edit code > open Image-banner.liquid file, under this line of code 

sizes: sizes,

Paste this code and save file 

preload,

[stripedcircle]

Thanks Dan.  Unfortunately, that hasn't improved the load delay on the LCP element.  PageSpeed Insights is still showing that image as lazy loading and the load delay is 7,680ms (53% of LCP).  Any other thoughts?

[Website_Speedy]

Hi @stripedcircle,

To improve the loading behavior of your image banner on your Shopify store, you can adjust the image’s loading settings to help it load faster, which can improve your Largest Contentful Paint (LCP) score and overall site performance.
Since you're using the Craft theme, here’s a simple way to do this:

Once you find the code, update the loading attribute to "eager" and set the fetchpriority to "high" to prioritize loading the banner image:

<img src="{{ image.src | img_url: 'original' }}" alt="{{ image.alt }}" class="banner-image" loading="eager" fetchpriority="high">

By making these adjustments, your banner image will load more quickly, which should help improve the LCP score and the overall speed of your store.

If these changes don’t result in the desired improvement in LCP, you might want to try the Website Speedy app from the Shopify App Store. It’s easy to set up and offers additional tools to boost performance and improve core web vitals. You can check it out here: https://apps.shopify.com/website-speedy