La collecte de données sur les métriques Web Vitals de votre site est la première étape pour les améliorer. Une analyse complète collecte des données de performances provenant à la fois d'environnements réels et d'environnements de laboratoire. La mesure des Web Vitals nécessite des modifications minimales du code et peut être effectuée à l'aide d'outils gratuits.
Mesurer les Web Vitals à l'aide de données RUM
Les données de surveillance des utilisateurs réels (RUM, Real User Monitoring), également appelées données de champ, capturent les performances des utilisateurs réels d'un site. Google utilise les données RUM pour déterminer si un site atteint les seuils recommandés des 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 se basent tous sur le même ensemble de données sous-jacent (le rapport d'expérience utilisateur Chrome), mais ont des cas d'utilisation légèrement différents:
- Chrome DevTools s'intègre à l'ensemble de données CrUX dans la vue des métriques en temps réel du panneau "Performances". En comparant votre expérience locale à celle d'utilisateurs réels sur la même page, vous pouvez prendre une décision plus éclairée sur les éléments à corriger. Si vous souhaitez effectuer une seule action pour commencer à mesurer et à améliorer les métriques Web Vitals de votre site, nous vous recommandons d'utiliser le panneau "Performances" des Outils pour les développeurs Chrome.
- PageSpeed Insights (PSI) fournit des rapports sur les performances agrégées au niveau des pages et des origines au cours des 28 derniers jours. De plus, il fournit des suggestions pour améliorer les performances. PSI est disponible sur le Web et en tant qu'API.
- La Search Console fournit des rapports sur les performances page par page. Il est donc particulièrement adapté pour identifier les pages spécifiques à améliorer. Contrairement à PageSpeed Insights, les rapports de la Search Console incluent l'historique des données sur les performances. La Search Console ne peut être utilisée que pour les sites dont vous êtes propriétaire et dont vous avez validé la propriété.
- Le tableau de bord CrUX est un tableau de bord prédéfini qui affiche les données CrUX pour une origine de votre choix. Il repose sur Data Studio, et le processus de configuration prend environ une minute. Par rapport à PageSpeed Insights et à la Search Console, les rapports du tableau de bord CrUX incluent davantage de dimensions. Par exemple, les données peuvent être ventilées par appareil et par type de connexion.
Notez que, bien que les outils listés précédemment soient adaptés pour se lancer dans la mesure des métriques 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 analyser les performances des signaux Web, 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 à l'aide d'un fournisseur RUM dédié ou en configurant vos propres outils.
Les fournisseurs de RUM dédiés se spécialisent 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 le contrôle des métriques Core Web Vitals pour votre site.
Si vous n'avez pas de fournisseur RUM, vous pouvez peut-être augmenter votre configuration d'analyse existante pour collecter ces métriques et générer des rapports les concernant en utilisant 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 le rapport Core Web Vitals, le moyen le plus simple de collecter les mesures des signaux Web consiste à utiliser la bibliothèque JavaScript web-vitals. web-vitals est une petite bibliothèque modulaire (environ 2 Ko) qui fournit une API pratique pour collecter et créer des rapports sur chacune des métriques Web Vitals mesurables sur le terrain.
Les métriques qui constituent les signaux Web ne sont pas toutes exposées directement par les API de performances intégrées du navigateur, mais sont plutôt construites sur la base de celles-ci. Par exemple, la statistique 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 d'implémenter vous-même ces métriques. Il garantit également 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 métriques 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 enregistré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 création de rapports préféré, envisagez de l'utiliser. Sinon, Google Analytics est gratuit et peut être utilisé à cette fin.
Lorsque vous réfléchissez à l'outil à utiliser, il est utile de réfléchir à qui aura besoin d'accéder aux données. Les entreprises obtiennent généralement les meilleurs résultats lorsque l'ensemble de l'entreprise, et non un seul service, s'intéresse à l'amélioration des performances. Consultez Améliorer la vitesse du 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 des 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 : l'expérience de certains utilisateurs est rapide, tandis que d'autres sont lentes. Toutefois, l'utilisation de la médiane pour résumer les données peut masquer ce comportement.
En ce qui concerne les métriques Web Vitals, Google utilise le pourcentage d'expériences "satisfaisantes" plutôt que des statistiques telles que 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 soit considéré comme répondant aux seuils Core Web Vitals, 75 % des visites de la 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 intégrées aux workflows de développement 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 laboratoire, en particulier si les conditions réseau, le type d'appareil ou l'emplacement de l'environnement de laboratoire diffèrent considérablement de ceux des utilisateurs. Toutefois, lorsque vous collectez des données d'atelier sur les métriques Web Vitals en particulier, vous devez prendre en compte quelques points spécifiques :
- Les LCP (Largest Contentful Paint) mesurés dans des environnements de laboratoire peuvent être différents de ceux mesurés sur le terrain avec des données RUM en raison des retards de chargement de la page (via des redirections, des latences de connexion au serveur ou des données non mises en cache), des contenus différents présentés à différents utilisateurs en fonction de l'écran, ou pour d'autres raisons (y compris les bannières de cookies, la personnalisation).
- Le CLS (Cumulative Layout Shift) mesuré dans les environnements de laboratoire peut être artificiellement inférieur au CLS observé dans les données RUM. De nombreux outils de laboratoire ne chargent que la page, sans interagir avec elle. Par conséquent, elles 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 des utilisateurs avec la page. Par conséquent, le Total Blocking Time (TBT) est le proxy recommandé pour les tests en laboratoire pour l'INP. Le TBT mesure la durée totale entre le First Contentful Paint et le 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 sont tous deux des reflets d'un thread principal bloqué pendant le processus de démarrage. Lorsque le thread principal est bloqué, le navigateur tarde à répondre aux interactions de l'utilisateur.
Outils
Vous pouvez utiliser ces outils pour collecter des mesures de Web Vitals en laboratoire:
- Chrome DevTools mesure et génère des rapports sur les Core Web Vitals d'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 apportent des modifications au code.
- Lighthouse Lighthouse fournit des rapports sur le LCP, le CLS et le TBT, et met en évidence les améliorations de performances possibles. Lighthouse est disponible dans les outils pour les développeurs Chrome, sous la forme d'un package npm, et peut également être intégré à des workflows d'intégration continue à l'aide de la CI Lighthouse.
- WebPageTest inclut les métriques Web Vitals dans ses rapports standards. WebPageTest est utile pour collecter des informations sur les Web Vitals dans des conditions d'appareil et de réseau particulières.