La première étape pour améliorer les métriques Web Vitals de votre site consiste à collecter des données à leur sujet. Une analyse complète collecte des données de performances à la fois dans des environnements réels et en laboratoire. La mesure des Web Vitals nécessite des modifications minimes du code et peut être effectuée à l'aide d'outils sans frais.
Mesurer les Web Vitals à l'aide des données RUM
Les données Real User Monitoring (RUM), également appelées données de champ, capturent les performances constatées par les utilisateurs réels d'un site. Google utilise les données RUM pour déterminer si un site respecte les seuils recommandés pour les métriques Core Web Vitals.
Premiers pas
Si vous n'avez pas configuré de RUM, les outils suivants vous fourniront rapidement des données sur les performances réelles de votre site. Ces outils sont tous basés sur le même ensemble de données sous-jacent (le rapport d'expérience utilisateur Chrome), mais leurs cas d'utilisation sont légèrement différents :
- Les Outils pour les développeurs Chrome s'intègrent à l'ensemble de données CrUX dans la vue des métriques en direct du panneau "Performances". En comparant votre expérience locale à celle des utilisateurs réels sur la même page, vous pouvez prendre une décision plus éclairée sur les points à déboguer en priorité. Si vous recherchez une action unique à effectuer pour commencer à mesurer et à améliorer les Web Vitals de votre site, nous vous recommandons d'utiliser le panneau "Performances" des outils pour les développeurs Chrome.
- Les rapports PageSpeed Insights (PSI) indiquent les performances globales au niveau de la page et de l'origine au cours des 28 derniers jours. Il fournit également des suggestions pour améliorer les performances. PSI est disponible sur le Web et en tant qu'API.
- Les rapports de la Search Console fournissent des données sur les performances pour chaque page. Il est donc bien adapté pour identifier les pages spécifiques à améliorer. Contrairement à PageSpeed Insights, les rapports de la Search Console incluent des données historiques sur les performances. Vous ne pouvez utiliser la Search Console qu'avec les sites dont vous êtes propriétaire et que vous avez validés.
- CrUX Vis est un tableau de bord prédéfini qui présente l'historique des données CrUX pour une URL ou une origine de votre choix (lorsqu'elles sont disponibles dans l'ensemble de données CrUX). Il est basé sur l'API CrUX History et le processus de configuration prend environ une minute. Par rapport à PageSpeed Insights et à la Search Console, CrUX Vis inclut plus de données (sous-parties LCP, types de navigation, etc.).
- CrUX Vis est un tableau de bord historique qui présente les données CrUX pour une origine ou une URL de votre choix. Il est basé sur l'API CrUX History. Par rapport à PageSpeed Insights et à la Search Console, les rapports CrUX Vis incluent plus de détails. Par exemple, les types de navigation et les données LCP et RTT sont disponibles dans CrUX Vis.
Il est important de noter que, bien que les outils listés précédemment soient bien adaptés pour "démarrer " la mesure des Web Vitals, ils peuvent également être utiles dans d'autres contextes. En particulier, CrUX et PSI sont disponibles en tant qu'API et peuvent être utilisés pour créer des tableaux de bord et d'autres rapports.
Collecter des données RUM
Bien que les outils basés sur CrUX constituent un bon point de départ pour étudier les performances des métriques Web Vitals, nous vous recommandons vivement de les compléter avec votre propre RUM. Les données RUM que vous collectez vous-même peuvent fournir des commentaires plus détaillés et immédiats sur les performances de votre site. Il est ainsi plus facile d'identifier les problèmes et de tester les solutions possibles.
Vous pouvez collecter vos propres données RUM en utilisant un fournisseur RUM dédié ou en configurant vos propres outils.
Les fournisseurs RUM dédiés sont spécialisés dans la collecte et la création de rapports sur les données RUM. Pour utiliser les métriques Core Web Vitals avec ces services, demandez à votre fournisseur RUM d'activer la surveillance des métriques Core Web Vitals pour votre site.
Si vous n'avez pas de fournisseur RUM, vous pouvez peut-être compléter votre configuration Analytics existante pour collecter et générer des rapports sur ces métriques à l'aide de la bibliothèque JavaScript web-vitals. Cette méthode est expliquée plus en détail ci-dessous.
Bibliothèque JavaScript web-vitals
Si vous implémentez votre propre configuration RUM pour les Web Vitals, le moyen le plus simple de collecter des mesures Web Vitals consiste à utiliser la bibliothèque JavaScript web-vitals. web-vitals est une petite bibliothèque modulaire (~2 ko) qui fournit une API pratique pour collecter et générer des rapports sur chacune des métriques mesurables sur le terrain des Web Vitals.
Les métriques qui composent les Web Vitals ne sont pas toutes directement exposées par les API de performances intégrées au navigateur, mais plutôt construites par-dessus. Par exemple, la métrique Cumulative Layout Shift (CLS) est implémentée à l'aide de l'API Layout Instability. En utilisant web-vitals, vous n'avez pas à vous soucier de l'implémentation de ces métriques. Vous avez également la garantie que les données que vous collectez correspondent à la méthodologie et aux bonnes pratiques de chaque métrique.
Pour en savoir plus sur l'implémentation de web-vitals, consultez la documentation et le guide Bonnes pratiques pour mesurer les Web Vitals sur le terrain.
Agrégation des données
Il est essentiel que vous signaliez les mesures collectées par web-vitals. Si ces données sont mesurées, mais pas signalées, vous ne les verrez jamais. La documentation web-vitals inclut des exemples montrant comment envoyer les données à un point de terminaison d'API générique, à Google Analytics ou à Google Tag Manager.
Si vous avez déjà un outil de reporting préféré, envisagez de l'utiliser. Sinon, Google Analytics est sans frais et peut être utilisé à cette fin.
Lorsque vous réfléchissez à l'outil à utiliser, il est utile de penser aux personnes qui auront besoin d'accéder aux données. En général, les entreprises obtiennent les meilleurs résultats lorsque l'ensemble de l'entreprise, et non un seul service, souhaite améliorer ses performances. Consultez Corriger la vitesse d'un site Web de manière transversale pour savoir comment obtenir l'adhésion de différents services.
Interprétation des données
Lorsque vous analysez les données sur les performances, il est important de prêter attention aux extrémités de la distribution. Les données RUM révèlent souvent que les performances varient considérablement : certains utilisateurs bénéficient d'une expérience rapide, tandis que d'autres subissent des temps de chargement lents. Toutefois, l'utilisation de la médiane pour résumer les données peut masquer ce comportement.
En ce qui concerne les Web Vitals, Google utilise le pourcentage d'expériences "bonnes", plutôt que des statistiques comme les médianes ou les moyennes, pour déterminer si un site ou une page respecte les seuils recommandés. Plus précisément, pour qu'un site ou une page soient considérés comme respectant les seuils Core Web Vitals, 75 % des visites de page doivent atteindre le seuil "Bon" pour chaque métrique.
Mesurer les Web Vitals à l'aide de données de laboratoire
Les données de test, également appelées données synthétiques, sont collectées dans un environnement contrôlé, et non auprès d'utilisateurs réels. Contrairement aux données RUM, les données de laboratoire peuvent être collectées à partir d'environnements de préproduction et donc être intégrées aux workflows des développeurs et aux processus d'intégration continue. Lighthouse et WebPageTest sont des exemples d'outils qui collectent des données synthétiques.
Remarques
Il y aura toujours des écarts entre les données RUM et les données de test, en particulier si les conditions de réseau, le type d'appareil ou l'emplacement de l'environnement de test diffèrent considérablement de ceux des utilisateurs. Toutefois, lorsqu'il s'agit de collecter des données de laboratoire sur les métriques Web Vitals en particulier, il est important de tenir compte de quelques points spécifiques :
- La métrique Largest Contentful Paint (LCP) mesurée dans des environnements de test peut être différente de celle mesurée sur le terrain avec des données RUM en raison de retards dans le chargement de la page (via des redirections, une latence de connexion au serveur ou des données non mises en cache), de contenus différents affichés à différents utilisateurs en fonction de l'écran ou pour d'autres raisons (y compris les bannières de cookies et la personnalisation).
- Le Cumulative Layout Shift (CLS) mesuré dans les environnements de test peut être artificiellement inférieur au CLS observé dans les données RUM. De nombreux outils de l'atelier ne font que charger la page, sans interagir avec elle. Par conséquent, ils ne capturent que les décalages de mise en page qui se produisent lors du chargement initial de la page. En revanche, le CLS mesuré par les outils RUM capture les décalages de mise en page inattendus qui se produisent tout au long de la durée de vie de la page.
- La métrique Interaction to Next Paint (INP) ne peut pas être mesurée dans les environnements de test, car elle nécessite des interactions utilisateur avec la page. Par conséquent, le Total Blocking Time (TBT) est le proxy de laboratoire recommandé pour l'INP. Le TBT mesure "la durée totale entre First Contentful Paint et Time to Interactive pendant laquelle la page est bloquée et ne peut pas répondre aux entrées utilisateur". Bien que l'INP et le TBT soient calculés différemment, ils reflètent tous deux un thread principal bloqué pendant le processus d'amorçage. Lorsque le thread principal est bloqué, le navigateur met du temps à répondre aux interactions de l'utilisateur.
Outils
Vous pouvez utiliser les outils suivants pour recueillir des mesures de laboratoire sur les Web Vitals :
- Les Outils pour les développeurs Chrome mesurent et indiquent les métriques Core Web Vitals pour une page donnée dans la vue des métriques en direct du panneau "Performances". Cette vue fournit aux développeurs des commentaires sur les performances en temps réel lorsqu'ils modifient le code.
- Lighthouse : Lighthouse génère des rapports sur le LCP, le CLS et le TBT, et met également en évidence les améliorations de performances possibles. Lighthouse est disponible dans Chrome DevTools, en tant que package npm. Il peut également être intégré aux workflows d'intégration continue à l'aide de Lighthouse CI.
- WebPageTest inclut les Web Vitals dans ses rapports standards. WebPageTest est utile pour collecter des informations sur les Web Vitals dans des conditions spécifiques d'appareil et de réseau.