Mise à jour
La recopilación de datos sobre los elementos vitales la toile de su sitio es el primer paso para mejorarlos. Un análisis completo recopilará datos de rendimiento de entornos de laboratorio y del mundo real. La medición de valores vitales web requiere cambios mínimos en el código y se puede lograr utilizando herramientas gratuitas.
Mesure des valeurs vitales Web à l'aide des données RUM
Surveillance des utilisateurs réels (RUM), también conocidos como datos de campo, capturan el rendimiento experimentado por los usuarios reales de un sitio. Los datos de RUM son los que utiliza Google para determinar si un sitio cumple con los umbrales recomendados de Core Web Vitals.
Démarrage
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. Tous ces outils sont basés sur le même ensemble de données sous-jacent (le Rapport d'expérience utilisateur Chrome), mais ils ont des cas d'utilisation légèrement différents:
- PageSpeed Insights (PSI): PageSpeed Insights rapporte les performances globales au niveau de la page et au niveau de la source pour les 28 derniers jours. Il offre également des conseils sur la façon d'améliorer les performances. Si vous recherchez une action unique pour commencer à mesurer et à améliorer les valeurs vitales de votre site Web, nous vous recommandons d'utiliser PSI pour auditer votre site. PSI est disponible en la toile et en tant que API.
- Search Console: Search Console informa datos de rendimiento por página. Esto lo hace adecuado para identificar páginas específicas que necesitan mejoras. A diferencia de PageSpeed Insights, los informes de Search Console incluyen datos históricos de rendimiento. Search Console solo se puede usar con sitios de los que seas propietario y de los que hayas verificado la propiedad.
- Tableau de bord CrUX: Carte CrUX est un tableau de bord prédéfini qui affiche les données CrUX pour une source de votre choix. Il est construit sur Data Studio et le processus de configuration prend environ une minute. Par rapport à PageSpeed Insights et Search Console, les rapports du tableau de bord CrUX incluent plus de dimensions; par exemple, les données peuvent être ventilées par appareil et type de connexion.
Vale la pena señalar que, aunque las herramientas enumeradas anteriormente son adecuadas para «comenzar» con la medición de Web Vitals, también pueden ser útiles en otros contextos. En particular, tanto CrUX como PSI están disponibles como API y se pueden utilizar para construire des panneaux et autres rapports.
Collecte de données RUM
Aunque las herramientas basadas en CrUX son un buen punto de partida para investigar el rendimiento de Web Vitals, recomendamos encarecidamente complementarlas con su propio RUM. Los datos de RUM que recopila usted mismo pueden proporcionar comentarios más detallados e inmediatos sobre el rendimiento de su sitio. Esto hace que être más fácil identificar problemas y probar posibles soluciones.
Les sources de données basées sur CrUX rapportent les données en utilisant une granularité d'environ un mois; cependant, les détails de ceci varient légèrement selon l'outil. Par exemple, PSI et Search Console rapportent les performances observées au cours des 28 derniers jours, tandis que le tableau de bord et l'ensemble de données CrUX sont ventilés par mois calendaire.
Vous pouvez collecter vos propres données RUM en utilisant un fournisseur RUM dédié ou en mettant en place vos propres outils.
Les fournisseurs de RUM dédiés se spécialisent dans la collecte et la communication des données RUM. Pour utiliser Core Web Vitals avec ces services, demandez à votre fournisseur RUM d'activer la surveillance Core Web Vitals pour votre site.
Si vous ne disposez pas d'un fournisseur RUM, vous pourrez peut-être augmenter votre configuration d'analyse existante pour collecter et générer des rapports sur ces métriques à l'aide du web-vitals Bibliothèque JavaScript. Cette méthode est expliquée plus en détail ci-dessous.
La biblioteca JavaScript de web-vitals
Si vous implémentez votre propre configuration RUM pour Web Vitals, le moyen le plus simple de collecter des mesures à partir de Web Vitals est d'utiliser le web-vitals Bibliothèque JavaScript. web-vitals est une petite bibliothèque modulaire (~ 1 Ko) qui fournit une API pratique pour collecter et rapporter chacune des métriques Web Vitals mesurables sur le terrain.
Las métricas que componen Web Vitals no están todas directamente expuestas por las API de rendimiento integradas del le navigateur, sino que se basan en ellas. Por ejemplo, Acumulative Layout Shift (CLS) se implementa utilizando el API d'instabilité de conception. En utilisant web-vitals, vous n'avez pas à vous soucier de la mise en œuvre de ces métriques vous-même; il s'assure également que les données qu'il collecte correspondent à la méthodologie et aux meilleures pratiques pour chaque métrique.
Pour plus d'informations sur l'implémentation web-vitals, se référer à Documentation et le Guide des meilleures pratiques pour mesurer les données vitales du Web sur le terrain.
Agrégation de données
Il est essentiel que vous signaliez les mesures collectées par web-vitals. Si ces données sont mesurées mais non rapportées, vous ne les verrez jamais. Les web-vitals La documentation comprend des exemples qui montrent comment envoyer les données à un point de terminaison d'API générique, Google Analyticsou Gestionnaire de balises Google.
Si ya tiene una herramienta de informes favorita, considere usarla. De lo contrario, Google Analytics es gratuito y puede utilizarse para este propósito.
Lors de l'examen de l'outil à utiliser, il est utile de réfléchir à qui devra avoir accès aux données. En règle générale, les entreprises obtiennent le meilleur rendement lorsque l'ensemble de l'entreprise, plutôt qu'un seul service, souhaite améliorer ses performances. Voir Correction de la vitesse intersite pour plus d'informations sur la façon d'obtenir l'adhésion de différents départements.
L'interprétation des données
Lors de l'analyse des données de performances, il est important de prêter attention aux files d'attente de la distribution. Les données RUM révèlent souvent que les performances varient considérablement - certains utilisateurs ont des expériences rapides, d'autres ont des expériences lentes. Cependant, l'utilisation de la médiane pour résumer les données peut facilement masquer ce comportement.
Pour Web Vitals, Google utilise le pourcentage de "bonnes" expériences, plutôt que des statistiques telles que des médianes ou des moyennes, pour déterminer si un site ou une page atteint les seuils recommandés. Plus précisément, pour qu'un site ou une page soit considéré comme atteignant les seuils Core Web Vitals, 75% de pages vues doivent atteindre le «bon» seuil pour chaque métrique.
Mesure des valeurs vitales Web à l'aide de données de laboratoire
Les données de laboratoire, également appelées données synthétiques, sont collectées à partir d'un environnement contrôlé, plutôt que des utilisateurs réels. Contrairement aux données RUM, les données de laboratoire peuvent être collectées à partir d'environnements de pré-production et peuvent donc être incorporées dans les flux de travail des développeurs et les processus d'intégration continue. Lighthouse et WebPageTest sont des exemples d'outils qui collectent des données synthétiques.
Considérations
Il y aura toujours des divergences entre les données RUM et les données de laboratoire, en particulier si les conditions du réseau, le type de périphérique ou l'emplacement de l'environnement de laboratoire diffèrent considérablement de ceux des utilisateurs. Cependant, lorsqu'il s'agit de collecter des données de laboratoire sur les métriques Web Vitals en particulier, il y a quelques considérations spécifiques qu'il est important de garder à l'esprit:
- Modification de conception cumulative (CLS): Le changement de conception cumulatif mesuré dans les paramètres de laboratoire peut être artificiellement inférieur au CLS observé dans les données RUM. CLS est défini comme la `` somme totale de tous les scores de modification de conception individuels pour chaque modification de conception inattendue qui se produit tout au long de la vie de la page. «Sin embargo, la vida útil de una página suele ser muy diferente según si la carga un Nom d'utilisateur real o una herramienta sintética de medición del rendimiento. Muchas herramientas de laboratorio solo cargan la página, no interactúan con ella. Como resultado, , solo capturan cambios de diseño que ocurren durante la carga inicial de la página. Por el contrario, el CLS medido por las herramientas RUM captura cambios de diseño inesperados que ocurren durante toda la vida útil de la página.
- Délai de première entrée (FID): Le premier délai de publication ne peut pas être mesuré dans les environnements de laboratoire, car il nécessite des interactions de l'utilisateur avec la page. Par conséquent, le temps de blocage total (TBT) est le proxy de laboratoire recommandé pour les FID. TBT mesure le "laps de temps total entre la première peinture Contentful et le temps d'interactivité pendant lequel la page ne peut pas répondre aux entrées de l'utilisateur". Bien que FID et TBT soient calculés différemment, ils reflètent tous deux un thread principal bloqué pendant le processus de démarrage. Lorsque le thread principal est bloqué, le navigateur est lent à répondre aux interactions des utilisateurs. Le FID mesure le délai, le cas échéant, qui se produit la première fois qu'un utilisateur tente d'interagir avec une page.
Estampillage
Ces outils peuvent être utilisés pour collecter des mesures de laboratoire à partir de Web Vitals:
- Extension Chrome Web Vitals: Chrome Web Vitals extension mesure et rapporte Core Web Vitals (LCP, FID et CLS) pour une page donnée. Cet outil est destiné à fournir aux développeurs un retour d'information en temps réel sur les performances lorsqu'ils apportent des modifications au code.
- Phare: Lighthouse présente des rapports sur le LCP, le CLS et le TBT, soulignant également les améliorations potentielles des performances. Lighthouse est disponible dans Chrome DevTools, en tant qu'extension Chrome et en tant que package npm. Lighthouse peut également être intégré dans des flux de travail d'intégration continue via Phare CI.
- WebPageTest: WebPageTest inclut Web Vitals dans ses rapports standard. WebPageTest est utile pour collecter des informations sur Web Vitals dans des conditions particulières de périphérique et de réseau.
