Core Web Vitals

Les Core Web Vitals sont trois métriques Google qui mesurent l'expérience utilisateur d'un site. Ce qu'elles mesurent, leurs seuils et comment les améliorer.

Ce que sont les Core Web Vitals

Les Core Web Vitals sont un ensemble de trois métriques définies par Google pour mesurer la qualité de l'expérience utilisateur sur une page web. Elles évaluent la vitesse de chargement perçue, la réactivité aux interactions et la stabilité visuelle de la page. Depuis mai 2021, elles font officiellement partie des signaux de classement de Google, ce qui en fait des indicateurs à suivre autant pour l'expérience utilisateur que pour le SEO.

Ce qui distingue les Core Web Vitals des métriques de performance classiques, c'est leur centrage sur ce que l'utilisateur perçoit réellement. Il ne s'agit pas de mesurer le temps de chargement technique total d'une page, mais de capturer les moments précis où l'utilisateur ressent un délai, une instabilité ou une frustration. C'est une approche qui part de l'expérience humaine plutôt que de la performance machine.

Les trois métriques des Core Web Vitals

LCP — Largest Contentful Paint. Le LCP mesure le temps nécessaire pour que le plus grand élément visible de la page, généralement une image hero, un titre de grande taille ou un bloc de contenu principal, soit affiché à l'écran. Il représente la vitesse de chargement perçue par l'utilisateur : le moment où la page semble chargée et utilisable.

Le seuil cible est un LCP inférieur à 2,5 secondes. Entre 2,5 et 4 secondes, la page est considérée comme à améliorer. Au-delà de 4 secondes, elle est classée mauvaise. Les causes les plus fréquentes d'un LCP dégradé sont des images non optimisées, un serveur lent, des ressources bloquantes en tête de page et un rendu côté serveur insuffisant.

INP — Interaction to Next Paint. L'INP mesure la réactivité d'une page aux interactions de l'utilisateur : clics, touches, saisies clavier. Il capture le délai entre le moment où l'utilisateur interagit avec un élément et le moment où la page répond visuellement à cette interaction. L'INP a remplacé le FID (First Input Delay) en mars 2024 car il mesure l'ensemble des interactions pendant la durée de vie de la page, pas seulement la première.

Le seuil cible est un INP inférieur à 200 millisecondes. Entre 200 et 500 millisecondes, la page est à améliorer. Au-delà de 500 millisecondes, elle est classée mauvaise. Les causes les plus fréquentes sont un JavaScript trop lourd qui bloque le fil d'exécution principal du navigateur.

CLS — Cumulative Layout Shift. Le CLS mesure la stabilité visuelle de la page pendant son chargement. Il quantifie les déplacements inattendus d'éléments visuels : un texte qui saute quand une image se charge, un bouton qui se déplace au moment où on s'apprête à cliquer dessus, une publicité qui repousse le contenu vers le bas. Ces décalages sont une source majeure de frustration utilisateur.

Le seuil cible est un CLS inférieur à 0,1. Entre 0,1 et 0,25, la page est à améliorer. Au-delà de 0,25, elle est classée mauvaise. Les causes les plus fréquentes sont des images et vidéos sans dimensions définies, des éléments chargés dynamiquement qui s'insèrent dans le flux de la page et des polices web qui provoquent un flash de contenu non stylisé.

Comment mesurer ses Core Web Vitals

Google met à disposition plusieurs outils pour mesurer et analyser les Core Web Vitals.

Google Search Console affiche les données de Core Web Vitals pour l'ensemble du site dans sa section Expérience. Elle regroupe les pages par statut (bon, à améliorer, mauvais) et permet d'identifier les groupes de pages problématiques en priorité. Ces données sont basées sur les mesures réelles des utilisateurs Chrome, ce qu'on appelle les données de terrain.

PageSpeed Insights analyse une URL précise et fournit les scores Core Web Vitals en données de terrain quand elles sont disponibles, ainsi qu'une analyse en laboratoire via Lighthouse avec des recommandations détaillées de correction.

Lighthouse est l'outil d'audit intégré aux outils de développement Chrome. Il simule le chargement d'une page et produit un rapport complet avec les scores de performance et les opportunités d'amélioration identifiées. Les résultats de laboratoire peuvent différer des données de terrain réelles.

