Une vue de page correspond à la consultation d’une page de votre site Web par un utilisateur. À chaque vue de page, les erreurs, les ressources, les tâches longues et les actions utilisateur associées sont mises en relation avec la vue via un attribut view.id unique. Notez que les vues de page sont mises à jour lorsque de nouveaux événements sont recueillis.
Pour les vues de page, des métriques de performance de chargement sont recueillies à partir de l’API Paint Timing ainsi que de l’API Navigation Timing.
Applications monopage
Pour les applications monopage (SPA), le SDK RUM différencie les navigations initial_load et route_change avec l’attribut loading_type. Si un clic sur votre page Web dirige vers une nouvelle page sans actualisation complète de la page, le SDK RUM initie un nouvel événement d’affichage avec loading_type:route_change. La solution RUM détecte les changements de page à l’aide de l’API History.
Datadog fournit une métrique de performance unique, loading_time, qui calcule le temps nécessaire au chargement d’une page. Cette métrique fonctionne pour les navigations initial_load et route_change.
Comment le temps de chargement est-il calculé ?
Pour assurer la compatibilité avec les applications Web modernes, le temps de chargement est calculé à partir des requêtes réseau et des mutations DOM.
Chargement initial : Le temps de chargement est égal à la mesure la plus longue entre :
La différence entre navigationStart et loadEventEnd ;
La différence entre navigationStart et la première fois qu’aucune activité n’est détectée sur la page pendant plus de 100 ms (une activité étant définie comme une requête réseau ou une mutation DOM en cours).
Changement de route dans une application monopage : Le temps de chargement est égal à la différence entre le clic de l’utilisateur et la première fois qu’aucune activité n’est détectée sur la page pendant plus de 100 ms (une activité étant définie comme une requête réseau ou une mutation DOM en cours)
Métriques collectées
Attribut
Type
Decription
duration
nombre (ns)
Temps passé sur la vue actuelle.
view.loading_time
nombre (ns)
Temps avant que la page soit prête et que toutes les requêtes réseau ou mutations DOM soient terminées. Pour en savoir plus, consultez la documentation sur les données collectées.
view.measures.first_contentful_paint
nombre (ns)
Temps écoulé avant le premier affichage de texte, d’une image (images d’arrière-plan incluses), d’un canvas non blanc ou d’un SVG. Pour en savoir plus sur le rendu par le navigateur, consultez la définition du w3.
Cet événement se déclenche lorsque le document HTML initial est entièrement chargé et parsé, même si les stylesheets, les images et les subframes qui ne bloquent pas le rendu n’ont pas fini de charger. Consulter la documentation MDN pour en savoir plus
Cet événement se déclenche lorsque la page est entièrement chargée. Il entraîne généralement le déclenchement de logique d’application supplémentaire. Consulter la documentation MDN pour en savoir plus
view.measures.error_count
nombre
Nombre total d’erreurs recueillies pour cette vue.
view.measures.long_task_count
nombre
Nombre total de tâches longues recueillies pour cette vue.
view.measures.resource_count
nombre
Nombre total de ressources recueillies pour cette vue.
view.measures.user_action_count
nombre
Nombre total d’actions utilisateur recueillies pour cette vue.
Pour aller plus loin
Documentation, liens et articles supplémentaires utiles: