Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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 ?
Hey
Try adding `fetchpriority="high"` to the first few images that load visibly on screen, along with using `loading="eager"` from hero images.
Oh, that's a good idea, thank you very much.
Could you please explain like I'm five how to implement it ?
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.
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>
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!
Have you tried optimizing images on the store? It's usually the first step in improving LCP.
Hello. what would be the simplest, most efficient way to do that ?
You can use any of the page speed optimization apps from the app store.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024