Chrome DevTools permet une analyse plus fine pour les développeurs, avec notamment la visualisation du fil d'exécution JavaScript pour identifier les tâches longues qui dégradent l'INP.

Les causes les plus fréquentes de mauvais scores

Sur la majorité des sites vitrine et e-commerce audités, les mêmes problèmes reviennent.

Les images non optimisées sont la première cause de LCP dégradé. Des images de plusieurs mégaoctets servies sans compression, sans format moderne (WebP, AVIF) et sans attributs de dimensions explicites pèsent sur les trois métriques simultanément.

Les scripts tiers sont souvent la principale cause d'INP dégradé. Les outils de chat, les pixels publicitaires, les outils d'analytics et les widgets embarqués chargent du JavaScript qui s'exécute sur le fil principal du navigateur et retarde la réponse aux interactions.

Les polices web mal chargées contribuent au CLS. Une police qui se charge après le texte provoque un flash de contenu non stylisé, où le texte s'affiche d'abord dans une police système avant de basculer vers la police définie, décalant potentiellement les éléments environnants.

Les éléments sans dimensions sont la cause la plus fréquente de CLS élevé. Une image intégrée sans attributs width et height définis occupe zéro espace lors du chargement initial, puis repousse tout le contenu environnant quand elle se charge.

Core Web Vitals et Webflow

Webflow génère nativement un code relativement optimisé pour les Core Web Vitals. La plateforme compresse automatiquement les images, génère du HTML sémantique propre et propose des options de lazy loading natives. Cependant, un bon score n'est pas garanti par défaut.

Les principaux problèmes observés sur les sites Webflow sont les scripts tiers chargés de façon synchrone, notamment les outils de consentement et les pixels marketing, les images hero non optimisées chargées sans priorité explicite, et les animations JavaScript de bibliothèques tierces qui alourdissent le fil d'exécution principal.

FAQ

Les Core Web Vitals sont-ils un facteur de classement important ?

Google a confirmé qu'ils font partie de ses signaux de classement, mais leur poids relatif reste modéré par rapport à la pertinence du contenu et à l'autorité du site. Un site avec d'excellents Core Web Vitals mais un contenu médiocre ne se positionnera pas mieux qu'un site avec un contenu excellent et des scores moyens. Ils jouent un rôle de départage entre des sites par ailleurs comparables.

Quelle est la différence entre données de terrain et données de laboratoire ?

Les données de terrain sont collectées depuis les vrais utilisateurs Chrome qui visitent votre site. Elles reflètent les conditions réelles de navigation. Les données de laboratoire sont simulées dans des conditions contrôlées par des outils comme Lighthouse. Les deux sont utiles mais les données de terrain sont celles que Google utilise pour le classement.

Un bon score Lighthouse garantit-il de bons Core Web Vitals ?

Non. Lighthouse simule un chargement dans des conditions contrôlées qui peuvent différer significativement des conditions réelles. Un bon score Lighthouse est un indicateur positif mais pas une garantie de bons scores en données de terrain.

Comment améliorer son LCP rapidement ?

Les gains les plus rapides viennent généralement de l'optimisation de l'image hero : compression, format WebP, attribut loading="eager" et fetchpriority="high" pour signaler au navigateur de la charger en priorité. Sur Webflow, ces attributs peuvent être ajoutés via les paramètres personnalisés de l'élément image.

Définitions similaires

photo d'anaïs bironneau associée et co-gérante de l'agence studio seja
Anaïs Bironneau
co-fondatrice & responsable éditoriale
Co-fondatrice de Studio Seja, agence web strasbourgeoise spécialisée en développement sur mesure, création de sites et stratégie digitale. Elle pilote les projets clients et rédige les contenus de l'agence et parfois des écosystèmes partenaires.
votre projet commence ici

Quatre étapes pour passer de l'idée au produit,
sans improvisation.

De la stratégie à la mise en production, nous pilotons chaque étape avec rigueur et transparence. Un seul objectif : livrer un produit qui performe.

parlons de votre projet
logo de studio seja