Sin impuesto Con impuesto

Core Web Vitals en e-commerce : LCP, INP et CLS sur une fiche produit

Les métriques de Google ne servent pas qu'au SEO : elles mesurent ce que ressent le client en arrivant sur votre fiche. Nous vous expliquons comment les améliorer dans PrestaShop.

Jesús Meilán
Updated: 26/09/2026 124
Core Web Vitals en e-commerce : LCP, INP et CLS sur une fiche produit
Share:

Les Core Web Vitals sont trois métriques avec lesquelles Google mesure l'expérience de chargement d'une page. Elles influencent le référencement, mais surtout elles reflètent quelque chose qui touche directement les ventes : la page s'affiche-t-elle et réagit-elle vite ?

LCP : le plus grand élément

Le Largest Contentful Paint mesure le temps nécessaire pour afficher le plus grand élément de l'écran initial. Sur une fiche produit, c'est presque toujours l'image principale. Objectif : moins de 2,5 s.

  • N'utilisez pas le chargement différé sur l'image principale.
  • Ajoutez fetchpriority="high" à cette image.
  • Servez-la en WebP ou AVIF et à la taille à laquelle elle s'affiche.
  • Réduisez le temps de réponse du serveur (voir notre article sur le diagnostic de lenteur).

INP : la réponse à l'interaction

L'Interaction to Next Paint a remplacé le FID en 2024. Il mesure le temps que met la page à réagir quand le client clique ou touche quelque chose, par exemple en choisissant une taille ou en appuyant sur « Ajouter au panier ». Objectif : moins de 200 ms.

  • L'ennemi, c'est le JavaScript lourd : chats, pixels, carrousels.
  • Retardez les scripts tiers jusqu'à la première interaction ou jusqu'après le consentement.
  • Évitez les modules qui recalculent les prix avec de nombreuses requêtes à chaque changement de déclinaison.

CLS : les sauts de la page

Le Cumulative Layout Shift mesure à quel point les éléments bougent pendant le chargement. Ce moment où vous allez appuyer sur un bouton et où il descend parce qu'une bannière est apparue. Objectif : moins de 0,1.

  • Indiquez toujours width et height sur les images.
  • Réservez de l'espace pour les bandeaux de cookies, les bannières et les blocs chargés en AJAX.
  • Polices : utilisez font-display: swap et des polices auto-hébergées.

Où mesurer

Dans Google Search Console, rapport « Signaux Web essentiels », avec des données réelles de vos visiteurs regroupées par type de page. C'est un meilleur guide qu'un test isolé sur PageSpeed, car il reflète de vrais mobiles avec de vraies connexions.

Priorité au mobile : la majorité du trafic d'une boutique arrive depuis le mobile, et c'est là que les métriques sont généralement les moins bonnes.
Chargement...
Consentement aux cookies
Retour en haut