La surveillance des performances utilise des traces pour collecter des données sur les processus surveillés dans votre application. Une trace est un rapport qui contient des données capturées entre deux points dans le temps dans votre application.
Pour les applications Web, Performance Monitoring collecte automatiquement une trace pour chaque page de votre application appelée trace de chargement de page . Chaque trace de chargement de page collecte les métriques par défaut suivantes :
première peinture — Une métrique qui mesure le temps entre le moment où l'utilisateur navigue sur une page et le moment où un changement visuel se produit
first contentful paint — Une métrique qui mesure le temps entre le moment où un utilisateur navigue sur une page et le moment où un contenu significatif s'affiche, comme une image ou du texte
domInteractive - Une métrique qui mesure le temps entre le moment où l'utilisateur navigue sur une page et le moment où la page est considérée comme interactive pour l'utilisateur
domContentLoadedEventEnd — Une métrique qui mesure le temps entre le moment où l'utilisateur navigue vers une page et le moment où le document HTML initial est complètement chargé et analysé
loadEventEnd — Une métrique qui mesure le temps entre le moment où l'utilisateur accède à la page et le moment où l' événement de chargement du document actuel se termine
premier délai d'entrée - Une métrique qui mesure le temps entre le moment où l'utilisateur interagit avec une page et le moment où le navigateur est capable de répondre à cette entrée
Vous pouvez afficher les données de ces traces dans le sous-onglet Chargement de la page du tableau des traces, qui se trouve en bas du tableau de bord des performances (en savoir plus sur l'utilisation de la console plus loin sur cette page).
Définition d'une trace de chargement de page
Cette trace mesure plusieurs métriques sur le chargement des pages de votre application, en particulier le temps nécessaire pour atteindre les points de chargement courants, comme une application réactive.
Les traces de chargement de page vous aident à suivre les éléments vitaux Web de base de votre application, comme la première peinture de contenu.
Métriques collectées pour les traces de chargement de page
Ces traces sont des traces prêtes à l'emploi, vous ne pouvez donc pas leur ajouter de métriques personnalisées ou d'attributs personnalisés.
Première peinture
Cette métrique mesure le temps entre le moment où l'utilisateur accède à une page et le moment où un changement visuel se produit.
Cette métrique est utile car le premier dessin signale à vos utilisateurs que la page commence à se charger.
Commence lorsque l'utilisateur accède à une page.
S'arrête lorsqu'un changement visuel se produit, y compris un changement de couleur d'arrière-plan ou un chargement d'en-tête.
Première peinture contente
Cette métrique mesure le temps entre le moment où un utilisateur accède à une page et le moment où un contenu significatif s'affiche, comme une image ou du texte.
Cette métrique est utile pour savoir à quel moment vos utilisateurs voient le contenu réel de votre application plutôt qu'une nouvelle couleur d'arrière-plan ou un nouvel en-tête.
Commence lorsque l'utilisateur accède à une page.
S'arrête immédiatement après que le navigateur a rendu le premier contenu du DOM, y compris tout texte, image (y compris les images d'arrière-plan), toile non blanche ou SVG.
domInteractif
Cette métrique mesure le temps entre le moment où l'utilisateur accède à une page et le moment où la page est considérée comme interactive pour l'utilisateur.
Cette métrique est utile pour savoir à quel moment vos utilisateurs peuvent réellement interagir avec les éléments de votre application, comme les boutons et les hyperliens, plutôt que de simplement les voir à l'écran. Notez que cela ne signifie pas que le navigateur répondra à l'interaction (pour cette métrique, reportez-vous à la première trace de délai d'entrée ).
Commence lorsque l'utilisateur accède à une page.
S'arrête immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document HTML actuel sur "interactif".
domContentLoadedEventEnd
Cette métrique mesure le temps entre le moment où l'utilisateur accède à une page et le moment où le document HTML initial est complètement chargé et analysé.
Commence lorsque l'utilisateur accède à une page.
S'arrête immédiatement après que le document HTML initial est complètement chargé et analysé (
DOMContentLoaded), mais cela ne signifie pas que les feuilles de style, les images et les sous-cadres ont fini de se charger.
loadEventEnd
Cette métrique mesure le temps entre le moment où l'utilisateur accède à la page et le moment où l' événement de chargement du document actuel se termine.
Cette métrique est utile pour savoir combien de temps il faut pour charger tout votre contenu, y compris les feuilles de style et les images.
Commence lorsque l'utilisateur accède à une page.
S'arrête immédiatement après la fin de l'événement de chargement du document HTML en cours.
Premier délai d'entrée
Cette métrique mesure le temps entre le moment où l'utilisateur interagit avec une page et le moment où le navigateur est capable de répondre à cette entrée.
Cette métrique est utile car le navigateur répondant à une interaction utilisateur donne à vos utilisateurs leurs premières impressions sur la réactivité de votre application.
Commence lorsque l'utilisateur interagit pour la première fois avec un élément de la page, par exemple en cliquant sur un bouton ou un lien hypertexte.
S'arrête immédiatement après que le navigateur est en mesure de répondre à l'entrée, ce qui signifie que le navigateur n'est pas occupé à charger ou à analyser votre contenu.
Notez que pour mesurer la première métrique de délai d'entrée, vous devez ajouter la bibliothèque polyfill pour cette métrique. Pour les instructions d'installation, reportez-vous à la documentation de la bibliothèque .
Suivre, afficher et filtrer les données de performances
Pour afficher les données de performances en temps réel, assurez-vous que votre application utilise une version du SDK de surveillance des performances compatible avec le traitement des données en temps réel. En savoir plus sur les données de performances en temps réel .
Suivez les indicateurs 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 des performances . Vous pouvez rapidement identifier les régressions en voyant les changements d'une semaine sur l'autre ou vérifier que les modifications récentes de votre code améliorent les performances.
Pour ajouter une statistique à votre tableau de statistiques, procédez comme suit :
- Accédez au tableau de bord des performances dans la console Firebase.
- Cliquez sur une carte de métrique vide, puis sélectionnez une métrique existante à ajouter à votre tableau.
- Cliquez sur sur une carte de métrique remplie pour plus d'options, par exemple pour remplacer ou supprimer une métrique.
Le tableau des métriques affiche les données métriques collectées au fil du temps, à la fois sous forme graphique et sous forme de pourcentage de variation numérique.
En savoir plus sur l'utilisation du tableau de bord .
Visualiser les traces et leurs données
Pour afficher vos traces, accédez au tableau de bord des performances dans la console Firebase, faites défiler jusqu'au tableau des traces, puis cliquez sur le sous-onglet approprié. Le tableau affiche certaines des principales métriques pour chaque trace, et vous pouvez même trier la liste en fonction du pourcentage de changement pour une métrique spécifique.
La surveillance des performances fournit une page de dépannage dans la console Firebase qui met en évidence les changements de métriques, ce qui permet de résoudre rapidement et de minimiser l'impact des problèmes de performances 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 des métriques pertinentes sur le tableau de bord et vous remarquez un grand delta.
- Dans le tableau des traces, vous triez pour afficher les plus grands deltas en haut, et vous constatez une variation significative 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 des manières suivantes :
- Dans le tableau de bord des métriques, cliquez sur le bouton Afficher les détails des métriques .
- Sur n'importe quelle carte de métrique, sélectionnez => Afficher les détails . La page de dépannage affiche des informations sur la métrique que vous avez sélectionnée.
- Dans le tableau des traces, cliquez sur un nom de trace ou sur n'importe quelle valeur de mesure dans la ligne associée à cette trace.
- Dans une alerte par e-mail, cliquez sur Enquêter maintenant .
Lorsque vous cliquez sur un nom de trace dans le tableau des traces, vous pouvez ensuite explorer les métriques qui vous intéressent. Cliquez sur le bouton Filter pour filtrer les données par attribut, par exemple :
- Filtrer par URL de page pour afficher les données d'une page spécifique de votre site
- Filtrez par Type de connexion effective pour savoir comment une connexion 3G impacte 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
En savoir plus sur l'affichage des données pour vos traces .
Prochaines étapes
En savoir plus sur l'utilisation des attributs pour examiner les données de performances.
En savoir plus sur le suivi des problèmes de performances dans la console Firebase.
Configurez des alertes pour les chargements de page qui dégradent les performances de votre application. Par exemple, vous pouvez configurer une alerte par e-mail pour votre équipe si le premier délai de saisie pour une page spécifique dépasse un seuil que vous avez défini.