Core Web Vitals : c’est quoi ?

Les Core Web Vitals (ou Signaux Web Essentiels) sont des métriques cruciales pour mesurer la performance et l’expérience utilisateur (UX) d’un site web.

Un site internet peut proposer un excellent contenu et pourtant offrir une mauvaise expérience utilisateur : une page qui met trop de temps à afficher son élément principal, un clic qui tarde à produire une réponse visible ou une image qui décale soudainement tout le contenu. 

Parmi ces Core Web Vitals, on retrouve : 

• Le LCP (Largest Contentful Paint) mesure la vitesse de chargement du contenu principal visible
• l’INP (Interaction to Next Paint) évalue la réactivité de la page après une interaction utilisateur
• le CLS (Cumulative Layout Shift) mesure sa stabilité visuelle.

Ces métriques permettent d’évaluer une partie de l’expérience réelle des visiteurs et font également partie des signaux pris en compte par Google pour le référencement. Leur impact SEO ne doit toutefois pas être surestimé : un bon score ne remplacera jamais un contenu de qualité.

Les Core Web Vitals peuvent représenter une opportunité d’améliorer l’expérience de vos visiteurs et, dans certains cas, de vous démarquer de concurrents aux contenus et à l’autorité similaires. 

C’est d’ailleurs un aspect que je prends en compte dans mon service de création site internet freelance : concevoir un site ne consiste pas seulement à travailler son apparence, mais aussi à offrir une expérience rapide, stable et réactive aux internautes.

Qu’est-ce que les Core Web Vitals ?

Les Core Web Vitals regroupent trois métriques essentielles permettant de mesurer la qualité de l’expérience utilisateur d’une page web. Chaque indicateur évalue un aspect différent : la vitesse de chargement avec le LCP, la réactivité avec l’INP et la stabilité de la mise en page avec le CLS.

LCP : Largest Contentful Paint

Le LCP (Largest Contentful Paint) mesure le temps de chargement du plus grand élément visible dans la fenêtre d’affichage, généralement au-dessus de la ligne de flottaison, lors du chargement initial de la page.

Cet élément peut être une image, une vidéo ou un bloc de texte. Cet indicateur est essentiel pour évaluer la vitesse à laquelle le contenu principal devient visible pour l’utilisateur.

Pour être considéré comme bon, le LCP doit être inférieur ou égal à 2,5 secondes pour au moins 75 % des visites.

	Bon	Amélioration nécessaire	Médiocre
LCP	< 2,5 secondes	<= 4 secondes	> 4 secondes

INP : Interaction to Next Paint

L’INP (Interaction to Next Paint) évalue la réactivité d’une page. Cette métrique mesure le délai entre une interaction utilisateur — un clic, un tap ou la pression d’une touche — et le moment où l’écran affiche une réponse visuelle.

Par exemple, lorsque vous cliquez sur un bouton pour ouvrir un menu, l’INP mesure le temps nécessaire avant que le changement d’état soit répercuté à l’écran.

Un bon score INP est inférieur ou égal à 200 millisecondes. Un délai trop important peut donner l’impression que le site bug ou que la fonctionnalité ne répond pas, ce qui peut dégrader l’expérience utilisateur.

L’INP a remplacé le FID (First Input Delay) parmi les Core Web Vitals en 2024. Contrairement au FID, qui mesurait uniquement le délai avant le traitement de la première interaction, l’INP prend en compte les interactions réalisées pendant la visite afin d’évaluer plus largement la réactivité de la page.

	Bon	Amélioration nécessaire	Médiocre
INP	<= 200 milliseconde	<= 500 milliseconde	> 500 milliseconde

CLS : Cumulative Layout Shift

Le CLS (Cumulative Layout Shift) mesure la stabilité visuelle de la page. Il permet de détecter les changements de mise en page inattendus pendant la navigation.

