Surveiller les données de performances dans la console


Pour afficher les données de performances en temps réel, assurez-vous que votre application utilise une version du SDK Performance Monitoring compatible avec le traitement des données en temps réel. En savoir plus sur les données sur les performances en temps réel

Suivre les métriques clés dans votre tableau de bord

Pour connaître l'évolution de vos métriques clés, ajoutez-les à votre tableau de métriques en haut du tableau de bord Performances. Vous pouvez identifier rapidement les régressions en observant les variations d'une semaine à l'autre ou vérifier que les modifications récentes apportées à votre code améliorent les performances.

Image du tableau de données dans la section <span class="Panneau de contrôle Firebase Performance Monitoring" />

Voici quelques exemples de tendances que vous pouvez suivre:

  • Amélioration du délai de première saisie, car vous avez modifié le moment où votre application charge certains fichiers JavaScript.
  • Diminution du temps de First Contentful Paint après avoir commencé à utiliser un CDN pour les éléments
  • Baisse de la taille de la charge utile de la réponse pour une requête réseau depuis que vous avez implémenté l'utilisation de miniatures
  • Augmentation du temps de réponse du réseau pour un appel d'API tiers lors d'une panne de l'écosystème

Chaque membre d'un projet Firebase peut configurer son propre tableau de données. Vous pouvez suivre les métriques qui vous intéressent, tandis que les autres membres du projet peuvent suivre des ensembles de métriques clés complètement différents sur leurs propres tableaux.

Pour ajouter une métrique à votre tableau de métriques, procédez comme suit:

  1. Accédez au tableau de bord des performances dans la console Firebase.
  2. Cliquez sur une fiche de métrique vide, puis sélectionnez une métrique existante à ajouter à votre tableau.
  3. Cliquez sur  sur une fiche de métrique renseignée pour afficher d'autres options, par exemple pour remplacer ou supprimer une métrique.

Le tableau de données métriques affiche les données métriques collectées au fil du temps, à la fois sous forme graphique et sous forme de pourcentage numérique.

  • Chaque fiche de métrique affiche le pourcentage de variation de la valeur de la métrique au cours de la période sélectionnée, ainsi que la valeur collectée la plus récemment. L'énoncé en haut du tableau de données est une interprétation du pourcentage de changement.
  • Par défaut, le tableau de données affiche la valeur du 75e centile de la métrique, qui correspond aux Core Web Vitals. Si vous souhaitez voir comment différents segments d'utilisateurs utilisent votre application, sélectionnez un autre centile dans le menu déroulant en haut de la page du tableau de bord.

Que signifient les couleurs rouge, verte et grise ?

La plupart des métriques ont une tendance souhaitée. Le tableau de bord des métriques utilise donc la couleur pour indiquer si les données de la métrique évoluent dans le bon ou le mauvais sens.

Par exemple, imaginons que vous suiviez le premier délai d'entrée d'une page (une valeur qui devrait être faible). Si cette valeur augmente, le tableau de données affiche la variation de pourcentage de la métrique en rouge, ce qui attire l'attention sur un éventuel problème. Toutefois, si la valeur diminue ou reste inchangée, le tableau de bord des métriques affiche le pourcentage en vert ou en gris, respectivement.

Si une métrique n'a pas de tendance souhaitée évidente, comme la taille de la charge utile de la réponse pour une requête réseau, le tableau de données affiche toujours le pourcentage de variation de la métrique en gris, quelle que soit l'évolution des données.

Que signifient les lignes continues et en pointillés ?

  • Ligne continue bleu foncé : valeur de la métrique au fil du temps

  • Ligne en pointillés bleu clair : valeur de la métrique à un moment spécifique dans le passé
    Par exemple, si vous sélectionnez un graphique sur les sept derniers jours et que vous pointez sur le 30 août, la ligne en pointillés bleu clair indique la valeur de la métrique le 23 août.



Afficher les traces et leurs données

Vous pouvez afficher toutes les traces de votre application dans le tableau des traces, situé en bas du tableau de bord Performances. La table regroupe chaque type de trace dans un sous-onglet approprié. Par exemple, toutes les traces de requêtes réseau sont listées sous le sous-onglet Requêtes réseau.

Le tableau des traces affiche les valeurs de certaines métriques principales pour chaque trace, ainsi que la variation en pourcentage de la valeur de chaque métrique. Ces valeurs sont calculées en fonction des sélections de percentile et de la période définies en haut de l'onglet Tableau de bord. Voici quelques exemples :

  • Si vous sélectionnez un percentile de 75% et une période de 7 derniers jours, la valeur de la métrique correspondra au 75e percentile des données collectées pour le jour le plus récent, et la variation en pourcentage correspondra à la variation depuis sept jours.
  • Si vous définissez ensuite la période sur Dernières 24 heures, la valeur de la métrique correspondra à la moyenne des données collectées au cours de l'heure la plus récente, et la variation en pourcentage correspondra à la variation depuis 24 heures.

