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>