Vous avez peut-être déjà voulu cliquer sur un bouton avant qu’une image, une publicité ou une bannière ne se charge et décale soudainement le contenu. Le CLS cherche précisément à mesurer ce type de problème.

Un bon score CLS est inférieur ou égal à 0,1. Plus la mise en page reste stable pendant le chargement d’une page, meilleure est l’expérience visuelle pour l’utilisateur.

	Bon	Amélioration nécessaire	Médiocre
CLS	<= 0,1	<= 0,25	> 0,25

Pourquoi les Core Web Vitals sont-ils importants ?

Depuis 2021, les Core Web Vitals font partie des signaux liés à l’expérience de la page pris en compte par les systèmes de classement de Google. Ils peuvent donc avoir un impact sur le SEO, la visibilité et le référencement naturel d’un site web.

Cet impact ne doit toutefois pas être surestimé. Les Core Web Vitals ne remplacent pas un contenu de qualité, une bonne réponse à l’intention de recherche ou l’autorité d’un site. Il serait donc contre-productif de consacrer toute votre stratégie SEO à l’obtention d’un score parfait au détriment de votre contenu et de votre acquisition de backlinks.

Ils font partie d’un ensemble plus large de KPI de site web essentiels à surveiller pour conserver une approche équilibrée.

Voici trois situations dans lesquelles l’optimisation de vos Core Web Vitals peut apporter une réelle valeur :

• vos résultats pour les trois indicateurs sont mauvais ou médiocres et plusieurs actions simples peuvent améliorer rapidement vos performances ;
• vos concurrents disposent d’une autorité et d’un contenu similaires, mais proposent une expérience utilisateur moins performante ;
• vous utilisez Google Ads : une page de destination rapide et accessible peut contribuer à une meilleure expérience après le clic et soutenir la qualité globale de votre parcours de conversion.

L’objectif n’est donc pas d’obtenir un score parfait à tout prix, mais de détecter les problèmes qui ont un impact réel sur vos utilisateurs et de concentrer vos efforts sur les optimisations les plus efficaces.

Comment les mesurer ?

Il existe plusieurs outils permettant de mesurer les Core Web Vitals d’un site et d’identifier les principaux points d’amélioration.

Avant de lancer un test, il est important de comprendre la différence entre les données de terrain et les données de laboratoire.

Les données de terrain proviennent de l’expérience réelle des utilisateurs. Elles permettent d’évaluer les performances de vos pages dans différentes conditions : appareil, navigateur, qualité du réseau ou puissance de l’ordinateur.

Les données de laboratoire reposent, quant à elles, sur une simulation réalisée dans un environnement contrôlé. Elles sont particulièrement utiles pour réaliser un audit, reproduire un problème et obtenir des recommandations techniques.

Les deux approches sont donc complémentaires : les données réelles indiquent ce que vivent vos visiteurs, tandis que les tests de laboratoire vous aident à comprendre la cause d’un problème.

Pagespeed Insights

PageSpeed Insights est un outil gratuit de Google permettant d’analyser les performances d’une URL sur mobile et ordinateur.

Son rapport présente les Core Web Vitals disponibles pour la page analysée et fournit des informations issues d’un test de performance. Vous pouvez ainsi consulter différents indicateurs et critères comme le LCP, le CLS, le FCP, le TBT ou le Speed Index.

Lorsque suffisamment de données sont disponibles, PageSpeed Insights s’appuie sur le Chrome UX Report (CrUX) pour présenter des données de terrain issues d’utilisateurs réels de Chrome. Ces informations permettent d’obtenir une vue plus représentative de l’expérience réellement vécue sur la page ou, selon les données disponibles, sur l’ensemble du site.

Le rapport propose également des recommandations et des opportunités d’optimisation spécifiques : ressources qui bloquent le rendu, images trop lourdes, JavaScript inutile, problème de cache ou encore temps de réponse du serveur.

Certaines recommandations sont simples à mettre en œuvre. D’autres sont plus techniques et peuvent nécessiter l’expertise d’un développeur.

