Core Web Vitals : Mesurez et améliorez les performances web
Vos utilisateurs attendent des pages qui se chargent instantanément, réagissent sans délai et restent visuellement stables. Les Core Web Vitals (CWV) de Google quantifient ces attentes : Largest Contentful Paint (LCP) mesure le chargement, Interaction to Next Paint (INP) mesure l'interactivité, et Cumulative Layout Shift (CLS) mesure la stabilité visuelle. De mauvais scores CWV nuisent à l'expérience utilisateur et peuvent affecter le classement dans les moteurs de recherche. Ce guide vous montre comment mesurer chaque métrique et les améliorer avec des étapes pratiques adaptées aux développeurs.
Que sont les Core Web Vitals ?
Les Core Web Vitals sont trois métriques qui reflètent l'expérience utilisateur réelle :
- LCP : Temps jusqu'au rendu du plus grand élément de contenu (image, bloc de texte, vidéo). Bon : ≤2,5 s, À améliorer : ≤4 s, Mauvais : >4 s.
- INP : Temps entre une interaction utilisateur (clic, tap, pression de touche) et la prochaine frame affichée. Bon : ≤200 ms, À améliorer : ≤500 ms, Mauvais : >500 ms.
- CLS : Somme des scores de décalage de mise en page pour les mouvements visuels inattendus. Bon : ≤0,1, À améliorer : ≤0,25, Mauvais : >0,25.
Ces seuils sont basés sur le 75e percentile des chargements de page, segmentés entre mobile et desktop.
Comment mesurer les Core Web Vitals
Vous avez besoin de données de laboratoire et de terrain. Les outils de laboratoire simulent des conditions ; les données de terrain proviennent d'utilisateurs réels.
Outils de laboratoire
- Lighthouse (dans Chrome DevTools ou PageSpeed Insights) : audite LCP, CLS et le temps de blocage total (un proxy pour INP).
- WebPageTest : analyse avancée en filmstrip et waterfall.
- Panneau Performance de Chrome DevTools : enregistrez des interactions pour repérer les tâches longues affectant INP.
Outils de terrain
- Chrome UX Report (CrUX) : données agrégées d'utilisateurs réels pour les sites publics.
- Bibliothèque JavaScript web-vitals : envoyez les métriques à votre outil d'analyse.
- Rapport Core Web Vitals de Search Console : regroupe les URL par statut.
Installez la bibliothèque web-vitals via npm ou incluez-la depuis un CDN, puis enregistrez les métriques :
import {onLCP, onINP, onCLS} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
navigator.sendBeacon('/analytics', body);
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
Utilisez sendBeacon pour éviter de bloquer le déchargement. Collectez des données au fil du temps pour voir les tendances.
Améliorer Largest Contentful Paint (LCP)
LCP est souvent l'image héro ou le titre principal. Optimisez le chemin critique :
- Priorisez la ressource LCP : ajoutez
fetchpriority="high"à l'image LCP ou préchargez-la. - Réduisez le temps de réponse du serveur : utilisez la mise en cache, un CDN et des requêtes backend efficaces.
- Éliminez les ressources bloquant le rendu : différez le CSS/JS non critique, intégrez le CSS critique en ligne.
- Optimisez les images : compressez, utilisez des formats modernes (WebP/AVIF) et définissez les dimensions.
- Utilisez un CDN pour servir les ressources depuis des emplacements proches des utilisateurs.
Exemple : préchargez l'image LCP et définissez fetchpriority :
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">
Pour la compression d'images, essayez notre Compresseur d'images pour réduire la taille du fichier sans perte de qualité visible.
Améliorer Interaction to Next Paint (INP)
INP reflète la réactivité. Les tâches JavaScript longues bloquent le thread principal et retardent le retour visuel.
- Découpez les tâches longues : utilisez
setTimeout,requestIdleCallbackouscheduler.yield()pour céder la main au navigateur. - Optimisez les gestionnaires d'événements : limitez les entrées (debounce), évitez le travail lourd dans les gestionnaires de clic.
- Réduisez le JavaScript : code-splitting, 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 la virtualisation pour les longues listes.
Mesurez INP sur le terrain avec la bibliothèque web-vitals et utilisez le panneau Performance pour identifier les tâches longues lors des interactions.
Améliorer Cumulative Layout Shift (CLS)
CLS se produit lorsque des éléments se déplacent de manière inattendue. Causes courantes : images sans dimensions, publicités/embeds sans espace réservé, et polices à chargement tardif.
- Définissez toujours width et height sur les images et vidéos, ou utilisez
aspect-ratioen CSS. - Réservez de l'espace pour le contenu dynamique (publicités, embeds) avec min-height.
- Utilisez
font-display: swapet préchargez les polices clés pour éviter le texte invisible et les décalages de mise en page. - Évitez d'insérer du contenu au-dessus du contenu existant sauf si déclenché par une interaction utilisateur.
Exemple : définissez le ratio d'aspect pour les images responsives :
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
Comparaison des Core Web Vitals
| Métrique | Mesure | Seuil bon | Optimisation principale |
|---|---|---|---|
| LCP | Performance de chargement | ≤2,5 s | Optimiser les images, le serveur, le CSS critique |
| INP | Interactivité | ≤200 ms | Réduire le JS, découper les tâches longues |
| CLS | Stabilité visuelle | ≤0,1 | Définir les dimensions, réserver l'espace |
Flux de travail pratique pour améliorer les CWV
- Mesurez la base de référence : exécutez Lighthouse et collectez les données de terrain via web-vitals.
- Identifiez les goulots d'étranglement : utilisez le panneau Performance et le waterfall réseau.
- Priorisez les correctifs : concentrez-vous sur la métrique avec le pire score.
- Implémentez les changements : optimisez les images, différez les scripts, définissez les dimensions.
- Testez et surveillez : relancez les tests de laboratoire et suivez les données de terrain au fil du temps.
N'oubliez pas que les CWV sont des métriques de terrain ; les outils de laboratoire aident au diagnostic mais les données utilisateurs réelles sont la source de vérité.
FAQ
Quels sont les seuils actuels des Core Web Vitals ?
Bon : LCP ≤2,5 s, INP ≤200 ms, CLS ≤0,1. À améliorer : LCP ≤4 s, INP ≤500 ms, CLS ≤0,25. Mauvais : au-delà de ces valeurs. Ces seuils sont évalués au 75e percentile des chargements de page.
À quelle fréquence dois-je mesurer les Core Web Vitals ?
Surveillez les données de terrain en continu et lancez des audits de laboratoire après des changements majeurs. Au minimum, consultez le rapport Core Web Vitals de Search Console mensuellement et après les déploiements affectant les performances frontend.
Puis-je améliorer les Core Web Vitals sans refondre mon site ?
Oui. De nombreuses améliorations sont techniques : compressez les images, définissez les attributs width/height, différez le JavaScript non critique et découpez les tâches longues. Ces changements apportent souvent des gains significatifs sans refonte visuelle.
Prêt à optimiser vos images pour un meilleur LCP ? Utilisez notre Compresseur d'images gratuit pour réduire la taille des images tout en préservant la qualité et améliorer vos scores Core Web Vitals.