Core Web Vitals : LCP, INP et CLS, seuils et corrections
Mis à jour le
Les Core Web Vitals sont trois mesures de l'expérience réelle des visiteurs : le LCP pour la vitesse d'affichage (bon en dessous de 2,5 secondes), l'INP pour la réactivité (bon en dessous de 200 millisecondes) et le CLS pour la stabilité visuelle (bon en dessous de 0,1). Une page est jugée bonne lorsque 75 % de ses visites respectent ces seuils.
Ce que mesure chaque métrique
Les trois métriques répondent chacune à une question que se pose le visiteur : est-ce que ça s'affiche, est-ce que ça réagit, est-ce que ça reste en place ?
- LCP (Largest Contentful Paint) : le délai avant l'affichage du plus grand élément visible — souvent l'image principale ou le titre.
- INP (Interaction to Next Paint) : le temps que met la page à réagir visuellement à un clic, un appui ou une frappe. Il a remplacé le FID en mars 2024.
- CLS (Cumulative Layout Shift) : l'ampleur des décalages de mise en page inattendus pendant la vie de la page.
Labo et terrain ne disent pas la même chose
Lighthouse mesure en laboratoire : une machine, un réseau simulé, un seul chargement et aucune interaction. Il ne peut donc pas mesurer l'INP et ne voit qu'une partie du CLS.
Les données de terrain viennent des visiteurs réels, avec leurs appareils et leurs connexions. Ce sont elles que Google retient. Un score de laboratoire excellent avec un terrain médiocre révèle en général des appareils plus lents que la machine de test.
Les corrections qui portent
Pour le LCP : servir le HTML depuis un cache, ne pas différer l'image principale et alléger ce qui bloque le rendu. Pour le CLS : réserver la place de chaque image, encart et bloc chargé tardivement, et héberger soi-même les polices. Un dégradé CSS remplace avantageusement une image de fond décorative : aucune requête, aucun décalage.
Pour l'INP : réduire le JavaScript exécuté au chargement et découper les traitements longs. Chaque composant interactif ajouté a un coût ; un contenu qui n'a pas besoin de réagir n'a pas besoin de JavaScript côté navigateur.
En bref
Quels sont les seuils des Core Web Vitals ?
Un LCP inférieur ou égal à 2,5 secondes, un INP inférieur ou égal à 200 millisecondes et un CLS inférieur ou égal à 0,1, mesurés au 75e centile des visites.
Quelle différence entre Lighthouse et les données de terrain ?
Lighthouse simule un chargement unique dans des conditions fixes. Les données de terrain agrègent les visites réelles, sur tous les appareils et réseaux. Seules ces dernières reflètent l'expérience des visiteurs.
Comment obtenir un CLS de zéro ?
En réservant à l'avance l'espace de tout ce qui s'affiche après le premier rendu : dimensions explicites sur les images, hauteur minimale pour les encarts, polices auto-hébergées.
Poursuivre dans le Lab
Performance web — les autres notes
Outils associés
- Générateur de Dégradés CSSComposez des dégradés linéaires ou radiaux, ajustez les couleurs et l'angle, et copiez la propriété background prête à coller.
- Convertisseur PX en REM / EmConvertissez vos valeurs px en rem ou em, et inversement, selon la taille de police racine, pour un web responsive et accessible.