Core Web Vitals : Mesurer et améliorer les performances web
Vos utilisateurs attendent des expériences rapides et fluides. Si votre site semble lent, ils partent—et les moteurs de recherche le remarquent. Les Core Web Vitals sont les métriques qui quantifient l'expérience utilisateur réelle : vitesse de chargement, interactivité et stabilité visuelle. Ce guide vous montre comment les mesurer et apporter des améliorations pratiques.
Que sont les Core Web Vitals ?
Les Core Web Vitals sont un ensemble de trois métriques définies par Google pour capturer les aspects clés de l'expérience utilisateur :
- Largest Contentful Paint (LCP) : mesure la performance de chargement. Il marque le moment où le plus grand élément de contenu (souvent une image principale ou un titre) devient visible. Visez un LCP inférieur à 2,5 secondes.
- Interaction to Next Paint (INP) : mesure la réactivité. Il enregistre le temps entre une interaction utilisateur (clic, tap, pression de touche) et la prochaine mise à jour visuelle. Visez un INP inférieur à 200 millisecondes.
- Cumulative Layout Shift (CLS) : mesure la stabilité visuelle. Il quantifie les décalages de mise en page inattendus pendant le chargement. Visez un CLS inférieur à 0,1.
Ces seuils sont basés sur des données de terrain provenant d'utilisateurs réels (75e percentile). Les données de laboratoire aident à diagnostiquer les problèmes, mais les données de terrain reflètent l'expérience réelle.
Comment mesurer les Core Web Vitals
Vous avez besoin à la fois de données de terrain et de laboratoire. Les données de terrain montrent les performances des utilisateurs réels ; les données de laboratoire vous permettent de déboguer et de tester les modifications.
Outils de données de terrain
- Chrome UX Report (CrUX) : données agrégées d'utilisateurs réels pour des millions de sites. Accessible via PageSpeed Insights, Search Console ou l'API CrUX.
- Bibliothèque JavaScript web-vitals : collectez vos propres données de terrain en envoyant les métriques à votre point de terminaison d'analyse.
Outils de données de laboratoire
- Lighthouse : intégré à Chrome DevTools, exécute des audits et fournit des opportunités d'amélioration.
- WebPageTest : tests avancés avec limitation de réseau et filmstrips.
- Panneau Performance de Chrome DevTools : analyse approfondie des performances d'exécution.
Commencez par PageSpeed Insights : il affiche à la fois les données de terrain et de laboratoire pour une URL. Utilisez ensuite Lighthouse localement pour itérer.
Améliorer le LCP
Le LCP est souvent la métrique la plus impactante à corriger. Le plus grand élément est généralement une image ou un bloc de texte. Optimisez ces aspects :
- Optimisez l'image LCP : compressez-la, servez des formats modernes comme WebP ou AVIF, et définissez des dimensions explicites.
- Préchargez la ressource LCP : utilisez
<link rel="preload">pour les images ou polices utilisées au-dessus de la ligne de flottaison. - Éliminez les ressources bloquant le rendu : intégrez le CSS critique, différez le CSS et JavaScript non critiques.
- Utilisez un CDN : servez les ressources depuis des emplacements proches des utilisateurs.
- Réduisez le temps de réponse du serveur : optimisez le backend, utilisez la mise en cache et envisagez le rendu en périphérie.
Exemple : préchargez une image principale :
<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">Améliorer l'INP
L'INP mesure la réactivité. Les tâches longues bloquent le thread principal et retardent le retour visuel. Correctifs courants :
- Divisez les tâches longues : utilisez
setTimeoutouscheduler.yield()pour céder la main au thread principal. - Optimisez les gestionnaires d'événements : limitez ou throttlez les événements rapides, évitez le travail synchrone lourd.
- Réduisez le JavaScript : découpez le code, éliminez le code mort (tree-shaking) et différez les scripts non critiques.
- Utilisez des web workers pour les tâches gourmandes en CPU.
- Évitez les mises à jour massives du DOM : regroupez les modifications du DOM et utilisez requestAnimationFrame.
Mesurez l'INP avec la bibliothèque web-vitals et identifiez les interactions lentes dans le panneau Performance.
Améliorer le CLS
Les décalages de mise en page se produisent lorsque des éléments changent de position de manière inattendue. Prévenez-les en :
- Définissant des attributs de taille sur les images et vidéos (largeur et hauteur).
- Réservant de l'espace pour les publicités et les intégrations avec CSS
aspect-ratioou des conteneurs fixes. - Évitant d'insérer du contenu au-dessus du contenu existant sauf en réponse à une interaction utilisateur.
- Utilisant font-display: swap et en préchargeant les polices pour minimiser les décalages FOIT/FOUT.
- Animant avec transform au lieu de propriétés qui déclenchent une mise en page.
Comparaison rapide : métriques et objectifs
| Métrique | Ce qu'elle mesure | Objectif bon | Correctifs courants |
|---|---|---|---|
| LCP | Performance de chargement | ≤ 2,5 s | Optimiser les images, précharger, CDN |
| INP | Réactivité | ≤ 200 ms | Diviser les tâches longues, réduire le JS |
| CLS | Stabilité visuelle | ≤ 0,1 | Définir les dimensions, réserver l'espace |
Surveiller et itérer
La performance n'est pas une correction ponctuelle. Mettez en place une surveillance continue :
- Utilisez la bibliothèque web-vitals pour envoyer les métriques à vos analyses.
- Configurez des alertes pour les régressions dans votre pipeline CI/CD avec Lighthouse CI.
- Examinez régulièrement les données de terrain dans Search Console.
N'oubliez pas que les améliorations doivent être validées avec des données d'utilisateurs réels, pas seulement avec des scores de laboratoire.
FAQ
Que sont les Core Web Vitals et pourquoi sont-ils importants ?
Les Core Web Vitals sont des métriques de performance centrées sur l'utilisateur (LCP, INP, CLS) qui mesurent le chargement, l'interactivité et la stabilité visuelle. Ils sont importants car ils sont corrélés à l'expérience utilisateur et sont utilisés comme signal de classement par Google.
À quelle fréquence dois-je vérifier les Core Web Vitals ?
Vérifiez les données de terrain mensuellement et après les versions majeures. Utilisez des outils de laboratoire pendant le développement pour détecter les régressions tôt. Une surveillance continue avec des métriques d'utilisateurs réels est idéale.
Puis-je améliorer les Core Web Vitals sans reconstruire mon site ?
Oui. De nombreuses améliorations—comme l'optimisation des images, le préchargement des ressources clés, le report des scripts et la définition des dimensions des éléments—peuvent être appliquées progressivement sans refonte complète.
Besoin de compresser rapidement des images pour un meilleur LCP ? Essayez notre Compresseur d'images gratuit pour réduire la taille des fichiers sans perte de qualité.