Core Web Vitals : définition, métriques et PageSpeed

Core Web Vitals : la définition

Google a défini trois métriques pour juger la qualité de l'expérience sur la page, telle que la vit un internaute. Combien de temps le contenu principal met-il à s'afficher ? La page répond-elle vite à une interaction ? Tient-elle en place pendant le chargement ? En français, le moteur parle de « signaux web essentiels ». Leur particularité tient en un mot : elles reposent sur des visites réelles (celles de vos propres visiteurs), et non sur une simulation.

Décomposons le nom. « Web Vitals » renvoie au programme global de Google autour de la performance perçue d'un site. « Core » désigne le noyau d'indicateurs jugés essentiels, quel que soit le type de site. Ce noyau bouge : en mars 2024, l'INP a pris la place du FID comme mesure officielle de la réactivité.

Ce que les Core Web Vitals ne mesurent pas

Oubliez l'idée d'une note de design ou d'un audit de référencement naturel complet. Une page peut afficher trois voyants verts et rester introuvable dans la page de résultats si son contenu ne répond à aucune question réelle. L'inverse se vérifie tout autant : votre meilleur article déçoit si l'écran reste blanc pendant trois secondes. Confort d'usage, donc, et pas pertinence.

À quoi servent les Core Web Vitals ?

Pour un dirigeant, la note en elle-même ne vaut rien. Ce qu'elle révèle, en revanche, parle : un visiteur qui attend, qui clique dans le vide, qui voit le bouton se déplacer sous son doigt. Mettre un chiffre sur ces frictions change la discussion avec un prestataire, puisque vous n'arrivez plus avec la vague impression que « le site rame ».

Un signal de classement, mais pas le premier

L'expérience sur la page fait partie des signaux de classement de Google. Concrètement, elle départage surtout des pages de qualité comparable. Votre concurrent traite le même sujet aussi bien que vous, mais sa page s'affiche deux fois plus vite ? Le moteur a une raison de le préférer. Son contenu est pauvre ? Aucun score ne le sauvera.

Un levier de conversion direct

Voilà l'argument le plus concret. Chaque seconde d'attente, chaque décalage de mise en page vous coûte des visiteurs avant le formulaire ou le panier. Soigner ces métriques fait donc monter le taux de conversion sur l'ensemble du trafic, qu'il arrive de Google, d'une campagne payante ou d'un e-mail. Rares sont les chantiers techniques dont le bénéfice ne dépend pas d'un seul canal.

Un langage commun entre vous et votre prestataire

Trois chiffres, trois seuils, une source vérifiable : on cadre difficilement une mission plus clairement. Demandez un état des lieux avant travaux, puis exigez le même relevé après. Dans l'ordre d'utilité pour une TPE ou une PME :

• Avant une refonte : savoir d'où l'on part, page d'accueil et pages de vente comprises.
• Pendant un chantier technique : vérifier qu'aucune mise en production ne dégrade l'existant.
• Après une migration : repérer la chute de performance avant qu'elle vous coûte du trafic.
• En routine : surveiller les gabarits qui font le chiffre d'affaires, pas seulement l'accueil.

Comment ça marche : les trois métriques

Chaque métrique porte sur un moment distinct de la visite : l'affichage, le clic, puis la tenue de la mise en page. Google tranche au 75e percentile des visites des 28 derniers jours. Traduction : trois visiteurs sur quatre doivent vivre une expérience au moins égale au seuil pour qu'une page soit jugée bonne. D'où l'inutilité d'un test isolé depuis votre ordinateur de bureau, qui ne reflète presque jamais le terrain.

• LCP (Largest Contentful Paint) : le temps mis pour afficher le plus grand élément visible de la fenêtre, le plus souvent une image ou un bloc de texte.
• INP (Interaction to Next Paint) : la réactivité, c'est-à-dire le délai entre un clic (ou une frappe) et la réponse visible à l'écran.
• CLS (Cumulative Layout Shift) : la stabilité visuelle, obtenue en additionnant les décalages de contenu survenus sans action de l'internaute.

