Core Web Vitals : comprendre et corriger LCP, INP et CLS
LCP, INP, CLS : ces trois métriques déterminent en grande partie votre classement Google et votre taux de conversion. Voici ce qu'elles mesurent vraiment, et comment les corriger.
Les Core Web Vitals sont les trois signaux web essentiels que Google utilise pour évaluer l'expérience réelle d'une page : la vitesse d'affichage, la réactivité aux interactions, et la stabilité visuelle. Ils influencent directement le classement dans les résultats de recherche et, plus concrètement encore, le taux de conversion.
LCP : la vitesse d'affichage du contenu principal
Le Largest Contentful Paint (LCP) mesure le temps nécessaire pour afficher le plus grand élément visible de la page (souvent une image héro ou un titre principal). Un bon score est inférieur à 2,5 secondes.
Causes fréquentes : des images non optimisées ou trop lourdes, un serveur lent à répondre, des polices personnalisées qui bloquent le rendu, ou un rendu côté client (CSR) qui retarde l'affichage du contenu réel.
Correctifs : compresser et redimensionner les images à leur taille d'affichage réelle, précharger la police et l'image principale, et privilégier un rendu statique ou SSR pour le contenu au-dessus de la ligne de flottaison — un sujet détaillé dans Next.js : SSR, SSG ou ISR, choisir le bon mode de rendu.
INP : la réactivité aux interactions
L'Interaction to Next Paint (INP), qui a remplacé le First Input Delay, mesure le temps entre l'action d'un utilisateur (clic, saisie) et la réponse visuelle de la page. Un bon score se situe sous 200 millisecondes.
Causes fréquentes : trop de JavaScript exécuté sur le thread principal, des gestionnaires d'événements lourds, ou des composants React qui se re-rendent inutilement.
Correctifs : découper le JavaScript en plus petits morceaux (code-splitting), différer le chargement des scripts non essentiels, et limiter les re-rendus inutiles côté React.
CLS : la stabilité visuelle
Le Cumulative Layout Shift (CLS) mesure les déplacements inattendus d'éléments à l'écran pendant le chargement — la cause typique du clic accidentel sur le mauvais bouton. Un bon score est inférieur à 0,1.
Causes fréquentes : des images ou publicités sans dimensions réservées, des polices web qui remplacent une police par défaut après le chargement, du contenu injecté dynamiquement au-dessus d'éléments existants.
Correctifs : toujours définir width et height (ou un ratio d'aspect CSS) sur les images, réserver l'espace nécessaire pour tout contenu chargé dynamiquement.
Tableau récapitulatif
| Métrique | Ce qu'elle mesure | Bon score | Levier principal |
|---|---|---|---|
| LCP | Vitesse d'affichage du contenu principal | < 2,5 s | Images, rendu serveur, polices |
| INP | Réactivité aux interactions | < 200 ms | JavaScript, code-splitting |
| CLS | Stabilité visuelle | < 0,1 | Dimensions réservées, chargement de polices |
Un chantier qui commence par un audit
Avant de corriger, il faut mesurer précisément où se situent les points de blocage sur vos pages réelles — la méthode complète est détaillée dans audit Lighthouse : de 50 à 95 sur les quatre scores.
Performance et accessibilité : deux sujets liés
Une bonne stabilité visuelle et une réactivité correcte profitent directement à l'accessibilité du site, notamment pour les utilisateurs de technologies d'assistance — un lien approfondi dans accessibilité web : rendre son site conforme RGAA et WCAG.
En résumé
LCP, INP et CLS ne sont pas des métriques abstraites réservées aux développeurs : elles mesurent une expérience réellement perçue par vos visiteurs, avec un impact direct sur le référencement et la conversion. Un accompagnement en optimisation de performance web permet de diagnostiquer précisément ces trois signaux et de les corriger durablement, pas seulement pour un audit ponctuel.