Core Web Vitals : mesurer, diagnostiquer, corriger

Les Core Web Vitals réunissent trois métriques de Google : le LCP sous 2,5 secondes, l’INP sous 200 millisecondes, le CLS sous 0,1. Chaque seuil se juge au 75e percentile des visites réelles, jamais sur un score de laboratoire. Une seule métrique dans le rouge suffit à faire échouer l’ensemble.

Trois métriques, trois moments distincts de la visite

Les trois indicateurs ne mesurent pas la même chose et ne se corrigent pas avec les mêmes gestes. Les confondre conduit à recompresser une image alors que le vrai retard vient d’un script publicitaire.

Le LCP chronomètre l’attente avant le contenu principal

Largest Contentful Paint marque l’instant où le plus grand élément visible dans la fenêtre d’affichage termine son rendu : une photo de bannière, une vidéo, un gros bloc de texte. Google situe le bon en dessous de 2,5 secondes et le mauvais au-delà de 4 secondes, la zone à améliorer occupant l’intervalle.

C’est la métrique la plus souvent ratée des trois. L’édition 2025 du Web Almanac publiée par HTTP Archive, calculée sur les données du Chrome UX Report de juillet 2025, ne place le LCP en vert que sur 62 % des pages mobiles.

Un détail change tout au moment du diagnostic : l’élément retenu dépend de la taille de la fenêtre. Un téléphone et un écran de 27 pouces ne mesurent pas forcément le même bloc, ce qui explique des écarts parfois spectaculaires entre vos deux rapports.

L’INP mesure la réactivité, du geste au pixel

Interaction to Next Paint est devenu une métrique officielle le 12 mars 2024, annonce faite par l’équipe Chrome sur son blog développeurs. Le support de First Input Delay a été coupé le 9 septembre 2024 : PageSpeed Insights, le rapport CrUX et l’extension Web Vitals ne le servent plus.

La différence de fond tient au périmètre. L’ancienne métrique chronométrait uniquement le délai avant traitement de la toute première interaction de la visite. L’INP retient la latence la plus élevée observée sur l’ensemble de la session, du clic jusqu’à l’image suivante réellement peinte à l’écran, en écartant les valeurs extrêmes sur les pages très sollicitées.

Le seuil du bon tient à 200 millisecondes. Au-delà de 500, la note vire au rouge. Le Web Almanac 2025 crédite 77 % des sites mobiles d’un INP correct, contre 74 % un an plus tôt : la seule des trois métriques à progresser nettement sur la période.

Le CLS note les sauts de la mise en page

Cumulative Layout Shift ne mesure pas un temps mais un score sans unité, produit de la surface déplacée par la distance parcourue. Le bon s’arrête à 0,1, le rouge commence au-delà de 0,25.

Sa définition a été affinée par l’équipe Chrome. Les décalages séparés de moins d’une seconde sont regroupés dans une même fenêtre de session, plafonnée à cinq secondes, et le score conservé est celui de la pire fenêtre. Une page à défilement infini qui charge par paquets n’accumule donc plus indéfiniment son score. Avec 81 % des pages mobiles en vert selon le Web Almanac 2025, la stabilité visuelle reste la mieux tenue des trois disciplines.

Terrain et laboratoire ne racontent pas la même histoire

Deux familles de données coexistent, et la confusion entre les deux alimente la moitié des malentendus sur le sujet.

Les données terrain viennent du Chrome UX Report : des mesures collectées chez de vrais visiteurs Chrome ayant accepté la remontée, agrégées sur une fenêtre glissante de vingt-huit jours. Les données de laboratoire viennent de Lighthouse : un test unique, sur un appareil simulé, avec un réseau volontairement bridé.

Seule la première catégorie sert de signal de classement. Un score de laboratoire à 100 ne vaut aucune garantie quand le rapport terrain affiche du rouge.

Le 75e percentile mérite une seconde de réflexion. La valeur affichée n’est pas une moyenne : trois visites sur quatre doivent se dérouler au moins aussi bien qu’elle. Une poignée de visiteurs sur connexion dégradée ne casse pas votre note. Un quart de votre audience équipée de téléphones d’entrée de gamme la casse immédiatement.

Chaque outil répond à une question différente :

• Le rapport CrUX livre la mesure officielle, celle que Google utilise, avec quatre semaines d’inertie
• La Search Console regroupe vos adresses par gabarit et signale les groupes défaillants, précieux sur un gros site
• PageSpeed Insights affiche côte à côte le terrain et le laboratoire pour une adresse donnée
• L’extension Web Vitals de Chrome montre les trois valeurs en direct pendant votre propre navigation
• Les outils de développement du navigateur enregistrent une trace complète, seul moyen de remonter à la ligne fautive

Une subtilité échappe à beaucoup de webmasters. Le Chrome UX Report ne publie une mesure par adresse que si celle-ci reçoit assez de trafic pour rester statistiquement fiable. En dessous de ce volume, les outils basculent sur la synthèse du domaine entier. Votre page de contact hérite alors de la note de votre page d’accueil, et un correctif appliqué à ce seul gabarit ne fera jamais bouger le chiffre affiché.

Un piège technique mérite d’être connu : Lighthouse ne rapporte pas l’INP, faute d’interaction humaine pendant un test automatisé. Il affiche à la place le temps de blocage total, indicateur voisin mais pas équivalent. Le panorama complet des outils d’analyse de performance d’un site web précise le terrain de jeu de chacun.

