Ce que sont les Core Web Vitals et pourquoi ils comptent pour votre référencement
Les Core Web Vitals sont un ensemble de trois métriques de performance web définies par Google pour évaluer l’expérience utilisateur d’une page. Depuis juin 2021, ces métriques font partie des signaux de classement de l’algorithme de recherche Google. En mars 2024, Google a remplacé le First Input Delay (FID) par l’Interaction to Next Paint (INP), rendant la mesure de la réactivité plus exigeante. Les trois métriques actuelles sont le Largest Contentful Paint (LCP), l’Interaction to Next Paint (INP) et le Cumulative Layout Shift (CLS).
Selon les données publiques du Chrome User Experience Report (CrUX), seuls 42 % des sites web atteignent le seuil « bon » pour les trois métriques simultanément. Cela signifie que plus de la moitié des sites présente au moins un point faible en termes d’expérience utilisateur mesurable. C’est une opportunité directe pour le référencement : améliorer vos Core Web Vitals peut vous donner un avantage concret sur des concurrents qui les négligent.
LCP (Largest Contentful Paint) : le temps de chargement perçu
Le LCP mesure le temps nécessaire pour afficher le plus grand élément visible dans la fenêtre d’affichage. Cet élément est généralement une image hero, une vidéo ou un bloc de texte principal. Google considère qu’un LCP inférieur à 2,5 secondes est bon, entre 2,5 et 4 secondes nécessite une amélioration, et au-delà de 4 secondes est mauvais.
Les causes les plus fréquentes d’un LCP lent sont les images non optimisées, les polices web bloquantes et les temps de réponse serveur élevés. Pour diagnostiquer votre LCP, ouvrez les DevTools de Chrome, allez dans l’onglet Performance, enregistrez un chargement de page, et identifiez l’élément LCP dans le panneau de détails.
Optimiser le LCP concrètement
La première action est d’optimiser l’image LCP. Convertissez-la au format WebP ou AVIF (qui offrent une compression 25 à 50 % supérieure au JPEG), définissez des dimensions explicites avec les attributs width et height, et ajoutez l’attribut fetchpriority="high" pour indiquer au navigateur de la télécharger en priorité. Si l’image est servie depuis un CDN, assurez-vous que les en-têtes de cache sont correctement configurés.
La seconde action concerne le temps de réponse du serveur (TTFB). Un TTFB supérieur à 800 ms dégrade systématiquement le LCP. Les leviers d’amélioration incluent la mise en cache côté serveur (Redis, Memcached), l’utilisation d’un CDN pour rapprocher le contenu des utilisateurs, et l’optimisation des requêtes de base de données. Pour un site WordPress, un plugin de cache comme WP Rocket ou W3 Total Cache peut réduire le TTFB de 60 à 80 %.
INP (Interaction to Next Paint) : la réactivité aux interactions
L’INP a remplacé le FID en mars 2024. Contrairement au FID qui ne mesurait que le délai de la première interaction, l’INP mesure la latence de toutes les interactions de l’utilisateur (clics, appuis, saisies clavier) et retient la valeur la plus défavorable (approximativement le 98e percentile). Un INP inférieur à 200 ms est considéré bon, entre 200 et 500 ms nécessite une amélioration, et au-delà de 500 ms est mauvais.
L’INP est souvent la métrique la plus difficile à optimiser car elle dépend directement du JavaScript exécuté sur la page. Chaque fois qu’un utilisateur clique sur un bouton ou un lien, le navigateur doit exécuter le gestionnaire d’événements associé, mettre à jour le DOM et peindre le résultat à l’écran. Si le thread principal est occupé par un script long, l’interaction est retardée.
Stratégies pour améliorer l’INP
Identifiez d’abord les tâches longues (Long Tasks) avec l’API PerformanceObserver ou l’onglet Performance des DevTools. Toute tâche JavaScript durant plus de 50 ms est considérée longue et peut dégrader l’INP. Découpez ces tâches en morceaux plus petits en utilisant requestIdleCallback, setTimeout(fn, 0) ou la méthode scheduler.yield() disponible dans les navigateurs récents.
Réduisez ensuite la quantité de JavaScript chargé sur la page. Utilisez le panneau Coverage des DevTools Chrome pour identifier le code JavaScript non utilisé. Le chargement différé des scripts non critiques avec l’attribut defer ou le chargement dynamique via import() permet de libérer le thread principal pendant le chargement initial de la page.
CLS (Cumulative Layout Shift) : la stabilité visuelle
Le CLS mesure la somme des décalages de mise en page inattendus qui se produisent pendant toute la durée de vie de la page. Un décalage se produit lorsqu’un élément visible change de position sans action de l’utilisateur, par exemple quand une publicité se charge au-dessus du contenu que vous êtes en train de lire. Un CLS inférieur à 0,1 est bon, entre 0,1 et 0,25 nécessite une amélioration, et au-delà de 0,25 est mauvais.
Les causes les plus courantes de CLS élevé sont les images sans dimensions définies, les publicités et iframes sans espace réservé, les polices web qui provoquent un flash de texte invisible (FOIT) ou un flash de texte non stylé (FOUT), et le contenu injecté dynamiquement au-dessus du contenu existant.
Corriger les problèmes de CLS
Définissez toujours les attributs width et height sur vos images et vidéos, ou utilisez la propriété CSS aspect-ratio. Pour les publicités, réservez l’espace nécessaire avec un conteneur de taille fixe via CSS. Pour les polices, utilisez font-display: swap dans votre déclaration @font-face et préchargez les polices critiques avec <link rel="preload" as="font">.
Un piège courant concerne les bannières de consentement aux cookies : si elles poussent le contenu vers le bas au lieu de se superposer, elles génèrent un CLS significatif. Configurez votre bannière de cookies pour qu’elle apparaisse en overlay (position fixe) plutôt qu’insérée dans le flux du document.
Outils de mesure et suivi
Google propose plusieurs outils gratuits pour mesurer les Core Web Vitals. PageSpeed Insights (web.dev/measure) combine des données de laboratoire (Lighthouse) et des données terrain (CrUX). La Google Search Console affiche un rapport dédié dans la section « Expérience » qui identifie les URLs problématiques regroupées par type de problème.
Pour un suivi continu, l’API CrUX accessible via BigQuery permet d’analyser les tendances historiques de vos métriques. Des outils tiers comme SpeedCurve, Calibre ou DebugBear offrent un monitoring automatisé avec des alertes en cas de régression. L’investissement dans le suivi des Core Web Vitals se justifie directement par son impact sur le référencement et l’expérience utilisateur.
