Les Core Web Vitals mesurent la qualité de l'expérience utilisateur sur trois dimensions : la vitesse d'affichage du contenu principal (LCP), la réactivité aux interactions (INP) et la stabilité visuelle (CLS). En e-commerce, les pages produit sont souvent les plus problématiques : images lourdes, carrousels JavaScript, apps tierces qui s'injectent.
LCP — Largest Contentful Paint
Le LCP mesure le temps d'affichage du plus grand élément visible au chargement — généralement l'image principale du produit sur une fiche e-commerce. Cible : < 2,5s.
Causes fréquentes d'un LCP lent sur les fiches produit :
- Image principale en JPEG 2 Mo au lieu de WebP 150 Ko
- Pas d'attribut
loading="eager"(oufetchpriority="high") sur l'image principale - Image demandée via JavaScript (lazy-loaded depuis un carrousel) au lieu d'une balise
imgdirecte - Hébergement image lent sans CDN
LCP — Quick wins images
Convertissez toutes les images produit en WebP (gain -60 % de taille typique). Ajoutez
fetchpriority="high" sur l'image principale. Servez depuis un CDN (Shopify CDN natif le fait automatiquement si vous uploadez dans l'admin).INP — Réactivité sur pages filtres
Les pages de collection avec filtres JavaScript sont les pires en INP. Chaque clic sur un filtre re-rend une liste de produits. Solutions : pagination côté serveur, virtualisation de liste, debounce sur les handlers de filtre.
CLS — Stabilité des fiches produit
Ajoutez des attributs
width et height sur toutes les balisesimg pour que le navigateur réserve l'espace avant le chargement. Évitez les widgets injectés en haut de page après le chargement.| Métrique | Problème typique e-commerce | Solution prioritaire |
|---|---|---|
| LCP > 4s | Image JPEG 3 Mo sans CDN | WebP + CDN + fetchpriority="high" |
| LCP > 4s (bis) | Image lazy-loaded via JS | Balise <img> directe + preload link |
| INP > 500ms | Filtres collection en JS pur | Pagination serveur + debounce |
| CLS > 0.25 | Images sans width/height | Attributs width/height sur toutes les img |
| CLS > 0.25 (bis) | Widget chat injecté en haut | Différer l'injection après LCP |
Outil de mesure officiel : PageSpeed Insights (pagespeed.web.dev). Entrez l'URL d'une fiche produit. Regardez d'abord les données réelles (CrUX) — pas seulement le score Lighthouse. Les données réelles reflètent les vrais utilisateurs sur vos vraies pages.
Améliorez vos Core Web Vitals
Visio 30 min · audit performance inclus
Créé en France, entre Annecy et Chantilly · Assistance email & visio Google Meet
FAQ
LCP (Largest Contentful Paint) : < 2,5s = bien, 2,5-4s = à améliorer, > 4s = mauvais. INP (Interaction to Next Paint) : < 200ms = bien, 200-500ms = à améliorer, > 500ms = mauvais. CLS (Cumulative Layout Shift) : < 0,1 = bien, 0,1-0,25 = à améliorer, > 0,25 = mauvais.
Voyez Seegea en action
Réservez une démo visio de 30 minutes sur Google Meet. Sans engagement.
Réserver une démo