Le LCP, ou la vitesse d'affichage perçue

Attention, le largest contentful paint ne chronomètre pas le chargement complet. Il s'arrête au moment où l'élément principal devient visible, celui qui fait dire au visiteur « ça y est, la page est là ». Bon résultat jusqu'à 2,5 secondes, selon Google ; au-delà de 4 secondes, la page est mauvaise. Entre les deux, vous êtes dans la zone « à améliorer ».

Les causes ? Presque toujours les mêmes : un serveur lent à répondre, une image d'en-tête non compressée, des ressources CSS et JavaScript qui bloquent le rendu. Un hébergement web sous-dimensionné pèse plus lourd qu'on ne l'imagine, et un réseau de diffusion de contenu règle une partie du problème pour les visiteurs éloignés de votre serveur. Identifiez d'abord quel élément porte le LCP sur la page : c'est lui, et lui seul, qu'il faut servir en priorité.

L'INP, ou la réactivité aux clics

Interaction to next paint observe toutes les interactions d'une visite, puis retient la plus lente ou presque. Le principe tient en une image : on clique, et on compte jusqu'à ce que l'écran change. Google place la barre à 200 millisecondes pour un bon résultat et juge mauvais tout ce qui franchit 500 millisecondes. En dessous, l'interface paraît instantanée ; au-dessus, l'utilisateur reclique, persuadé que rien ne s'est passé.

Le coupable, c'est presque toujours le JavaScript. Trop de scripts s'exécutent en même temps, le navigateur ne répond plus, et le menu met une demi-seconde à s'ouvrir. Regardez d'abord du côté des scripts tiers accumulés au fil des années : bannières de consentement, chats en direct, pixels publicitaires. Un tri dans ces balises produit souvent une amélioration visible en quelques jours.

Le CLS, ou la stabilité de la mise en page

Voici le plus simple à comprendre et le plus agaçant à subir. Vous visez un lien, une publicité se charge au-dessus, votre doigt tombe ailleurs. Exaspérant ! Chaque layout shift est noté selon la surface déplacée et l'ampleur du mouvement, puis le cumulative layout additionne ces décalages. Bon score à 0,1 ; au-delà de 0,25, le cumulative layout shift est considéré comme mauvais.

Trois causes reviennent sans cesse : des images insérées sans largeur ni hauteur, des polices personnalisées qui remplacent la police système après coup, des blocs injectés dynamiquement au-dessus du contenu existant. Réservez l'espace à l'avance et vous réglez la quasi-totalité des cas. Un site responsive bien construit prévoit ces emplacements dès l'intégration, ce qui vous évite de corriger métrique par métrique ensuite.

Avec quels outils mesurer et évaluer vos Core Web Vitals

Deux familles de données existent, et les confondre mène à de mauvaises décisions. Les données réelles viennent des visites effectives des utilisateurs de Chrome ayant accepté le partage, via le rapport d'expérience utilisateur de Google. Les données de laboratoire sortent d'un test simulé, lancé à la demande, sur une machine et une connexion fictives. Retenez ceci : seules les données réelles comptent pour l'évaluation officielle d'une page.

PageSpeed Insights

Commencez par là pour un test Core Web Vitals. Vous saisissez une adresse, l'outil affiche, quand elles existent, les mesures réelles des 28 derniers jours, puis un diagnostic de laboratoire dont les recommandations sont classées par gain estimé. Méfiez-vous d'une confusion fréquente : le score de performance sur 100 en haut de page est une note de laboratoire, pas le verdict Core Web Vitals. Le vrai résultat, c'est le bandeau qui indique si la page passe ou non l'évaluation.

Google Search Console

