How do I remove "Lazy Load" from Largest Contentful Paint

Technical Q&A
1

Re Mobile speed performance. Both Pagespeed Insights and GTMetrix advise Don’t Lazy Load Largest Contentful Paint.

“Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint.”

On the image.banner.liquid file, do I just delete this line?

loading: ‘lazy’ appears on two lines: 55 and 87.

Beryl_Coder_0-1678542010331.png
Beryl_Coder_0-1678542010331.png1116×418 45.3 KB

2

Hello @Beryl_Coder if you are sure those lines are for the above the images then you can try deleting it you can add it back later no problem.

3

@Beryl_Coder

Try like this

{{ section.settings.image 
| img_url: width: 3840
| image_tag:
 }}
4

Hello @Beryl_Coder ,

I am Gina from flareAI app helping Shopify merchants get $5Million+ in sales from Google Search, on autopilot.

If both Pagespeed Insights and GTMetrix are recommending not too lazy load the Largest Contentful Paint (LCP), it is advisable to follow their advice.

In the image.banner.liquid file, you can remove the loading: ‘lazy’ attribute from the image tag. This should prevent the image from being lazily loaded, and it should improve the LCP performance.

If the loading: ‘lazy’ attribute appears on two lines, you should remove both instances of it. However, before making any changes, it is recommended to make a backup of the file so that you can restore it if something goes wrong.

Gina