Extension Lighthouse (Google Chrome)

Lighthouse est un outil open source développé par Google. Il permet de réaliser un audit d’une page et d’obtenir un rapport sur plusieurs critères, notamment la performance, l’accessibilité et certaines bonnes pratiques du web.

Lighthouse est directement accessible dans les outils de développement de Google Chrome. Il peut également être utilisé sous différentes formes selon votre environnement de développement.

Pour une analyse simple, je recommande généralement de commencer par PageSpeed Insights. Lighthouse devient particulièrement utile pour réaliser des tests techniques et analyser une version précise d’une page dans un environnement de laboratoire.

Il faut toutefois garder en tête qu’un test Lighthouse ne représente pas directement l’expérience de tous vos utilisateurs réels.

Google Search Console

Vous pouvez accéder à un rapport Core Web Vitals dans la Google Search Console, sous le menu consacré à l’expérience.

Ce tableau de bord présente l’état des Signaux Web Essentiels par type d’appareil — mobile et ordinateur — et regroupe les URL présentant des caractéristiques similaires.

Cet outil est particulièrement utile pour obtenir une vue d’ensemble de votre site et identifier les groupes de pages qui nécessitent une analyse supplémentaire.

Si votre site est récent ou ne dispose pas d’un nombre suffisant de visites, Google peut indiquer qu’il n’existe pas assez de données d’utilisation pour ce type d’appareil.

Outil de développement Google (Devtool)

Pour les utilisateurs plus techniques, les Chrome DevTools permettent d’observer en détail le chargement d’une page et l’activité du navigateur.

Dans l’onglet Performance, vous pouvez analyser les ressources chargées, les longues tâches JavaScript, l’activité du thread principal et les la liste des événements qui peuvent ralentir l’affichage ou l’interactivité.

Vous pouvez également modifier les conditions du test en simulant un réseau plus lent ou un appareil moins puissant. Cette approche est efficace pour détecter un problème spécifique et comprendre pourquoi une page fonctionne correctement sur un ordinateur récent, mais devient lente dans des conditions moins favorables.

Comment améliorer ses résultats Core Web Vitals

Une bonne optimisation commence par une analyse. Avant de modifier votre code, identifiez le signal qui pose problème, recherchez sa cause et choisissez les actions qui auront le plus d’impact.

Il n’existe pas une recommandation universelle valable pour tous les sites web. Une mauvaise performance peut provenir d’un média trop lourd, d’un serveur lent, d’un script tiers, d’une mauvaise mise en cache ou d’une ressource qui bloque le rendu.

Comment optimiser le LCP ?

Optimiser le LCP demande une attention particulière à ce qui s’affiche en premier lors du chargement d’une page. C’est particulièrement important pour une page d’accueil, où les éléments situés au-dessus de la ligne de flottaison jouent un rôle essentiel pour capter l’attention du visiteur et lui faire comprendre rapidement ce que vous proposez.

Pour obtenir un LCP inférieur ou égal à 2,5 secondes, vous pouvez :

• optimiser la taille des images : si une image est affichée en 40 × 40 pixels sur votre site mais que sa résolution réelle est de 2 000 × 2 000 pixels, vous chargez une ressource inutilement lourde (point particulièrement important lors de la création d’un site internet pour artisan, où les photos de réalisations peuvent rapidement représenter une part importante du poids des pages.);
• utiliser des formats adaptés au web comme WebP ou AVIF ;
• utiliser fetchpriority="high" sur l’image LCP lorsque cela est pertinent ;
• utiliser rel="preload" dans le HTML pour précharger une ressource critique ;
• ne pas appliquer de lazy loading à une image située au-dessus de la ligne de flottaison ;
• utiliser un CDN pour distribuer plus rapidement certaines ressources statiques ;
• mettre en place une stratégie de mise en cache payante;
• réduire, lorsque cela est nécessaire, le Time to First Byte (TTFB) en améliorant le temps de réponse du serveur.