Un rapport dédié y raisonne à l'échelle du site, et non d'une page isolée. Vos adresses sont regroupées par gabarit, avec les groupes problématiques signalés sur mobile comme sur ordinateur. Des centaines de pages ? Ouvrez cet outil en premier : il désigne les modèles à corriger, ce qui vous dispense de traiter les URL une par une. Une visite par mois suffit, l'évolution se lit en quelques secondes.

Lighthouse et les outils du navigateur

Intégré à Chrome, Lighthouse rejoue le chargement de la page dans des conditions dégradées et pointe les ressources fautives. L'onglet Performance va plus loin : image par image, il montre ce qui bloque l'affichage ou retarde la réponse à un clic. Ces outils ne remplacent pas les mesures de terrain, mais ce sont eux qui expliquent le pourquoi. On s'en sert pour diagnostiquer, jamais pour se noter.

Le suivi sur vos propres visiteurs

Votre chiffre d'affaires dépend du web ? La bibliothèque officielle web-vitals remonte alors les mesures de chaque visite dans votre outil d'analyse. Vous lisez les chiffres de vos clients, segmentés par type d'appareil, par navigateur ou par page. C'est le niveau au-dessus, celui que nous mettons en place sur les projets où la performance pèse directement sur le référencement SEO et sur les ventes.

Un exemple concret de diagnostic

Prenons un site vitrine de PME, construit il y a quatre ans et enrichi depuis de plusieurs outils marketing. Depuis son bureau en fibre, le dirigeant trouve le site « correct ». Google Search Console, de son côté, signale que le gabarit des pages de service échoue sur mobile. Rien d'étrange dans cette contradiction : il teste un cas favorable, le moteur mesure l'ensemble des visites réelles, dont beaucoup en 4G.

Vous tenez là la bonne méthode : partir des données réelles, remonter à la cause technique, corriger un gabarit entier plutôt qu'une page. Puis vérifier 28 jours plus tard, le temps que les nouvelles visites alimentent la mesure. Ce délai surprend le plus nos clients : le travail est fait, mais le verdict met un mois à bouger.

Les erreurs courantes à éviter

Confondre le laboratoire et le terrain

Numéro un, sans hésiter. Un score de laboratoire médiocre sur une page dont les mesures réelles sont bonnes ne justifie aucun chantier. Le cas inverse est plus grave : un beau résultat simulé masque parfois une expérience désastreuse sur les téléphones milieu de gamme de vos clients. Tranchez avec les données de terrain, et gardez le laboratoire pour comprendre.

Courir après le 100 sur 100

Je le dis sans détour : visez les seuils, pas la note parfaite. Les derniers points coûtent très cher en développement pour un bénéfice imperceptible. Amener dix gabarits dans le vert vaut mieux qu'offrir un score parfait à la page d'accueil pendant que les fiches produit restent rouges.

N'optimiser que la page d'accueil

Sur un site bien référencé, l'accueil est rarement la porte d'entrée principale. Vos visiteurs arrivent par des articles, des pages de service, des fiches produit. Évaluez et optimisez ces gabarits-là en priorité : ce sont eux qui captent le trafic et déclenchent les demandes de devis.

Empiler les scripts sans jamais faire le ménage

Chaque outil ajouté « juste pour tester » reste en place des années et pèse sur l'interaction. Faites l'inventaire une fois par an : gardez ce qui sert à une décision, supprimez le reste. Voici les recommandations que nous appliquons en premier sur la plupart des sites :

• Compressez les images au format moderne et servez une taille adaptée à chaque écran.
• Précisez systématiquement la largeur et la hauteur des images et des blocs publicitaires.
• Différez ou supprimez les scripts tiers non indispensables au premier affichage.
• Préchargez la police principale et l'élément responsable du LCP.
• Activez la mise en cache et un réseau de diffusion si votre audience est dispersée.
• Mesurez avant et après chaque mise en production : corriger à l'aveugle ne mène nulle part.

Questions fréquentes