monitoring PageViewTiming L'événement des navigateurs envoie chaque point de données comme un événement distinct dès qu'il est disponible. Parce que nous ne limitons pas le temps, vous pouvez recevoir les premières données de peinture ou de première interaction, quel que soit le moment où elles se déclenchent. Ce document décrit pourquoi et comment utiliser PageViewTiming et son attribut pour interroger les données sur votre site, le chargement des composants et les mesures de performance des utilisateurs, tant du point de vue visuel que de la réactivité.
Pourquoi utiliser PageViewTiming ?
Si votre application utilise des pages asynchrones ou dynamiques, vous aurez peut-être besoin de détails supplémentaires sur le chargement du site ou du composant. Mais les pages peuvent charger du contenu de différentes manières, et l'utilisateur peut contrôler quand il interagit avec ce contenu. C'est pourquoi certaines mesures de performances centrées sur l'utilisateur se produisent en dehors du temps de chargement de la page standard dans l'agent de navigateur.
Par exemple, l’utilisateur peut devenir impatient et commencer à cliquer dès que le contenu est sur la page Web. Ou bien, ils peuvent attendre longtemps après le chargement du contenu pour utiliser la page.
L'événement PageViewTiming fournit un mécanisme de diffusion plus temporaire qui ne dépend d'aucun autre événement. Les mesures supplémentaires peuvent vous aider à comprendre comment les utilisateurs perçoivent votre site, tant du point de vue visuel que de la réactivité.
Prise en charge des principaux éléments Web vitaux de Google
À partir de la version 1177 de l'agent de monitoring des navigateurs, nous avons un support complet pour les principaux éléments Web Vitals. Cette fonctionnalité est disponible dans toutes les versions de l'agent (Lite, Pro ou Pro+SPA).
Notez que les métriques qui composent les principaux éléments essentiels du Web évoluent au fil du temps. L’ensemble actuel se concentre sur trois aspects de l’expérience utilisateur : le chargement, l’interactivité et la stabilité visuelle. Il comprend les métriques suivantes et leur seuil respectif :
- Largest contentful paint (LCP):mesure les performances de chargement. Pour offrir une bonne expérience utilisateur, LCP doit se produire within 2.5 seconds lorsque la page commence à se charger.
- Interaction to next paint (INP): mesure la latence de toutes les interactions de l'utilisateur avec une page. Pour offrir une bonne expérience utilisateur, les pages doivent avoir un INP de less than 200 milliseconds.
- Cumulative layout shift (CLS):mesure la stabilité visuelle. Pour offrir une bonne expérience utilisateur, les pages doivent conserver un CLS de less than 0.1.
Pour chacune de ces mesures, pour vous assurer que vous atteignez l'objectif recommandé pour la plupart de vos utilisateurs, un bon seuil à mesurer est le 75th percentile de chargements de pages, segmenté sur les appareils mobiles et de bureau.
Pour en savoir plus, regardez notre conférence Nerd Days sur les performances perçues.
Métriques visuelles, d'interactivité et de réactivité détaillées
Les événements BrowserInteraction et PageView terminent leur reporting lorsqu'ils reçoivent le timing de chargement de la fenêtre de page (ou de chargement de la fenêtre et d'AJAX). Cependant, les mesures de peinture et d’interactivité peuvent survenir à tout moment. PageViewTiming fournit ces métriques sous forme d'événement distinct pour :
- Tenez compte de la variabilité de ce timing.
- Évitez de définir un délai d’expiration arbitraire.
- Empêcher la tenue indéfinie des événements
BrowserInteractionetPageView.
Données complémentaires | Commentaires |
|---|---|
| Les attributs L'utilisation de |
| La métrique Les recherches de Google ont révélé que regarder le moment où l'élément le plus volumineux était rendu était un moyen plus précis de mesurer le moment où le contenu principal d'une page est chargé et utile. Pour plus d'informations sur cette métrique, y compris les limitations et les considérations, consultez le projet w3c. Nous rapportons également l'attribut de score de décalage de disposition cumulé avec LCP. Cet attribut est signalé comme Le contenu le plus volumineux est l'une des trois métriques identifiées par Google comme les éléments essentiels du Web. Les valeurs LCP jusqu'à 2,5 secondes sont considérées comme « bonnes », celles entre 2,5 et 4 secondes sont considérées comme « à améliorer » et celles supérieures à 4 secondes sont considérées comme « médiocres ». |
| Avec l'ajout de La métrique Nous rapportons également l'attribut de score de décalage de mise en page cumulé (CLS) au moment de la première interaction de l'utilisateur. Cet attribut est signalé comme L'INP est l'une des trois mesures identifiées par Google comme les principaux éléments essentiels du Web. Un score INP de 200 ms ou moins est considéré comme « bon », entre 200 et 500 ms est considéré comme « à améliorer » et au-dessus de 500 ms est considéré comme « médiocre ». |
| Le décalage de disposition cumulatif (CLS) est disponible avec l'agent v1177 ou supérieur. Le CLS est une mesure importante et centrée sur l'utilisateur pour mesurer la stabilité visuelle, car il permet de quantifier la fréquence à laquelle l'utilisateur subit des changements de mise en page inattendus. Un CLS faible contribue à garantir que la page est agréable. Le décalage cumulé de mise en page est l'une des trois mesures identifiées par Google comme les éléments essentiels du Web. Les scores CLS jusqu'à 0,1 sont considérés comme « bons », ceux compris entre 0,1 et 0,25 sont considérés comme « à améliorer » et ceux supérieurs à 0,25 sont considérés comme « médiocres ». |
| L'interaction avec la peinture suivante (INP) est disponible avec l'agent v1227 ou supérieur. INP est une nouvelle mesure permettant de mesurer la réactivité d'exécution et les performances perçues par l'utilisateur. Il mesure la plus grande latence entre l'interaction de l'utilisateur et la réponse de la page ou les repeintures. Il s'agit d'une mesure expérimentale mais identifiée comme significative ajoutée dans Web Vitals v3. Les scores INP jusqu'à 200 ms sont considérés comme « bons », entre 200 et 500 ms sont considérés comme « à améliorer » et au-dessus de 500 ms sont considérés comme « médiocres ». |
| Vous pouvez consulter différents types d'activités avec l'attribut |
| Il s'agit du |
| Il s'agit de la taille signalée de l'élément |
| L'événement Nous signalons également l'attribut de score de décalage de disposition cumulé (CLS) avec |
| L'événement Nous signalons également l'attribut de score de décalage de disposition cumulé (CLS) avec |
| L'événement Nous signalons également l'attribut de score de décalage de disposition cumulé (CLS) avec |
Compatibilité et exigences
Exigences:
- Répond aux exigences d'installation.
- Le signalement de cet événement nécessite la version 1153 ou supérieure de l'agent de navigateur.
Suivez nos notes de sortie Browser de l'agent pour savoir quand de nouvelles métriques sont sorties.
Ces métriques sont prises en charge par les versions de navigateur suivantes. Pour les navigateurs non pris en charge, aucun événement PageViewTiming ne sera enregistré.
Métriques | Versions de navigateur prises en charge |
|---|---|
|
|
|
|
|
|
|
|
| Cet événement est actuellement pris en charge par la plupart des versions de navigateur modernes, à l'exception de Safari inférieur à 14.1 (bureau) ou 14.5 (iOS). Matrice de compatibilité via la documentation MDN. |
| Cet événement est actuellement pris en charge par tous les navigateurs sur ordinateur et mobile. Matrice de compatibilité via la documentation MDN. |
| Cet événement est actuellement pris en charge par tous les navigateurs sur ordinateur et mobile. Matrice de compatibilité via la documentation MDN. |
Décalage de mise en page cumulatif
Le décalage cumulé de mise en page (CLS) est une mesure mesurant la stabilité du contenu d'une page Web. Pour une description complète, voir web.dev/cls.
Comment CLS est-il capturé dans New Relic
Les changements dans la mise en page tels que signalés par l' API d'instabilité de la mise en page sont agrégés tout au long de la vie de la page et signalés sous forme d'attribut sur tous les événements PageViewTiming, représentant la valeur CLS lorsque cet événement s'est produit.
En utilisant ce modèle, l'utilisateur peut consulter sa valeur CLS à différents moments de la vie de la page ; par exemple, les valeurs CLS jusqu'à ce que l'utilisateur interagisse pour la première fois avec la page ou masque la page.
Approximation d'autres sources CLS
Lighthouse capture la valeur CLS uniquement jusqu'au moment où une page est chargée, ce qui est utile dans un environnement de développement ou de laboratoire. Vous pouvez approximer les valeurs de Lighthouse en examinant l'événement windowLoad PageViewTiming .
Le rapport CrUX utilise des valeurs capturées au cours de la durée de vie de la page, ce qui est utile pour analyser les pires changements dans un environnement RUM. Vous pouvez approximer les valeurs CrUX en examinant l'attribut CLS sur l'événement windowUnload PageViewTiming . Ces valeurs ne seront pas exactement les mêmes en raison de différents ensembles d’échantillons et d’une différence dans la manière dont les valeurs des pages Web de longue durée sont incluses. L'agent monitoring des navigateurs New Relic capture le CLS lorsque la page se décharge, tandis que CrUX collecte et met à jour la métrique tout au long de la durée de vie de la page.
Comment CLS est agrégé
Depuis juillet 2021, Google a mis à jour la manière dont les valeurs CLS sont agrégées. monitoring des versions d'agent de navigateurs v12xx utilise la méthode décrite dans Evolving the CLS métrique.
Browser monitoring agent v12xx or higher:
Les valeurs de décalage de disposition sont capturées dans les fenêtres. Les changements de disposition qui se produisent à moins d'une seconde d'intervalle, mais pas plus de 5 secondes entre le premier et le dernier changement, font partie de la même fenêtre. Un score CLS représente la somme des valeurs de décalage de disposition de la fenêtre avec la somme la plus élevée de valeurs de décalage de disposition.
Prior to Browser agent v12xx:
Un score CLS représente la somme de tous les changements de mise en page qui se sont produits jusqu'à ce point dans la vie de la page.
Vos données d'événement de requête
Voici quelques exemples de requêtes pour les données d'événement pour vous aider à démarrer.