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

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

LothaireBordeau
Explorer
59 1 11

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 ? 

Replies 8 (8)

Sonya_2025
Shopify Partner
198 26 41

Hey 

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

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME
LothaireBordeau
Explorer
59 1 11

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

 

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

Sonya_2025
Shopify Partner
198 26 41

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

Sonya_2025_0-1712738563725.png

 

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

 

Hope this helps.

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME
LothaireBordeau
Explorer
59 1 11

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
Shopify Partner
198 26 41

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

Sonya_2025_0-1712799265479.png

 

 

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!

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME

samdavidson
Shopify Partner
48 1 5

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

LothaireBordeau
Explorer
59 1 11

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

samdavidson
Shopify Partner
48 1 5

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