Guide Core Web Vitals

Qu'est-ce que les Core Web Vitals ?

Les Core Web Vitals sont trois métriques qui mesurent l'expérience utilisateur d'une page web :

• LCP (Largest Contentful Paint) : Temps de chargement du plus grand élément visible
• INP (Interaction to Next Paint) : Réactivité aux interactions utilisateur (remplace FID depuis mars 2024)
• CLS (Cumulative Layout Shift) : Stabilité visuelle de la page

Ces métriques reflètent ce que les utilisateurs ressentent réellement : vitesse de chargement, réactivité et stabilité.

LCP : Largest Contentful Paint

Le LCP mesure le temps nécessaire pour afficher le plus grand élément de contenu visible dans la fenêtre (image, vidéo, bloc de texte).

Seuils de performance LCP

• Bon : Moins de 2,5 secondes
• À améliorer : Entre 2,5 et 4 secondes
• Mauvais : Plus de 4 secondes

Comment optimiser le LCP

• Optimiser les images : Compression, format WebP/AVIF, dimensions adaptées
• Précharger les ressources critiques : <link rel="preload"> pour l'image LCP
• Réduire le TTFB : Temps de réponse serveur, CDN, cache
• Éliminer les ressources bloquantes : CSS et JS critiques inline
• Utiliser un CDN : Rapprocher les ressources des utilisateurs

INP : Interaction to Next Paint

L'INP mesure la réactivité globale de la page. Il observe toutes les interactions (clics, taps, saisies clavier) et retient la plus lente.

Seuils de performance INP

• Bon : Moins de 200 millisecondes
• À améliorer : Entre 200 et 500 millisecondes
• Mauvais : Plus de 500 millisecondes

Comment optimiser l'INP

• Réduire le JavaScript : Moins de code = moins de temps d'exécution
• Découper les tâches longues : Utiliser requestIdleCallback, setTimeout
• Différer le JS non critique : defer, async, chargement dynamique
• Optimiser les gestionnaires d'événements : Éviter les calculs lourds dans les handlers
• Utiliser des Web Workers : Déléguer les calculs lourds

CLS : Cumulative Layout Shift

Le CLS mesure les décalages inattendus de mise en page. Un mauvais CLS crée une expérience frustrante (clic sur le mauvais bouton, perte de lecture).

Seuils de performance CLS

• Bon : Moins de 0,1
• À améliorer : Entre 0,1 et 0,25
• Mauvais : Plus de 0,25

Comment optimiser le CLS

• Réserver l'espace pour les images : Attributs width et height, aspect-ratio CSS
• Réserver l'espace pour les pubs/embeds : Conteneurs de taille fixe
• Éviter le contenu injecté dynamiquement : Sauf en réponse à une action utilisateur
• Précharger les polices : font-display: optional ou swap + preload
• Éviter les animations qui modifient la mise en page : Utiliser transform et opacity

Comment mesurer les Core Web Vitals

Données de terrain (Field Data)

Les données réelles des utilisateurs, utilisées par Google pour le classement :

• Google Search Console : Rapport "Signaux Web essentiels"
• PageSpeed Insights : Section "Données de terrain"
• Chrome UX Report (CrUX) : Données brutes via BigQuery

Données de laboratoire (Lab Data)

Tests synthétiques pour diagnostiquer et optimiser :

• Lighthouse : Intégré dans Chrome DevTools
• PageSpeed Insights : Section "Données de laboratoire"
• WebPageTest : Tests avancés et filmstrips
• Chrome DevTools : Onglet Performance

Core Web Vitals et SEO

Les Core Web Vitals font partie des signaux Page Experience de Google :

• Facteur de classement : Depuis juin 2021 (mobile) et février 2022 (desktop)
• Tie-breaker : À contenu égal, le site plus rapide est favorisé
• Pas le facteur principal : Le contenu reste prioritaire
• Impact indirect : Meilleure UX = meilleurs signaux utilisateurs

Prioriser les optimisations

Ordre recommandé pour optimiser les Core Web Vitals :

• 1. LCP : Impact le plus visible sur l'expérience perçue
• 2. CLS : Souvent le plus simple à corriger
• 3. INP : Plus technique, nécessite souvent une refonte JS

Apprenez à optimiser vos Core Web Vitals en pratique ou découvrez notre audit SEO technique incluant l'analyse des performances.