How to fix - Largest Contentful Paint image was lazily loaded

Shopify Discussion
1

I was checking my store speed and the following was a main factor in slowing the page load - How do I fix this?

Ty2022_0-1650382912242.png
Ty2022_0-1650382912242.png1920×1080 205 KB

2

Tell me about it. Pain in the a**e trying to figure it out, when they tell you what all the problems are but not how to fix them.

3

This is a problem with the first image on the “slideshow.liquid” file..
You will need to open up the code editor, open one of the “Sections” files called “slideshow.liquid”

after

{%- if block.settings.image -%}> {%- assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round -%}

insert

{% if forloop.index == 1 %}> {{> block.settings.image> | image_url: width: 3840> | image_tag:> loading: ‘eager’,> height: height,> sizes: ‘100vw’,> widths: ‘375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840’> }}> {% else %}> {{> block.settings.image> | image_url: width: 3840> | image_tag:> loading: ‘lazy’,> height: height,> sizes: ‘100vw’,> widths: ‘375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840’> }}> {%- endif -%}

This will exclude the first image (Above the Fold) from loading lazy and allow the rest to load when needed.. (lazy load)

4

Thank you for your reply. I am have no knowledge of coding so your reply is a help. I have done as you said and I will monitor the site performance. I done a gmetrix speed test and my site speed improved.