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

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

diananh
Shopify Partner
40 0 5

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 -%}

<picture>
{%- if block.settings.mobile_image != blank -%}
<source
media="(max-width: 699px)"
srcset="{{ block.settings.mobile_image | image_url: width: '400x' }} 400w, {{ block.settings.mobile_image | image_url: width: '600x' }} 600w, {{ block.settings.mobile_image | image_url: width: '800x' }} 800w, {{ block.settings.mobile_image | image_url: width: '1000x' }} 1000w"
width="{{ block.settings.mobile_image.width }}"
height="{{ block.settings.mobile_image.height }}"
>
{%- 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' -}}
</picture>

 

Collection banner code below:

 

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

{%- if section.settings.mobile_image != blank -%}
<source
media="(max-width: 699px)"
srcset="{{ section.settings.mobile_image | image_url: width: '400x' }} 400w, {{ section.settings.mobile_image | image_url: width: '600x' }} 600w, {{ section.settings.mobile_image | image_url: width: '800x' }} 800w, {{ section.settings.mobile_image | image_url: width: '1000x' }} 1000w"
width="{{ section.settings.mobile_image.width }}"
height="{{ section.settings.mobile_image.height }}"
>
{%- 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' -}}
</picture>

Replies 6 (6)

oscprofessional
Shopify Partner
16009 2397 3107

Hello @diananh ,

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
diananh
Shopify Partner
40 0 5

JohnE10
Shopify Partner
112 14 19

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.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com

oreoorbitz
Shopify Partner
257 31 132

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 <img> tag directly, instead of the shopify image_tag filter?

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949
diananh
Shopify Partner
40 0 5

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?

Milu
Visitor
1 0 0

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