Le LCP ne dépend donc pas uniquement du poids d’une média. Le serveur, le HTML initial, le CSS critique, l’ordre de chargement des ressources et la mise en cache peuvent également avoir un impact.

Comment optimiser l’INP ?

Pour qu’une interaction utilisateur déclenche une réponse visuelle en moins de 200 millisecondes, le navigateur doit pouvoir traiter rapidement l’action demandée.

Vous pouvez notamment :

• réduire le JavaScript inutile ou trop lourd ;
• désactiver les scripts tiers non essentiels ;
• différer le chargement des scripts qui ne sont pas nécessaires immédiatement ;
• fragmenter les longues tâches JavaScript supérieures à 50 ms ;
• éviter de bloquer trop longtemps le thread principal ;
• limiter les animations JavaScript complexes et privilégier, lorsque c’est possible, des transitions CSS ;
• tester les fonctionnalités importantes comme les menus, formulaires et boutons.

Objectif ? Lorsqu’un utilisateur vient de cliquer, il doit percevoir rapidement une réponse. Une mauvaise réactivité peut créer une attente et donner l’impression que le site ne fonctionne pas.

Comment optimiser le CLS ?

Pour améliorer le CLS, vous devez limiter les changements inattendus de mise en page.

Vous pouvez :

• définir les dimensions width et height de vos images et vidéos ;
• réserver un espace fixe pour les publicités, iframes et contenus intégrés ;
• précharger les polices critiques lorsque cela est pertinent ;
• éviter d’injecter dynamiquement un élément au-dessus d’un contenu déjà visible sans réserver l’espace nécessaire ;
• tester les bannières de cookies, formulaires, messages et autres éléments susceptibles de modifier la mise en page.

L’objectif est de conserver une page stable afin que l’utilisateur puisse lire, naviguer et cliquer sans qu’un changement visuel inattendu ne perturbe son action.

Pour aller plus loin : les autres indicateurs de performance

En plus des Core Web Vitals, PageSpeed Insights et Lighthouse présentent d’autres indicateurs utiles pour analyser les performances d’une page.

Ces métriques ne sont pas toutes des Core Web Vitals et ne doivent donc pas être confondues avec le LCP, l’INP et le CLS. Elles peuvent néanmoins fournir des informations supplémentaires pour comprendre la cause d’un site peu performant.

TBT : Total Blocking Time

Le Total Blocking Time mesure le temps total pendant lequel le thread principal est bloqué par de longues tâches, ce qui peut empêcher le navigateur de répondre rapidement.

Le TBT est une métrique de laboratoire. Il peut notamment aider à détecter des problèmes de JavaScript susceptibles d’affecter la réactivité d’une page.

Pour améliorer le TBT, vous pouvez :

• réduire le JavaScript inutile ;
• reporter les scripts non critiques ;
• fragmenter les tâches longues ;
• éviter les scripts synchrones trop lourds.

Le TBT est particulièrement utile pendant une phase d’analyse technique, mais il ne remplace pas l’INP mesuré à partir de données réelles.

FCP : First Contentful Paint

Le First Contentful Paint (FCP) mesure le temps nécessaire avant l’affichage du premier élément de contenu visible.

Plus ce délai est long, plus l’utilisateur reste face à une page vide. Un FCP rapide permet donc de montrer rapidement au visiteur que le chargement de la page est en cours.

Pour optimiser le FCP, vous pouvez notamment :

• minifier le CSS ;
• réduire les ressources qui bloquent le rendu ;
• optimiser et compresser les images ;
• utiliser des formats comme WebP ou AVIF ;
• améliorer le temps de réponse du serveur.

SI : Speed Index

Le Speed Index mesure la vitesse à laquelle le contenu d’une page devient visuellement visible pendant son chargement.

