Les Core Web Vitals sont trois mesures de l’expérience réelle de vos visiteurs. Sur une boutique Magento 2, elles se dégradent souvent pour les mêmes raisons. Voici comment les mesurer sans se tromper, puis dans quel ordre agir.
Les trois mesures et leurs seuils
Google considère qu’une page offre une bonne expérience lorsque, pour 75 % des visites, ces seuils sont respectés :
- LCP (Largest Contentful Paint) : l’élément principal de la page s’affiche en 2,5 secondes ou moins ;
- INP (Interaction to Next Paint) : la page réagit à une interaction en 200 millisecondes ou moins ;
- CLS (Cumulative Layout Shift) : la mise en page ne bouge pas, avec un score de 0,1 ou moins.
Mesurer d’abord, au bon endroit
Un score Lighthouse obtenu sur votre ordinateur est une mesure de laboratoire : utile pour diagnostiquer, insuffisante pour juger. Ce qui compte pour le référencement, ce sont les données de terrain, collectées sur de vrais visiteurs : le rapport Core Web Vitals de la Search Console et les données CrUX.
Mesurez par type de page, pas seulement l’accueil : page d’accueil, catégorie, fiche produit, panier et paiement n’ont ni les mêmes contenus, ni les mêmes problèmes. Notez l’état de départ de chacune : sans point de départ, aucun gain n’est démontrable.
LCP : commencer par le serveur, puis l’image
Un LCP lent vient presque toujours de l’un de ces trois points :
- Un temps de réponse serveur trop long. Vérifiez que le cache de pages est bien actif sur les pages publiques (Varnish ou cache intégré), qu’un CDN sert les ressources statiques, et que les pages ne sont pas invalidées en continu par des tâches planifiées ou des imports.
- Une image principale chargée trop tard. L’image du premier écran ne doit pas être chargée en différé (
loading="lazy") : elle doit être précisée dans le HTML, dimensionnée, dans un format moderne, et préchargée si nécessaire. - Des ressources qui bloquent l’affichage. CSS et JavaScript chargés avant le premier affichage, polices lourdes ou appelées tardivement.
INP : le JavaScript est presque toujours en cause
L’INP se dégrade lorsque le navigateur est occupé au moment où l’utilisateur clique. Sur un site e-commerce, les coupables habituels sont les scripts tiers (gestionnaire de balises, chat, avis, outils de tests A/B) et les longues tâches JavaScript du thème. Commencez par lister les scripts tiers, mesurer leur coût et supprimer ceux qui ne rapportent plus rien. Chargez les autres plus tard, ou seulement sur les pages où ils servent.
CLS : réserver la place avant que le contenu n’arrive
Un décalage de mise en page apparaît quand un élément s’insère après le premier affichage et pousse le reste de la page. Cherchez :
- les images et bannières sans dimensions déclarées ;
- les polices qui changent la taille du texte au chargement ;
- les blocs remplis côté navigateur après coup (mini-panier, informations du compte client, bandeaux) dont la place n’est pas réservée ;
- les bandeaux promotionnels ou de consentement qui apparaissent en haut de page.
Dans quel ordre agir
- Mesurer chaque type de page, sur le terrain et en laboratoire.
- Corriger le serveur et le cache : c’est ce qui profite à toutes les pages.
- Traiter l’image principale et les ressources bloquantes des pages à fort trafic.
- Faire l’inventaire des scripts tiers et en retirer ou en différer.
- Réserver la place des éléments qui s’insèrent tardivement.
- Re-mesurer après chaque mise en production : les données de terrain mettent plusieurs semaines à refléter un changement, alors vérifiez d’abord en laboratoire.
Un conseil pour finir : testez l’effet de chaque réglage (minification, regroupement des fichiers JavaScript, par exemple) plutôt que de l’activer par principe. Sur certaines configurations, un réglage censé accélérer le site le ralentit.