La première étape pour les améliorer consiste à collecter des données dans le rapport Core Web Vitals de votre site. Une analyse complète consiste à collecter des données sur les performances issues de l'environnement réel et de l'environnement de laboratoire. Pour mesurer les métriques Web Vitals, le code ne peut être modifié que très légèrement, et vous pouvez utiliser des outils sans frais.
Mesurer les signaux Web à l'aide de données RUM
Les données RUM (Real User Monitoring), également appelées données réelles, capturent les performances enregistrées par les utilisateurs réels d'un site. Google utilise les données RUM pour déterminer si un site respecte les seuils Core Web Vitals recommandés.
Premiers pas
Si vous n'avez pas de configuration 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:
- PageSpeed Insights (PSI): PageSpeed Insights fournit des rapports sur les performances globales au niveau de la page et de l'origine sur les 28 derniers jours. Il fournit également des suggestions pour améliorer vos performances. Si vous recherchez une action unique à effectuer pour commencer à mesurer et à améliorer les métriques Web Vitals de votre site, nous vous recommandons d'utiliser PSI pour réaliser un audit de votre site. PSI est disponible sur le Web et en tant qu'API.
- Search Console: la Search Console fournit des données sur les performances page par page. Il est donc particulièrement adapté pour identifier les pages spécifiques qui doivent être améliorées. Contrairement à PageSpeed Insights, les rapports de la Search Console incluent des données historiques sur les performances. Search Console ne peut être utilisée qu'avec les sites dont vous êtes le propriétaire et dont vous avez confirmé la propriété.
- Tableau de bord CrUX: le tableau de bord CrUX est un tableau de bord prédéfini qui affiche des données CrUX pour l'origine de votre choix. Il est basé 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 plus de dimensions. Par exemple, les données peuvent être réparties par appareil et par type de connexion.
Bien que les outils listés ci-dessus conviennent parfaitement pour mesurer les métriques Web Vitals, ils peuvent également s'avérer utiles dans d'autres contextes. Par exemple, CrUX et PSI sont tous deux disponibles en tant qu'API et peuvent servir à créer des tableaux de bord et d'autres rapports.
Collecter des données RUM
Bien que les outils basés sur l'expérience utilisateur basée sur l'expérience utilisateur constituent un bon point de départ pour étudier les performances des signaux Web, nous vous recommandons vivement d'y ajouter votre propre RUM. Les données RUM que vous collectez vous-même peuvent fournir un retour d'information plus détaillé et immédiat sur les performances de votre site. Cela permet d'identifier plus facilement 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.
Des 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 Core Web Vitals avec ces services, demandez à votre fournisseur de RUM comment activer la surveillance des Core Web Vitals pour votre site.
Si vous n'avez pas de fournisseur de RUM, vous pouvez améliorer votre configuration Analytics existante pour collecter ces métriques et générer des rapports les concernant à 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 de RUM pour les métriques Web Vitals, le moyen le plus simple de collecter des mesures des signaux Web consiste à utiliser la bibliothèque JavaScript web-vitals. web-vitals est une petite bibliothèque modulaire (environ 1 Ko) qui fournit une API pratique pour collecter et créer des rapports pour chacune des métriques de métriques Web Vitals mesurables sur le terrain.
Les métriques des Core Web Vitals ne sont pas toutes directement exposées par les API de performances intégrées au navigateur, mais plutôt basées sur celles-ci. Par exemple, le CLS (Cumulative Layout Shift) est implémenté à l'aide de l'API Layout Instability. En utilisant web-vitals, vous n'avez pas à vous soucier d'implémenter ces métriques vous-même. Cela vous permet également de vous assurer que les données que vous collectez correspondent à la méthodologie et aux bonnes pratiques associées à 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.
Agrégation des données
Il est essentiel que vous rapportiez les mesures collectées par web-vitals. Si ces données sont mesurées, mais pas consignées, vous ne les verrez jamais. La documentation web-vitals comprend des exemples montrant comment envoyer les données vers 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é, pensez à l'utiliser. Dans le cas contraire, Google Analytics est sans frais et peut être utilisé à cette fin.
Lors du choix de 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 résultats les plus importants lorsque l'ensemble de l'entreprise, et non un seul service, cherche à améliorer les performances. Consultez l'article Améliorer la vitesse de votre site Web de façon transversale pour découvrir comment susciter l'adhésion de différents départements.
Interprétation des données
Lorsque vous analysez des données de 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, d'autres d'une expérience lente. Toutefois, l'utilisation de la médiane pour synthétiser les données peut facilement masquer ce comportement.
En ce qui concerne les métriques Web Vitals, Google utilise le pourcentage d'expériences "bonnes" plutôt que des statistiques telles que des médianes ou des 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 atteignent les seuils des métriques Core Web Vitals, 75% des visites de la page doivent atteindre le seuil "satisfaisant" pour chaque métrique.
Mesurer Web Vitals à l'aide de données de test
Les données de test, également appelées données synthétiques, sont collectées dans un environnement contrôlé et non dans les 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 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 laboratoire, en particulier si l'état du réseau, le type d'appareil ou l'emplacement de l'environnement du laboratoire sont très différents de ceux des utilisateurs. Toutefois, lorsqu'il s'agit de collecter des données expérimentales sur les métriques Web Vitals, deux points spécifiques sont à prendre en compte:
- CLS (Cumulative Layout Shift) : la valeur Cumulative Layout Shift mesurée dans les environnements de test peut être artificiellement inférieure au CLS observé dans les données RUM. Le CLS correspond à la "somme totale de tous les scores individuels de décalage de mise en page pour chaque décalage de mise en page inattendu qui se produit pendant toute la durée de vie de la page". Cependant, la durée de vie d'une page est généralement très différente selon qu'elle est chargée par un utilisateur réel ou par un outil de mesure des performances synthétique. De nombreux outils de l'atelier ne font que charger 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 changements de mise en page inattendus qui se produisent tout au long de la durée de vie de la page.
- First Input Delay (FID) : le First Input Delay ne peut pas être mesuré dans les environnements de test, car il nécessite une interaction de l'utilisateur avec la page. Par conséquent, le temps de blocage total (TBT) est le proxy de laboratoire recommandé pour le FID. La métrique "TBT" mesure "la durée totale entre First Contentful Paint et Time to Interactive durant laquelle la page ne peut plus répondre à l'entrée utilisateur". Bien que le FID et la requête de navigation détaillée soient calculés différemment, ils reflètent tous deux un thread principal bloqué lors du processus d'amorçage. Lorsque le thread principal est bloqué, le navigateur met du temps à répondre aux interactions de l'utilisateur. Le FID mesure, le cas échéant, le délai qui se produit la première fois qu'un utilisateur tente d'interagir avec une page.
Outils
Ces outils peuvent servir à recueillir des mesures en laboratoire pour les métriques Web Vitals:
- Extension Chrome Web Vitals:l'extension Chrome Web Vitals mesure les métriques Core Web Vitals (LCP, FID et CLS) d'une page donnée et génère des rapports les concernant. Cet outil est conçu pour fournir aux développeurs des informations en temps réel sur leurs performances lorsqu'ils modifient le code.
- Lighthouse:Lighthouse fournit des rapports sur le LCP, le CLS et la requête de navigation privée, et met en évidence d'éventuelles améliorations des performances. Lighthouse est disponible dans les outils pour les développeurs Chrome en tant qu'extension Chrome et sous forme de package npm. Lighthouse peut également être intégré à des workflows d'intégration continue via l'intégration continue Lighthouse.
- WebPageTest:WebPageTest intègre les métriques Web Vitals à ses rapports standards. WebPageTest permet de recueillir des informations sur les signaux Web en fonction de l'état du réseau et de l'appareil.