Il donne une indication sur la vitesse perçue par l’utilisateur. Pour l’améliorer, il faut généralement agir sur plusieurs éléments : serveur, ressources critiques, CSS, JavaScript et optimisation des images.

Quelles optimisations prioriser selon votre budget ?

Toutes les actions permettant d’améliorer les Core Web Vitals ne demandent pas le même temps, la même expertise ou le même budget.

Avant une modification importante, il est préférable d’analyser le rapport PageSpeed et de choisir les recommandations selon leur impact potentiel et leur difficulté de mise en œuvre.

Quick wins

Commencez par les actions simples qui peuvent apporter rapidement des résultats :

• compresser les images ;
• convertir les images dans un format adapté au web ;
• précharger l’image LCP lorsque cela est nécessaire ;
• définir les dimensions des images et vidéos ;
• supprimer le JavaScript inutile ;
• vérifier la mise en cache des ressources statiques.

Investissement moyen

Certaines optimisations nécessitent davantage d’analyse et de développement :

• revoir les animations ;
• réaliser un audit CSS et JavaScript ;
• supprimer le code inutilisé ;
• fragmenter les longues tâches JavaScript ;
• analyser les scripts tiers ;
• améliorer le chargement des ressources critiques.

Investissement important

Dans certains cas, le problème est plus profond et nécessite une intervention plus importante :

• migration vers un serveur ou un hébergement plus performant ;
• modification importante de l’architecture technique ;
• refonte du front-end ;
• remplacement d’un thème ou d’un framework particulièrement lourd.

L’objectif n’est pas de suivre aveuglément chaque recommandation d’un outil, mais de choisir les optimisations qui apportent le plus de valeur à vos utilisateurs. Le rendement de ces améliorations dépend aussi des objectifs de votre site internet.

Par exemple, améliorer la vitesse d’un site e-commerce peut avoir un impact direct sur le taux de conversion et le chiffre d’affaires, tandis que les bénéfices peuvent être différents pour un site vitrine, dont le rôle est généralement de présenter une activité, renforcer sa crédibilité et générer des prises de contact.

Une fois les principaux problèmes corrigés, vous pouvez vous concentrer sur d’autres leviers de votre stratégie digitale. Pour voir comment ces notions s’appliquent concrètement à une activité locale, consultez mon guide de création de site pour artisan.

Si vous ajoutez de nouveaux contenus, une nouvelle fonctionnalité, un formulaire, un script marketing ou un outil tiers, il peut être utile de mesurer à nouveau les Core Web Vitals. Une modification du site peut en effet changer ses performances.

Pour les sites importants, la mise en place d’un monitoring régulier peut également permettre de détecter une dégradation après une mise à jour ou une mise en production.

Ce qu’il faut retenir des Core Web Vitals

Les Core Web Vitals sont trois indicateurs clés permettant de mesurer certains aspects de la qualité de l’expérience utilisateur : le chargement avec le LCP, la réactivité avec l’INP et la stabilité visuelle avec le CLS.

Ils peuvent avoir un impact sur le référencement naturel et la visibilité d’un site, puisqu’ils font partie des signaux liés à l’expérience de la page utilisés par les systèmes de Google. Ils ne constituent toutefois qu’une partie d’une stratégie SEO réussie.

Une bonne expérience utilisateur, c’est un peu comme la santé : tant qu’on l’a, tout va bien ; c’est souvent lorsqu’on la perd qu’on se rend compte de son importance. Un site rapide, réactif et stable facilite le parcours des internautes et peut contribuer à réduire les frustrations qui nuisent à l’engagement et à la conversion.

La bonne approche consiste donc à mesurer, analyser et améliorer les problèmes réels, sans chercher un score parfait à tout prix. Une fois vos principaux Signaux Web Essentiels dans un bon état, votre priorité peut revenir aux leviers principaux de votre référencement : proposer un contenu utile, répondre à l’intention de recherche et développer l’autorité de votre site.