Les Core Web Vitals sont un ensemble de métriques spécifiques utilisées par Google pour évaluer l'expérience utilisateur des pages web. Depuis 2021, ils sont un facteur de classement direct dans Google Search. Les comprendre et les améliorer est essentiel pour la performance et le SEO.

Les Trois Core Web Vitals

Largest Contentful Paint (LCP)

Le LCP mesure la performance de chargement — spécifiquement, quand le plus grand élément de contenu visible dans la fenêtre d'affichage finit de s'afficher. Google considère que le LCP est bon lorsqu'il se produit dans les 2,5 secondes du chargement de la page.

Éléments LCP courants :

Images hero
Grands blocs de texte (H1 sans image au-dessus)
Images d'arrière-plan avec du contenu par-dessus

Comment améliorer le LCP :

Optimiser et compresser les images hero (utiliser le format WebP/AVIF)
Utiliser un réseau de distribution de contenu (CDN)
Précharger les ressources critiques avec <link rel="preload">
Supprimer le JavaScript et CSS qui bloquent le rendu
Implémenter le rendu côté serveur ou la génération statique

Cumulative Layout Shift (CLS)

Le CLS mesure la stabilité visuelle — dans quelle mesure la mise en page se déplace de façon inattendue lors du chargement. Un bon score CLS est de 0,1 ou moins.

Causes courantes des décalages de mise en page :

Images sans attributs de largeur/hauteur explicites
Publicités, iframes ou embeds sans espace réservé
Contenu injecté dynamiquement au-dessus du contenu existant
Polices web causant FOIT (Flash of Invisible Text) ou FOUT

Comment améliorer le CLS :

Toujours définir width et height sur les éléments image et vidéo
Réserver de l'espace pour les publicités et le contenu dynamique
Utiliser font-display: optional pour les polices web
Éviter d'insérer du contenu au-dessus du contenu existant sauf si déclenché par une interaction utilisateur

Interaction to Next Paint (INP)

L'INP a remplacé le First Input Delay (FID) comme Core Web Vital en mars 2024. Il mesure l'interactivité — la latence de toutes les interactions utilisateur (clics, touchers, saisie clavier) tout au long du cycle de vie de la page. Un bon INP est de 200ms ou moins.

Comment améliorer l'INP :

Diviser les longues tâches (tâches prenant plus de 50ms sur le thread principal)
Différer le JavaScript non essentiel
Utiliser des web workers pour les calculs intensifs
Optimiser les gestionnaires d'événements pour qu'ils se terminent rapidement
Minimiser l'impact des scripts tiers

Comment Mesurer les Core Web Vitals

Données de Terrain vs Données de Laboratoire

Les données de terrain (Real User Monitoring) proviennent d'utilisateurs réels via le Chrome User Experience Report (CrUX). C'est ce que Google utilise pour le classement. Utilisez Google Search Console → rapport Core Web Vitals.

Les données de laboratoire proviennent de tests contrôlés comme Lighthouse, PageSpeed Insights ou Krokanti Audit. Les données de laboratoire sont utiles pour déboguer mais peuvent différer des données de terrain.

Outils

Krokanti Audit : Lancez un audit complet pour voir les trois CWV avec des évaluations réussite/échec et des recommandations spécifiques
Google PageSpeed Insights : Affiche à la fois les données de laboratoire et de terrain
Chrome DevTools : Onglet Performance pour un profilage détaillé
Extension Web Vitals Chrome : Superposition en temps réel pendant la navigation

L'Impact Business

Les recherches montrent systématiquement que l'amélioration des Core Web Vitals entraîne des résultats commerciaux mesurables :

Chaque amélioration de 100ms du LCP correspond à une augmentation d'environ 1% du taux de conversion (Google/Deloitte)
Les sites avec un bon CLS ont eu 24% moins de taux d'abandon de session (Google)
Améliorer l'INP peut réduire les taux de rebond de 8 à 20% selon le secteur

Une Liste de Contrôle Pratique

Avant votre prochain déploiement, vérifiez :

Toutes les images ont des attributs explicites width et height
Les images hero sont préchargées et servies dans des formats modernes
Aucun script bloquant le rendu dans <head> sans defer ou async
Les polices web utilisent font-display: swap ou optional
Aucun décalage de mise en page inattendu lors du défilement ou de l'interaction
Tous les gestionnaires de clics/touchers répondent en moins de 200ms

Lancez un audit gratuit de votre site avec Krokanti Audit pour voir vos scores exacts des Core Web Vitals et obtenir des recommandations spécifiques adaptées à votre site.