Why am I still getting LCP warnings after not lazy loading the first image?

Technical Q&A
1

Hi,

I am getting the LCP warnings on Pagespeed and GT Metrix both which suggest me to not lazy load the first image on my page. Now I have used the condition to not lazy load the first image through script. In the source also I can see “loading = eager”, but still these tools are giving same error. I am facing this issue on both the collection and the home page.

I have attached the screenshots for reference.

Any suggestions on why this is giving error?

Slideshow-banner code below:

{%- if block.type == ‘image’ -%}
{%- if block.settings.image != blank -%}
{%- capture loading_strategy -%}{% if forloop.first %}eager{% else %}lazy{% endif %}{%- endcapture -%}
{%- capture fetch_priority -%}{% if forloop.first %}high{% else %}low{% endif %}{%- endcapture -%}

{%- if block.settings.mobile_image != blank -%} {%- endif -%}

{{- block.settings.image | image_url: width: block.settings.image.width | image_tag: loading: loading_strategy, fetchpriority: fetch_priority, sizes: ‘100vw’, widths: ‘300,400,500,600,700,800,900,1000,1200,1400,1600,1800,2000,2200,2400,2600,2800,3000,3200’ -}}

Collection banner code below:

{%- if section.settings.enable_parallax -%} {%- assign is_attribute = 'image-parallax' -%} {%- endif -%}

{%- if section.settings.mobile_image != blank -%}

{%- endif -%}

{%- assign image = section.settings.image | default: collection.image -%}
{{- image | image_url: width: image.width | image_tag: loading: ‘eager’, is: is_attribute, widths: ‘300,400,500,600,700,800,900,1000,1200,1400,1600,1800,2000,2200,2400,2600,2800,3000,3200’ -}}
2

Hello @diananh ,

Please share your store URL to check the exact issue that’s affecting the LCP

3

https://incensesticks.com/

4

Hi,

The reason the speed report is mentioning the LCP as being lazy loaded might be because of the logo image:

https://incensesticks.com/cdn/shop/files/new-logo-incense.png?v=1707458605&width=512

It’s still being lazy-loaded. The other images above the fold are good.

Also, I think your site is scoring pretty well on Google’s PageSpeed Insights, 97 on desktop which is virtually perfect, and 77 on mobile which is not bad at all for mobile.

5

Very interesting. The only thing I can think of in your situation is that this is some weird bug with how pagespeed insights and shopify interact, and thats messing with the what shopify is outputing. Which seems very unlikely.

have you tried using an tag directly, instead of the shopify image_tag filter?

6

I am using the Shopify Prestige theme wherein I just upload the image on the collection page.

Are you suggesting to edit the code in collection template and change the img_filter to normal img tag?

7

Found any fix for this LCP issue with image? I’m using Prestige theme as well. I have a slideshow of images in the landing page with 2 images having LCP of 16.6 s. I have compressed the images, changed the format into webp. But nothing works

8

Hi Diananh,

We have just checked the speed of the store, it scored 69 on mobile and 89 on desktop. Here is the detailed link: https://pagespeed.web.dev/analysis/https-incensesticks-com/8xnqkrz5es?form_factor=mobile. We have a few recommendations as follows:

  • LCP: The LCP score is at 11s, which is quite high on mobile. You should optimize the store’s images. A good score would range between 5-7s.
    We recommend using this Avada SEO Image Optimizer app so that the store can improve its speed and provide a better user experience.

Best Regards,
Daisy