Why does my mobile website keep failing the Core Web Vitals assessment?

[LothaireBordeau]

The PageSpeed Insights test keeps telling me my website on mobile https://www.lothaire.fr/ fails the CoreWebVitals assessment and I can't understand why. It seems to be the LCP but even though I've halved the size of pictures in the hero, it doesn't seem to improve the situation.

Can any one please help ? 

[Sonya_2025]

Hey 

Try adding `fetchpriority="high"` to the first few images that load visibly on screen, along with using `loading="eager"` from hero images.

[LothaireBordeau]

Oh, that's a good idea, thank you very much. 

Could you please explain like I'm five how to implement it ? 

[Sonya_2025]

Since I can not see your theme code. so I am not sure where it is.

1. First you need to find the code include "hero__image-wrapper" like this

2. And find the image that render the hero image, and then add the code that I mentioned to the img.

Hope this helps.

[LothaireBordeau]

Here is my code : 

<div class="hero__image-wrapper{% unless hero_text %} hero__image-wrapper--no-overlay{% endunless %}">

                {%- if section.settings.parallax -%}
                  <div class="parallax-container">
                    <div class="parallax-image">
                {%- endif -%}

                  {%- if block.settings.image != blank -%}
                    {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

                    <img class="hero__image hero__image--{{ block.id }} lazyload{% if has_mobile_image %} small--hide{% endif %}"
                      src="{{ block.settings.image | img_url: '300x' }}"
                      data-src="{{ img_url }}"
                      data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ block.settings.image.alt | escape }}"
                      style="object-position: {{ block.settings.focal_point }}">
                    {%- if has_mobile_image -%}
                      {%- assign img_url_mobile = block.settings.image_mobile | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                      <img class="hero__image hero__image--{{ block.id }} lazyload medium-up--hide"
                        src="{{ block.settings.image_mobile | img_url: '300x' }}"
                        data-src="{{ img_url_mobile }}"
                        data-aspectratio="{{ block.settings.image_mobile.aspect_ratio }}"
                        data-sizes="auto"
                        alt="{{ block.settings.image_mobile.alt | escape }}"
                        style="object-position: {{ block.settings.focal_point }}">
                    {%- endif -%}
                    <noscript>
                      <img class="hero__image hero__image--{{ block.id }}"
                        src="{{ block.settings.image | img_url: '1400x' }}"
                        alt="{{ block.settings.image.alt | escape }}">
                    </noscript>
                  {%- else -%}
                    {%- if template == 'password' -%}
                      {%- assign password_image = 'password-page-background.jpg' | asset_url -%}
                      <img class="hero__image lazyload" src="{{ password_image }}">
                    {%- else -%}
                      {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
                    {%- endif -%}
                  {%- endif -%}

                {%- if section.settings.parallax -%}
                    </div>
                  </div>

[Sonya_2025]

Hey, Sorry for the late reply.

1. Remove the hero image "lazyload" css class.

2. Add loading="eager" to your image

I marked out places you need make some change, see the image below

After update, it should like this.

                  {%- if block.settings.image != blank -%}
                    {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

                    <img class="hero__image hero__image--{{ block.id }} {% if has_mobile_image %} small--hide{% endif %}"
                      src="{{ block.settings.image | img_url: '300x' }}"
                      data-src="{{ img_url }}"
                      data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ block.settings.image.alt | escape }}"
                      style="object-position: {{ block.settings.focal_point }}"
                      loading="eager"
                      fetchpriority="high">
                    {%- if has_mobile_image -%}
                      {%- assign img_url_mobile = block.settings.image_mobile | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                      <img class="hero__image hero__image--{{ block.id }}  medium-up--hide"
                        src="{{ block.settings.image_mobile | img_url: '300x' }}"
                        data-src="{{ img_url_mobile }}"
                        data-aspectratio="{{ block.settings.image_mobile.aspect_ratio }}"
                        data-sizes="auto"
                        alt="{{ block.settings.image_mobile.alt | escape }}"
                        style="object-position: {{ block.settings.focal_point }}"
                        loading="eager"
                        fetchpriority="high">
                    {%- endif -%}

 Hope this helps!

[samdavidson]

Have you tried optimizing images on the store? It's usually the first step in improving LCP.

[LothaireBordeau]

Hello. what would be the simplest, most efficient way to do that ? 

[samdavidson]

You can use any of the page speed optimization apps from the app store.