Core Web Vitals : Mesurer et Améliorer la Performance Web
Vous avez construit une application web moderne, mais les utilisateurs se plaignent qu'elle est lente. Les classements dans les moteurs de recherche chutent, et vous ne savez pas pourquoi. Le coupable pourrait être de mauvais Core Web Vitals—les métriques de Google pour l'expérience utilisateur. Dans ce guide, vous apprendrez ce qu'elles sont, comment les mesurer et surtout comment les améliorer avec des étapes concrètes.
Que sont les Core Web Vitals ?
Les Core Web Vitals sont un ensemble de métriques spécifiques que Google utilise pour évaluer l'expérience utilisateur d'une page web. Elles se concentrent sur le chargement, l'interactivité et la stabilité visuelle :
- Largest Contentful Paint (LCP) : Mesure la performance de chargement. Le temps nécessaire pour que le plus grand élément de contenu (par exemple, image principale, titre) devienne visible. Bon : ≤ 2,5 secondes.
- First Input Delay (FID) : Mesure l'interactivité. Le temps entre la première interaction d'un utilisateur (par exemple, clic sur un bouton) et le moment où le navigateur peut répondre. Bon : ≤ 100 millisecondes.
- Cumulative Layout Shift (CLS) : Mesure la stabilité visuelle. Quantifie les décalages de mise en page inattendus pendant le chargement. Bon : ≤ 0,1.
Ces métriques font partie des signaux d'expérience de page de Google et peuvent affecter les classements dans les moteurs de recherche. Mais plus important encore, elles reflètent la satisfaction réelle des utilisateurs.
Comment mesurer les Core Web Vitals
Vous avez besoin de données de laboratoire et de terrain pour obtenir une image complète. Les données de laboratoire (synthétiques) aident à déboguer les problèmes, tandis que les données de terrain (surveillance des utilisateurs réels) montrent la performance réelle.
Outils de laboratoire
- Lighthouse : Intégré à Chrome DevTools. Lancez un audit pour obtenir des scores et des opportunités.
- PageSpeed Insights : Combine les données de laboratoire et de terrain pour une URL.
- WebPageTest : Tests avancés avec des emplacements et des appareils personnalisés.
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 : Ajoutez-la à votre site pour collecter des métriques d'utilisateurs réels et les envoyer à votre outil d'analyse.
- Search Console : Le rapport Core Web Vitals montre la performance du groupe basée sur les données CrUX.
Voici comment utiliser la bibliothèque web-vitals pour enregistrer les métriques :
import {getLCP, getFID, getCLS} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
navigator.sendBeacon('/analytics', body);
}
getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);
Améliorer le LCP
Le LCP est souvent la métrique la plus difficile. Concentrez-vous sur ces domaines :
- Optimisez les images : Compressez les images, utilisez des formats modernes comme WebP ou AVIF, et servez des images responsives avec
srcset. Chargez paresseusement les images hors écran. - Préchargez les ressources critiques : Utilisez
<link rel="preload">pour les images principales, les polices et le CSS clé. - Réduisez le temps de réponse du serveur : Utilisez un CDN, activez la mise en cache et optimisez le code backend.
- Éliminez les ressources bloquant le rendu : Intégrez le CSS critique, différez le JS non critique et évitez les gros fichiers CSS.
- Utilisez un CDN : Servez les ressources depuis des emplacements edge plus proches des utilisateurs.
Améliorer le FID
Le FID concerne la réactivité. Les tâches longues bloquent le thread principal, retardant l'interactivité.
- Divisez les tâches longues : Utilisez
setTimeoutourequestIdleCallbackpour céder au thread principal. - Optimisez le JavaScript : Fractionnez le code, éliminez le code mort et différez les scripts non critiques.
- Utilisez des web workers : Déplacez les calculs lourds hors du thread principal.
- Réduisez l'impact des tiers : Auditez et limitez les scripts tiers.
Améliorer le CLS
Le CLS est causé par des éléments qui se déplacent pendant le chargement. Prévenez-le en :
- Incluant toujours les attributs width et height sur les images et vidéos. Cela réserve l'espace.
- Réservant l'espace pour les publicités et les intégrations : Utilisez
aspect-ratioen CSS ou des conteneurs fixes. - Évitant d'insérer du contenu au-dessus du contenu existant : Sauf en réponse à une interaction utilisateur.
- Utilisant les transformations CSS pour les animations : Au lieu des propriétés qui déclenchent la mise en page.
- Préchargeant les polices : Utilisez
font-display: swappour éviter le texte invisible et les décalages de mise en page.
Comparaison des métriques Core Web Vitals
| Métrique | Ce qu'elle mesure | Seuil bon | Optimisation principale |
|---|---|---|---|
| LCP | Performance de chargement | ≤ 2,5s | Optimiser les images, précharger, CDN |
| FID | Interactivité | ≤ 100ms | Réduire le JS, diviser 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 Core Web Vitals
Suivez ce processus étape par étape :
- Mesurez : Utilisez PageSpeed Insights pour obtenir une base pour les données de laboratoire et de terrain.
- Identifiez les problèmes : Examinez les opportunités et les diagnostics dans Lighthouse.
- Priorisez : Concentrez-vous d'abord sur la métrique avec le pire score.
- Implémentez les correctifs : Appliquez les optimisations listées ci-dessus.
- Testez : Relancez Lighthouse et vérifiez les données de terrain après le déploiement.
- Surveillez : Mettez en place une surveillance des utilisateurs réels avec la bibliothèque web-vitals et suivez dans le temps.
FAQ
Quels sont les seuils actuels des Core Web Vitals ?
Pour le LCP, bon est ≤ 2,5s, à améliorer est ≤ 4s, mauvais est > 4s. Pour le FID, bon est ≤ 100ms, à améliorer est ≤ 300ms, mauvais est > 300ms. Pour le CLS, bon est ≤ 0,1, à améliorer est ≤ 0,25, mauvais est > 0,25.
À quelle fréquence dois-je mesurer les Core Web Vitals ?
Surveillez les données de terrain en continu et lancez des tests de laboratoire après des changements significatifs. Google met à jour les données CrUX mensuellement, alors vérifiez Search Console régulièrement.
Puis-je améliorer les Core Web Vitals sans développeur ?
Certains correctifs comme la compression d'images peuvent être réalisés avec des outils, mais beaucoup nécessitent des modifications de code. Envisagez d'utiliser un plugin d'optimisation de performance si vous êtes sur un CMS comme WordPress.
Prêt à optimiser vos images pour un meilleur LCP ? Essayez notre Compresseur d'images pour réduire la taille des fichiers sans perdre en qualité.