Core Web Vitals d'une boutique en ligne : comprendre et améliorer

Les Core Web Vitals (Signaux Web essentiels) mesurent la vitesse d'affichage, la réactivité et la stabilité d'une page. Ce guide les explique simplement et liste les causes de lenteur les plus courantes sur Shopify, WooCommerce ou PrestaShop.

1. Les trois indicateurs

Google mesure l'expérience réelle des visiteurs avec trois indicateurs. Un indicateur est jugé « bon » quand 75 % des visites respectent le seuil.

LCP (Largest Contentful Paint) : temps d'affichage du plus grand élément visible, souvent la photo produit ou la bannière. Bon : 2,5 secondes ou moins.
INP (Interaction to Next Paint) : réactivité de la page après un clic, par exemple sur « Ajouter au panier ». Bon : 200 millisecondes ou moins. Il a remplacé le FID en mars 2024.
CLS (Cumulative Layout Shift) : stabilité de la mise en page pendant le chargement. Bon : 0,1 ou moins.

2. Où trouver les mesures

Distinguez les données réelles des visiteurs des tests en laboratoire.

Google Search Console, rapport « Signaux Web essentiels » : données réelles, regroupées par type de page.
PageSpeed Insights : données réelles quand le site a assez de trafic, plus un test Lighthouse.
Outils du navigateur (Lighthouse dans Chrome) : utiles pour diagnostiquer, mais un test ponctuel ne reflète pas tous les visiteurs.

3. Améliorer le LCP

Sur une boutique, le LCP dépend surtout du serveur et des images.

Temps de réponse du serveur maîtrisé : cache de pages, hébergement adapté, peu de requêtes lentes.
Images compressées, aux bonnes dimensions et dans des formats récents (WebP, AVIF).
Image principale chargée en priorité, sans chargement différé ; les images plus bas dans la page, elles, en chargement différé.
Polices web qui ne bloquent pas l'affichage du texte.

4. Améliorer l'INP

Une page qui réagit lentement est souvent surchargée de JavaScript.

Faire l'inventaire des scripts tiers (chat, avis, pixels, tests A/B) et retirer ceux qui ne servent plus.
Sur Shopify, désinstaller proprement les applications inutilisées : certaines laissent du code dans le thème.
Sur WooCommerce, limiter les extensions qui ajoutent des scripts sur toutes les pages.
Charger les scripts non essentiels après l'affichage de la page.

5. Améliorer le CLS

Les décalages viennent d'éléments qui apparaissent sans place réservée.

Dimensions déclarées pour les images et vidéos.
Place réservée pour les bandeaux, carrousels et blocs d'avis chargés après coup.
Bandeau cookies affiché par-dessus la page plutôt qu'en poussant le contenu.

Vérifier ces points avec Nova4Guard

Nova4Guard ne mesure pas les Core Web Vitals des visiteurs réels : pour cela, utilisez Search Console ou PageSpeed Insights. Son volet performance repère en revanche des causes fréquentes : temps de réponse du serveur élevé, page HTML lourde, nombreux scripts et scripts tiers, images sans dimensions, sans chargement différé ou dans des formats anciens, polices pouvant bloquer l'affichage.

Créer un compte gratuit L'audit en marque blanche