Guide complet des Core Web Vitals : LCP, CLS et INP expliqués

Les Core Web Vitals sont un ensemble de métriques définies par Google pour mesurer la qualité de l'expérience utilisateur sur le web. Depuis leur intégration comme signal de classement en 2021, ces indicateurs sont devenus incontournables pour tout propriétaire de site soucieux de son référencement naturel.

En 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 et plus représentative de l'expérience réelle des utilisateurs. Ce guide vous explique en détail chaque métrique, comment la mesurer et comment l'améliorer.

Qu'est-ce que les Core Web Vitals ?

Les Core Web Vitals sont trois métriques centrées sur l'utilisateur qui évaluent les aspects fondamentaux de l'expérience web : la vitesse de chargement (LCP), la stabilité visuelle (CLS) et la réactivité interactive (INP). Google utilise ces métriques comme facteurs de classement dans ses résultats de recherche.

Ces métriques sont mesurées à partir de données de terrain (real user metrics) collectées par le Chrome User Experience Report (CrUX). Cela signifie que ce sont les performances réelles vécues par vos visiteurs qui comptent, et non uniquement les résultats de tests en laboratoire.

LCP : Largest Contentful Paint

Le Largest Contentful Paint mesure le temps nécessaire pour afficher le plus grand élément de contenu visible dans la fenêtre d'affichage. Il s'agit généralement d'une image héro, d'une vidéo ou d'un bloc de texte volumineux. Le LCP reflète la perception de vitesse de chargement par l'utilisateur.

Seuils de performance LCP

• Bon : inférieur ou égal à 2,5 secondes
• À améliorer : entre 2,5 et 4 secondes
• Mauvais : supérieur à 4 secondes

Les causes courantes d'un mauvais LCP

Plusieurs facteurs peuvent dégrader votre LCP : un temps de réponse serveur trop long (TTFB élevé), des ressources CSS et JavaScript bloquant le rendu, un chargement lent des images et polices web, et un rendu côté client (client-side rendering) retardant l'affichage du contenu.

Comment améliorer votre LCP

• Optimisez votre serveur : utilisez un CDN, configurez le cache HTTP, activez la compression gzip/Brotli
• Préchargez les ressources critiques avec <link rel="preload"> pour les images LCP, polices et CSS essentiels
• Convertissez vos images au format WebP ou AVIF et utilisez le dimensionnement responsive avec srcset
• Éliminez le CSS et JavaScript bloquant le rendu en différant les ressources non critiques
• Utilisez le server-side rendering (SSR) ou la génération statique pour afficher le contenu plus rapidement

CLS : Cumulative Layout Shift

Le Cumulative Layout Shift mesure la stabilité visuelle de la page en quantifiant les décalages de mise en page inattendus. Un CLS élevé signifie que les éléments de la page bougent de manière inattendue pendant le chargement, ce qui crée une expérience frustrante pour l'utilisateur.

Chaque décalage de mise en page est calculé en multipliant la fraction d'impact (proportion de la fenêtre affectée) par la fraction de distance (distance du déplacement). Le CLS est la somme des scores de décalage individuels regroupés par fenêtres de session.

Seuils de performance CLS

• Bon : inférieur ou égal à 0,1
• À améliorer : entre 0,1 et 0,25
• Mauvais : supérieur à 0,25

Les causes courantes d'un mauvais CLS

Les décalages de mise en page sont principalement causés par : des images et vidéos sans dimensions explicites, des publicités et iframes qui se chargent dynamiquement, des polices web provoquant un FOIT/FOUT (flash de texte invisible ou non stylisé), et du contenu injecté dynamiquement au-dessus du contenu existant.

Comment améliorer votre CLS

• Définissez toujours les attributs width et height sur vos images et vidéos ou utilisez la propriété CSS aspect-ratio
• Réservez l'espace pour les publicités et iframes avec des conteneurs de taille fixe
• Utilisez font-display: swap combiné avec le préchargement des polices pour minimiser le décalage typographique
• Évitez d'injecter du contenu au-dessus du contenu existant sauf en réponse à une interaction utilisateur
• Utilisez les propriétés CSS contain et content-visibility pour isoler les calculs de mise en page