Diagnostiquer avant de toucher au code

Découper le LCP en quatre segments

L’équipe Chrome décompose le LCP en quatre sous-parties : le temps jusqu’au premier octet, le délai avant que le navigateur ne commence à charger la ressource, la durée de ce chargement, puis le délai de rendu de l’élément. Les deux délais devraient tendre vers zéro, et la documentation recommande de maintenir le délai avant chargement sous 10 % du total.

L’erreur classique consiste à recompresser une image déjà légère. Quand le retard se loge dans le délai avant chargement, le coupable est ailleurs : ressource découverte tard parce qu’elle arrive par JavaScript, déclarée en arrière-plan CSS, ou dissimulée derrière un carrousel.

Remonter la chaîne de l’INP

Une interaction lente se décompose en trois phases : le délai d’entrée, la durée de traitement, le délai de présentation. Chacune désigne un coupable distinct, et la lecture prend une minute dans un enregistrement de performance.

Un délai d’entrée élevé signale que le fil principal était déjà occupé quand le doigt a touché l’écran, typiquement par un script de mesure d’audience ou une régie publicitaire. Une durée de traitement élevée pointe votre propre gestionnaire d’événement. Un délai de présentation élevé trahit un rendu coûteux : arbre DOM démesuré, animations sur des propriétés qui forcent un recalcul complet de la mise en page.

Retrouver l’élément qui décale

Le CLS se filme plutôt qu’il ne se calcule. Un enregistrement de performance surligne chaque décalage et nomme l’élément responsable, image par image. Trois familles de coupables reviennent sans cesse : les images et cadres publiés sans dimensions déclarées, les polices web qui remplacent une police de secours aux métriques différentes, et tout ce qui s’insère après coup au-dessus du contenu, du bandeau de consentement à l’encart promotionnel.

Les correctifs qui déplacent réellement les compteurs

Faire tomber le LCP passe par une série de gestes ordonnés :

• Servir l’image de bannière au bon format et à la bonne dimension, jamais un fichier de 2 000 pixels réduit en CSS
• Déclarer la ressource critique directement dans le HTML, avec une priorité de récupération haute
• Ouvrir à l’avance la connexion vers le domaine qui héberge cette ressource
• Supprimer le rendu différé côté client pour tout ce qui occupe le premier écran
• Attaquer le temps jusqu’au premier octet par le cache serveur et un réseau de diffusion
• Sortir du chemin critique les feuilles de style et les scripts bloquants

Libérer le fil principal pour l’INP demande une autre discipline. Découpez les tâches longues, rendez la main au navigateur entre deux blocs de travail, différez tout ce qui n’est pas nécessaire à l’affichage initial. Les scripts tiers méritent un audit sans complaisance : chaque balise marketing ajoutée coûte des millisecondes à chaque clic, sur chaque page, pour chaque visiteur.

La stabilité visuelle se gagne à la construction, jamais en rattrapage :

• Fixer largeur et hauteur sur toutes les images, ou un ratio d’aspect en CSS
• Réserver un espace de dimensions connues aux emplacements publicitaires, même vides
• Charger les polices avec une stratégie d’affichage qui limite la substitution brutale
• Poser les bandeaux en superposition plutôt qu’en poussant le contenu vers le bas
• Animer avec les propriétés de transformation, qui évitent le recalcul de mise en page

Une refonte concentre ces trois leviers au même moment. Mesurez avant et après avec le même outil et dans les mêmes conditions, au même titre qu’une migration de site sans perte de référencement se contrôle par comparaison chiffrée.

Ce que les Core Web Vitals pèsent vraiment en référencement

Le Web Almanac 2025 chiffre l’état du parc mondial : 48 % des origines mobiles franchissent les trois seuils, contre 56 % en version bureau, sur les données CrUX de juillet 2025. La progression est réelle, la barre mobile plafonnait à 32 % en 2021.

L’écart de vingt points entre mobile et bureau raconte l’essentiel du problème. Les seuils sont pourtant identiques sur les deux formats, seule la restitution est séparée. Un téléphone de milieu de gamme exécute le même paquet JavaScript bien plus lentement qu’un ordinateur récent, sur un réseau moins stable. Concevoir pour la machine du bureau du développeur revient à ignorer la majorité de son audience.

Google range ces métriques dans ses signaux d’expérience de page, et sa documentation Search Central le formule sans détour : la pertinence du contenu prime, et une page réellement pertinente ressortira malgré une expérience médiocre. Ces indicateurs départagent des pages comparables, ils ne rachètent pas un contenu faible. Les fondamentaux du référencement naturel restent le socle sur lequel la performance technique vient s’ajouter.

Un dernier point de méthode évite bien des découragements. La fenêtre de 28 jours glissants du rapport CrUX lisse vos corrections : un correctif déployé aujourd’hui commence à peser demain et ne se reflète pleinement qu’un mois plus tard. Vérifiez l’effet immédiat dans les outils de développement, patientez pour le verdict officiel.

Prochaine étape : ouvrez la Search Console, listez les groupes d’adresses signalés en rouge, retenez le gabarit qui concentre le plus de pages. Une seule correction sur ce gabarit répare des centaines d’adresses d’un coup, et reste le meilleur rapport effort-résultat de toute une stratégie de référencement pour PME.