Vous pouvez trier la liste des traces de chaque sous-onglet en fonction de la valeur de la métrique ou du pourcentage de variation d'une métrique spécifique. Cela peut vous aider à identifier rapidement les problèmes potentiels de votre application.

Pour afficher toutes les métriques et données d'une trace spécifique, cliquez sur son nom dans le tableau des traces. Vous trouverez des informations supplémentaires dans les sections suivantes.

Afficher plus de données pour une trace spécifique

Performance Monitoring fournit une page de dépannage dans la console Firebase qui met en évidence les modifications des métriques. Vous pouvez ainsi résoudre rapidement et facilement les problèmes de performances et en limiter l'impact sur vos applications et vos utilisateurs. Vous pouvez utiliser la page de dépannage lorsque vous découvrez des problèmes de performances potentiels, par exemple dans les scénarios suivants:

  • Vous sélectionnez les métriques pertinentes dans le tableau de bord et vous remarquez un écart important.
  • Dans le tableau des traces, vous triez les données pour afficher les deltas les plus importants en haut. Vous constatez alors une variation importante en pourcentage.
  • Vous recevez une alerte par e-mail vous informant d'un problème de performances.

Vous pouvez accéder à la page de dépannage de différentes manières:

  • Dans le tableau de bord des métriques, cliquez sur le bouton Afficher les détails de la métrique.
  • Sur une fiche de métrique, sélectionnez > Afficher les détails. La page de dépannage affiche des informations sur la métrique sélectionnée.
  • Dans le tableau des traces, cliquez sur un nom de trace ou sur une valeur de métrique dans la ligne associée à cette trace.
  • Dans une alerte par e-mail, cliquez sur Examiner.

Lorsque vous cliquez sur un nom de trace dans le tableau des traces, vous pouvez ensuite examiner les métriques qui vous intéressent. Cliquez sur le bouton Filtrer pour filtrer les données par attribut, par exemple:

une image de <span class=Données Firebase Performance Monitoring filtrées par attribut" />
  • Filtrez les données par URL de la page pour afficher les données d'une page spécifique de votre site.
  • Filtrez par Type de connexion compatible pour découvrir l'impact d'une connexion 3G sur votre application.
  • Filtrez par Pays pour vous assurer que l'emplacement de votre base de données n'affecte pas une région spécifique.

Afficher toutes les métriques collectées pour une trace

Une fois que vous avez cliqué sur une trace, vous pouvez examiner les métriques qui vous intéressent:

  • Traces de requêtes réseau : les onglets de métriques disponibles sont Temps de réponse et Taille de la charge utile de la réponse.
  • Traces de code personnalisées : l'onglet de la métrique Durée est toujours disponible (métrique par défaut pour ce type de trace). Si vous avez ajouté des métriques personnalisées à une trace de code personnalisée, l'onglet de ces métriques s'affiche également.
  • Traces de chargement de la page : les onglets de métriques disponibles incluent First Paint, First Contentful Paint, First Input Delay et les événements liés au DOM.
une image de <span class="Graphique de distribution de Firebase Performance Monitoring" />

Vous trouverez un résumé des performances de la métrique sélectionnée juste en dessous des onglets de métrique. Elle comprend une présentation en une phrase de la tendance de la métrique au fil du temps et un graphique permettant de visualiser la distribution des données sur l'ensemble de la période sélectionnée.

Afficher des informations détaillées sur les données

Vous pouvez filtrer et segmenter les données par attribut, ou cliquer pour afficher les données dans le contexte d'une session d'utilisation de l'application.

Par exemple, pour comprendre pourquoi votre temps de réponse réseau récent est lent et si un pays affecte les performances, procédez comme suit:

  1. Sélectionnez Pays dans le menu déroulant des attributs.
  2. Dans le tableau, triez par dernière valeur pour voir les pays qui ont le plus d'impact sur vos temps de réponse réseau.
  3. Sélectionnez les pays dont les valeurs les plus récentes sont les plus élevées pour les représenter sur le graphique. Pointez ensuite sur la chronologie du graphique pour savoir quand les temps de réponse du réseau ont ralenti dans ces pays.
  4. Pour identifier plus précisément les causes des problèmes de temps de réponse du réseau dans des pays spécifiques, ajoutez des filtres pour ces pays et poursuivez votre analyse sur d'autres attributs (comme les types de radio et les appareils).