Core Web Vitals : Mesurer et Améliorer les Performances Web
Pourquoi les Core Web Vitals sont importants
Vous avez construit un site web rapide, mais les utilisateurs se plaignent encore de chargements lents ou d'interactions saccadées. Les moteurs de recherche peuvent également vous classer moins bien si vos scores Core Web Vitals (CWV) sont médiocres. Les CWV sont un ensemble de métriques que Google utilise pour quantifier l'expérience utilisateur : Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS). En 2021, Google a fait de ces métriques un facteur de classement, donc les ignorer peut nuire à votre SEO et à la rétention des utilisateurs.
Ce guide explique comment mesurer chaque métrique, identifier les problèmes courants et appliquer des correctifs pratiques. Nous nous concentrerons sur des étapes concrètes que vous pouvez mettre en œuvre dès aujourd'hui, sans entrer dans tous les cas particuliers.
Comprendre les trois Core Web Vitals
Avant d'optimiser, sachez ce que chaque métrique mesure et ses seuils.
| Métrique | Mesure | Bon | À améliorer | Mauvais |
|---|---|---|---|---|
| LCP | Performance de chargement : temps jusqu'au rendu du plus grand élément de contenu. | ≤ 2,5 s | 2,5 s – 4,0 s | > 4,0 s |
| FID | Interactivité : temps entre la première interaction utilisateur et la réponse du navigateur. | ≤ 100 ms | 100 ms – 300 ms | > 300 ms |
| CLS | Stabilité visuelle : décalages de mise en page inattendus. | ≤ 0,1 | 0,1 – 0,25 | > 0,25 |
Remarque : le FID est remplacé par l'Interaction to Next Paint (INP) en mars 2024, mais les principes d'optimisation sont similaires. Nous nous concentrerons ici sur le FID car il est encore largement référencé.
Comment mesurer les Core Web Vitals
Vous avez besoin à la fois de données de laboratoire et de terrain. Les données de laboratoire (synthétiques) aident au débogage ; les données de terrain (utilisateurs réels) montrent les performances réelles.
Outils de laboratoire
- Lighthouse dans Chrome DevTools : lancez des audits pour les performances, l'accessibilité et le SEO. Il rapporte le LCP, le CLS et le TBT (un proxy pour le FID).
- WebPageTest : tests avancés avec des filmstrips et des diagrammes en cascade.
- PageSpeed Insights : combine les données de laboratoire et de terrain (si disponibles).
Outils de terrain
- Chrome User Experience Report (CrUX) : ensemble de données public de métriques d'utilisateurs réels. Accessible via PageSpeed Insights ou BigQuery.
- Bibliothèque JavaScript web-vitals : collectez les métriques d'utilisateurs réels dans vos analyses.
- Rapport Core Web Vitals de la Search Console : montre les groupes d'URL avec des problèmes.
Commencez par PageSpeed Insights pour obtenir un aperçu rapide, puis utilisez Lighthouse pour des diagnostics détaillés.
Améliorer le Largest Contentful Paint (LCP)
Le LCP souffre souvent d'une réponse serveur lente, de ressources bloquant le rendu ou d'images non optimisées. Suivez ces étapes :
- Optimisez le temps de réponse du serveur : utilisez la mise en cache, un CDN et un code backend efficace. Visez un Time to First Byte (TTFB) inférieur à 0,8 s.
- Éliminez les ressources bloquant le rendu : intégrez le CSS critique, différez le CSS et le JavaScript non critiques. Utilisez
asyncoudeferpour les scripts. - Optimisez les images : compressez les images, utilisez des formats modernes (WebP, AVIF) et implémentez des images responsives avec
srcset. Pour l'image LCP, préchargez-la avec<link rel="preload">. - Utilisez un CDN : servez les ressources statiques depuis des emplacements de périphérie.
- Mettez en cache les ressources : définissez de longues durées de cache pour les ressources statiques.
Exemple : préchargez l'image LCP et définissez des dimensions explicites pour éviter les décalages de mise en page.
<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">
<img src="/hero.webp" srcset="/hero-480.webp 480w, /hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero" width="800" height="600">Améliorer le First Input Delay (FID)
Le FID mesure la réactivité. Les longues tâches JavaScript bloquent le thread principal, retardant les interactions. Pour améliorer le FID :
- Divisez les longues tâches : utilisez
setTimeoutourequestIdleCallbackpour céder la main au thread principal. - Minimisez le travail sur le thread principal : réduisez le temps d'exécution JavaScript, évitez les gros bundles et utilisez le code splitting.
- Optimisez les gestionnaires d'événements : appliquez un debounce ou un throttle aux gestionnaires coûteux.
- Utilisez des web workers pour les tâches gourmandes en CPU.
- Évitez les gros scripts tiers : auditez et supprimez les scripts inutiles.
Des outils comme Lighthouse signalent les longues tâches. Utilisez le panneau Performance dans Chrome DevTools pour les identifier.
Améliorer le Cumulative Layout Shift (CLS)
Le CLS mesure la stabilité visuelle. Les décalages de mise en page se produisent lorsque des éléments changent de position de manière inattendue. Causes courantes et correctifs :
- Images sans dimensions : définissez toujours les attributs
widthetheightou utilisezaspect-ratioen CSS. - Publicités, intégrations et iframes : réservez de l'espace avec un placeholder ou définissez des dimensions fixes.
- Contenu dynamique : évitez d'insérer du contenu au-dessus du contenu existant, sauf en réponse à une interaction utilisateur.
- Polices web : utilisez
font-display: swapet préchargez les polices pour éviter le texte invisible (FOIT) et les décalages de mise en page. - Animations : privilégiez
transformetopacityen CSS pour les animations, car elles ne déclenchent pas de mise en page.
Testez avec l'API Layout Instability dans DevTools ou utilisez la bibliothèque web-vitals pour enregistrer le CLS sur le terrain.
Flux de travail pratique pour une surveillance continue
L'optimisation n'est pas une tâche ponctuelle. Mettez en place une surveillance :
- Instrumentez votre site avec la bibliothèque
web-vitalset envoyez les métriques à votre plateforme d'analyse. - Configurez des alertes lorsque les métriques dépassent les seuils.
- Exécutez régulièrement Lighthouse dans votre CI/CD pour détecter les régressions.
- Utilisez la Search Console pour surveiller les tendances des données de terrain.
N'oubliez pas que les données de terrain sont ce qui compte pour le classement. Les données de laboratoire vous aident à déboguer, mais validez toujours avec de vrais utilisateurs.
FAQ
Quels sont les seuils actuels des Core Web Vitals ?
En 2023, les seuils sont : LCP bon ≤2,5 s, à améliorer 2,5 s–4,0 s, mauvais >4,0 s ; FID bon ≤100 ms, à améliorer 100 ms–300 ms, mauvais >300 ms ; CLS bon ≤0,1, à améliorer 0,1–0,25, mauvais >0,25. Notez que le FID est remplacé par l'INP en 2024.
À quelle fréquence dois-je mesurer les Core Web Vitals ?
Surveillez les données de terrain en continu via les analyses et exécutez des tests de laboratoire (par exemple, Lighthouse) à chaque déploiement ou au moins chaque semaine. Les changements majeurs doivent déclencher un nouvel audit.
Puis-je améliorer les Core Web Vitals sans développeur ?
Certaines corrections comme la compression d'images ou l'activation de la mise en cache peuvent être effectuées via des plugins ou des paramètres d'hébergement. Cependant, les optimisations plus poussées (par exemple, le code splitting, le CSS critique) nécessitent généralement un travail de développement.
Prêt à optimiser vos images pour un meilleur LCP ? Essayez notre Compresseur d'Images gratuit pour réduire la taille des fichiers sans perte de qualité.