Vues RUM

Vues RUM

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

AttributTypeDecription
durationnombre (ns)Temps passé sur la vue actuelle.
view.loading_timenombre (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_paintnombre (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.
view.measures.dom_interactivenombre (ns)Le moment auquel le parser termine de travailler sur le document principal. Consulter la documentation MDN pour en savoir plus
view.measures.dom_content_loadednombre (ns)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
view.measures.dom_completenombre (ns)La page et toutes les sous-ressources sont prêtes. Pour l’utilisateur, l’indicateur de chargement à proximité du curseur a disparu. Consulter la documentation MDN pour en savoir plus
view.measures.load_event_endnombre (ns)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_countnombreNombre total d’erreurs recueillies pour cette vue.
view.measures.long_task_countnombreNombre total de tâches longues recueillies pour cette vue.
view.measures.resource_countnombreNombre total de ressources recueillies pour cette vue.
view.measures.user_action_countnombreNombre total d’actions utilisateur recueillies pour cette vue.

Pour aller plus loin