Qu'est-ce que les Core Web Vitals ?
En 2021, Google a officialisé les Core Web Vitals comme facteur de classement dans le cadre de sa mise à jour Page Experience. L'idée : une page qui charge vite, répond rapidement et ne saute pas dans tous les sens mérite d'être mieux classée qu'une page lente et instable.
Ces métriques sont mesurées à partir de données réelles de navigation issues du Chrome User Experience Report (CrUX), pas seulement en laboratoire. Ce sont donc les conditions réelles de vos visiteurs qui comptent. Si votre site est rapide sur un Mac récent en fibre mais lent sur un smartphone Android en 4G, c'est le second scénario qui pèse dans les métriques réelles.
Les trois métriques : LCP, INP et CLS
| Métrique | Ce qu'elle mesure | Bon | À améliorer | Mauvais |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Temps d'affichage du plus grand élément visible à l'écran | Moins de 2,5 s | 2,5 à 4 s | Plus de 4 s |
| INP (Interaction to Next Paint) | Réactivité globale de la page aux interactions utilisateur | Moins de 200 ms | 200 à 500 ms | Plus de 500 ms |
| CLS (Cumulative Layout Shift) | Stabilité visuelle : les éléments bougent-ils pendant le chargement ? | Moins de 0,1 | 0,1 à 0,25 | Plus de 0,25 |
Comprendre chaque métrique en détail
LCP (Largest Contentful Paint) : mesure le temps avant que l'élément le plus grand visible dans la zone d'affichage initiale soit rendu. Cet élément peut être une image, une vidéo ou un bloc de texte. Sur la plupart des pages, c'est l'image principale en haut de page ou le premier gros bloc de texte. Un LCP élevé signifie généralement un temps de réponse serveur lent, des images non optimisées ou du CSS bloquant le rendu.
INP (Interaction to Next Paint) : remplace le FID (First Input Delay) depuis mars 2024. Là où le FID ne mesurait que la première interaction, l'INP mesure la réactivité sur toute la durée de la session. Il capture le pire délai observé entre une action de l'utilisateur (clic, saisie, toucher) et la mise à jour visuelle de la page. Un INP élevé est souvent causé par un JavaScript lourd qui monopolise le fil principal du navigateur.
CLS (Cumulative Layout Shift) : pénalise les pages dont les éléments se déplacent de façon inattendue pendant le chargement. Le scénario classique : une image sans dimensions déclarées se charge et pousse le texte vers le bas, forçant l'utilisateur à rater son clic. Le CLS est un score cumulatif, donc chaque décalage imprévu s'additionne.
Impact sur le référencement naturel
Les Core Web Vitals font partie du signal Page Experience de Google, aux côtés du HTTPS, de la compatibilité mobile et de l'absence de pop-ins intrusifs. En pratique, leur poids reste modéré comparé à la pertinence du contenu : une page avec d'excellents scores mais un contenu pauvre ne dépassera pas une page utile avec des scores moyens.
En revanche, sur des requêtes très concurrentielles où plusieurs pages se valent en termes de contenu, les Core Web Vitals peuvent faire la différence. Et de bons scores améliorent l'expérience utilisateur, ce qui réduit le taux de rebond et augmente le temps passé sur le site.
Comment les mesurer
| Outil | Type de données | Utilité principale |
|---|---|---|
| Search Console | Données réelles (CrUX) | Vue d'ensemble du site, URLs en erreur, suivi dans le temps |
| PageSpeed Insights | Données réelles + laboratoire (Lighthouse) | Diagnostic URL par URL avec recommandations précises |
| Lighthouse (Chrome DevTools) | Laboratoire uniquement | Tests en développement, avant mise en production |
| Web Vitals extension Chrome | Temps réel | Mesure pendant la navigation réelle sur le site |
| CrUX API / BigQuery | Données réelles agrégées | Analyse avancée, comparaison avec concurrents |
Principaux leviers d'amélioration
Pour améliorer le LCP :
- Identifier l'élément LCP avec PageSpeed Insights (il est mis en surbrillance dans le rapport de diagnostic)
- Optimiser les images (format WebP, compression adaptée, dimensions correctes) et ajouter
fetchpriority="high"sur l'image principale - Précharger les ressources critiques avec
<link rel="preload"> - Améliorer le temps de réponse serveur (TTFB) via un CDN ou une mise en cache efficace
- Éviter les CSS et JavaScript bloquants au rendu initial
Pour améliorer l'INP :
- Identifier les longues tâches JavaScript dans Chrome DevTools (onglet Performance)
- Différer le chargement des scripts non critiques avec les attributs
deferouasync - Réduire le JavaScript exécuté sur le fil principal au moment du chargement
- Sur WordPress : limiter le nombre de plugins et désactiver les scripts qui ne sont pas nécessaires sur toutes les pages
Pour améliorer le CLS :
- Toujours définir des dimensions explicites sur les images et les vidéos (
widthetheightdans le HTML) - Réserver l'espace pour les publicités et les éléments embarqués avant leur chargement
- Éviter d'insérer du contenu au-dessus du contenu visible pendant le chargement (bannières, alertes retardées)
- Utiliser
font-display: swapavec précaution pour les polices web : cela peut provoquer un décalage de texte
Questions fréquentes sur les Core Web Vitals
Ce sont trois métriques de performance officielles utilisées par Google comme facteurs de classement depuis 2021. LCP (Largest Contentful Paint) mesure le temps d'affichage du contenu principal. INP (Interaction to Next Paint) mesure la réactivité aux interactions. CLS (Cumulative Layout Shift) mesure la stabilité visuelle. Les trois sont mesurés sur les données réelles d'utilisateurs (CrUX) via Chrome.
LCP : sous 2,5s (bon), 2,5-4s (à améliorer), au-delà (mauvais). INP : sous 200ms (bon), 200-500ms (à améliorer), au-delà (mauvais). CLS : sous 0,1 (bon), 0,1-0,25 (à améliorer), au-delà (mauvais). Pour qu'une URL soit considérée "Core Web Vitals OK", les 3 métriques doivent passer le seuil "bon" au 75e percentile sur les données réelles des 28 derniers jours.
LCP : optimiser l'image principale (WebP, fetchpriority="high", dimensions correctes), réduire le TTFB serveur, différer le CSS non critique. INP : réduire le JavaScript bloquant, optimiser les event handlers, utiliser requestIdleCallback. CLS : déclarer width/height sur toutes les images, réserver l'espace des pubs/embeds, éviter le contenu injecté au-dessus de la zone visible. PageSpeed Insights donne des recommandations spécifiques par page.
C'est un signal réel mais modeste. À contenu et autorité comparables, le site qui passe les Core Web Vitals est avantagé. Mais un site avec un excellent contenu et un mauvais CWV peut quand même bien se positionner. L'effet est plus visible sur les requêtes concurrentielles où les autres facteurs s'égalisent. Au-delà du facteur algorithmique, les CWV impactent directement le taux de conversion et l'expérience utilisateur.