INP : Interaction to Next Paint

L'Interaction to Next Paint a officiellement remplacé le FID en mars 2024. Contrairement au FID qui ne mesurait que le délai de la première interaction, l'INP évalue la réactivité globale de la page en mesurant la latence de toutes les interactions (clics, appuis, pressions de touches) et en retenant une valeur représentative proche du pire cas.

L'INP mesure le temps entre le moment où l'utilisateur interagit et le moment où le navigateur affiche la mise à jour visuelle résultante. Il inclut le délai d'entrée (input delay), le temps de traitement (processing time) et le délai de présentation (presentation delay).

Seuils de performance INP

• Bon : inférieur ou égal à 200 millisecondes
• À améliorer : entre 200 et 500 millisecondes
• Mauvais : supérieur à 500 millisecondes

Comment améliorer votre INP

• Réduisez les tâches JavaScript longues en les découpant en tâches plus petites avec requestIdleCallback ou scheduler.yield()
• Minimisez le travail du thread principal en différant le JavaScript non essentiel
• Réduisez la taille du DOM : un DOM volumineux augmente le temps de calcul des styles et de mise en page
• Utilisez la délégation d'événements et évitez les gestionnaires d'événements coûteux
• Optimisez les recalculs de style et de mise en page en regroupant les lectures et écritures DOM

Comment mesurer les Core Web Vitals

Plusieurs outils permettent de mesurer vos Core Web Vitals, chacun avec ses spécificités. Pour une vision complète, il est recommandé de combiner les données de terrain (real user metrics) et les données de laboratoire (lab data). Pour un premier état des lieux, notre test de vitesse gratuit mesure le LCP et le CLS d'une page en laboratoire (Lighthouse) en quelques dizaines de secondes. L'INP est une métrique de terrain : elle se lit dans la Search Console ou dans les données CrUX, pas dans un test de laboratoire.

• Google Search Console : rapport dédié aux Core Web Vitals avec les données de terrain de vos utilisateurs réels
• PageSpeed Insights : combine données de terrain (CrUX) et données de laboratoire (Lighthouse) pour une URL spécifique
• Chrome DevTools : onglet Performance pour analyser en détail le comportement de la page en laboratoire
• Web Vitals Extension : extension Chrome qui affiche les Core Web Vitals en temps réel pendant la navigation
• CrUX Dashboard : tableau de bord complet basé sur les données du Chrome User Experience Report

L'impact des Core Web Vitals sur le SEO

Les Core Web Vitals font partie de l'ensemble des signaux d'expérience de page (Page Experience signals) de Google, aux côtés de l'optimisation mobile, du HTTPS et de l'absence d'interstitiels intrusifs. Bien que la pertinence du contenu reste le facteur de classement principal, les Core Web Vitals peuvent faire la différence entre deux pages de qualité de contenu similaire.

Au-delà du classement, de bonnes performances web ont un impact direct sur les métriques business : réduction du taux de rebond, augmentation du temps passé sur le site, amélioration des taux de conversion et renforcement de la satisfaction utilisateur.

Conclusion

Les Core Web Vitals ne sont pas qu'un exercice technique pour satisfaire Google. Ce sont des indicateurs concrets de la qualité de l'expérience que vous offrez à vos visiteurs. En optimisant votre LCP, CLS et INP, vous améliorez simultanément votre référencement naturel et vos performances commerciales.

Les correctifs, du serveur au navigateur, cache HTTP, images, polices, scripts tiers, CSS, sont dans le guide complet de la performance web, avec ce que Google documente pour chacun.

La performance est l'un des huit contrôles d'un audit technique. Le guide complet du SEO technique situe les Core Web Vitals parmi le crawl, l'indexation, le rendu et le maillage, avec le correctif pour chaque point.

Chez SEOForge, nous intégrons systématiquement l'analyse des Core Web Vitals dans nos audits SEO techniques. Notre approche combine les données de terrain de vos utilisateurs avec des recommandations concrètes et priorisées pour améliorer chaque métrique. Si vos scores sont déjà dans le rouge, notre service d'optimisation des Core Web Vitals corrige les causes directement dans votre code.

Faites analyser vos Core Web Vitals par SEOForge