Core Web Vitals : Mesurer et améliorer pour de meilleures performances web
Pourquoi les Core Web Vitals sont importants
Vous avez construit un beau site web, mais les utilisateurs partent parce qu'il semble lent. Les Core Web Vitals sont les métriques de Google pour l'expérience utilisateur réelle : Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS). Ils affectent le classement dans les moteurs de recherche et, plus important encore, si les visiteurs restent. Ce guide vous montre comment les mesurer et les améliorer.
Comprendre les trois métriques
Chaque métrique capture un aspect différent du chargement, de l'interactivité et de la stabilité visuelle.
| Métrique | Ce qu'elle mesure | Seuil acceptable |
|---|---|---|
| LCP | Temps de rendu du plus grand élément de contenu (image, bloc de texte) | ≤ 2,5 s |
| FID | Temps entre la première interaction utilisateur et la réponse du navigateur | ≤ 100 ms |
| CLS | Stabilité visuelle : décalages de mise en page inattendus | ≤ 0,1 |
Remarque : le FID est remplacé par l'Interaction to Next Paint (INP) en 2024, mais les principes d'optimisation restent similaires.
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 reflètent les utilisateurs réels.
- Chrome DevTools Lighthouse : Lancez un audit dans l'onglet Lighthouse. Il fournit des scores de laboratoire et des opportunités.
- PageSpeed Insights : Entrez votre URL pour voir les données de terrain du Chrome User Experience Report (CrUX) et les suggestions de laboratoire.
- Search Console : Consultez le rapport Core Web Vitals pour les données de terrain au niveau du groupe.
- Bibliothèque JavaScript Web Vitals : Ajoutez
web-vitalsà votre site pour collecter les métriques des utilisateurs réels.
import {onLCP, onFID, onCLS} from 'web-vitals';
onLCP(console.log);
onFID(console.log);
onCLS(console.log);Utilisez ces données pour identifier des tendances et prioriser les corrections.
Améliorer le Largest Contentful Paint (LCP)
Le LCP est souvent la métrique la plus impactante. Optimisez ces domaines :
- Optimiser les images : Compressez les images, utilisez WebP ou AVIF, et servez des tailles responsives. Des outils comme Compresseur d'images peuvent aider à réduire la taille des fichiers sans perte de qualité visible.
- Préchargez les ressources critiques : Utilisez
<link rel="preload">pour les images hero et les polices. - Éliminez les ressources bloquant le rendu : Intégrez le CSS critique, différez le JavaScript non critique.
- Utilisez un CDN : Servez les ressources depuis des emplacements plus proches des utilisateurs.
- Mettez en cache les ressources : Définissez de longues durées de cache pour les fichiers statiques.
Exemple : Préchargez votre image LCP :
<link rel="preload" as="image" href="#">Améliorer le First Input Delay (FID)
Le FID mesure la réactivité. Les longues tâches JavaScript bloquent le thread principal.
- Divisez les longues tâches : Utilisez
setTimeoutourequestIdleCallbackpour céder au thread principal. - Minimisez le travail sur le thread principal : Supprimez le JavaScript inutilisé, divisez le code et différez les scripts non critiques.
- Utilisez des web workers pour les calculs lourds.
- Évitez les gros scripts synchrones : Chargez les scripts tiers de manière asynchrone.
Auditez avec les opportunités "Minimize main-thread work" et "Reduce JavaScript execution time" de Lighthouse.
Améliorer le Cumulative Layout Shift (CLS)
Le CLS se produit lorsque les éléments se déplacent de manière inattendue. Causes courantes et corrections :
- Images sans dimensions : Définissez toujours les attributs
widthetheightou utilisezaspect-ratioen CSS. - Publicités, intégrations, iframes : Réservez l'espace avec un espace réservé ou un conteneur de taille fixe.
- Injection de contenu dynamique : Évitez d'insérer du contenu au-dessus du contenu existant, sauf si déclenché par une interaction utilisateur.
- Polices web : Utilisez
font-display: swapet préchargez les polices pour éviter le texte invisible ou les décalages de mise en page.
Exemple : Réservez de l'espace pour une image :
<img src="#" width="800" height="600" alt="...">Outils et flux de travail pour une surveillance continue
La performance n'est pas une correction ponctuelle. Intégrez la surveillance dans votre processus de développement :
- Lighthouse CI : Lancez des audits à chaque pull request pour détecter les régressions.
- Real User Monitoring (RUM) : Utilisez la bibliothèque
web-vitalset envoyez les données à votre plateforme d'analyse. - Budgets de performance : Définissez des seuils pour les métriques et faites échouer les builds en cas de dépassement.
Vérifiez régulièrement PageSpeed Insights et Search Console pour suivre les progrès.
FAQ
Que sont les Core Web Vitals ?
Les Core Web Vitals sont un ensemble de métriques définies par Google qui mesurent l'expérience utilisateur réelle : Largest Contentful Paint (chargement), First Input Delay (interactivité) et Cumulative Layout Shift (stabilité visuelle).
À quelle fréquence dois-je mesurer les Core Web Vitals ?
Surveillez en continu avec RUM et lancez des audits de laboratoire à chaque changement de code significatif. Vérifiez les données de terrain mensuellement via Search Console ou PageSpeed Insights.
Puis-je améliorer les Core Web Vitals sans développeur ?
Certaines corrections comme la compression d'images et l'utilisation d'un CDN peuvent être faites avec des plugins ou des outils, mais les optimisations plus poussées nécessitent souvent des modifications de code. Commencez par les images et la mise en cache.
Prêt à optimiser vos images pour un meilleur LCP ? Essayez notre Compresseur d'images gratuit pour réduire la taille des fichiers sans sacrifier la qualité.