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 contenant des données capturées entre deux moments 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 :
first paint — Une métrique qui mesure le temps entre le moment où l'utilisateur navigue vers 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 vers une page et le moment où un contenu significatif s'affiche, comme une image ou un texte
domInteractive — Une métrique qui mesure le temps entre le moment où l'utilisateur navigue vers 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
délai de première saisie — Une métrique qui mesure le temps entre le moment où l'utilisateur interagit avec une page et le moment où le navigateur est en mesure de répondre à cette entrée
Vous pouvez afficher les données de ces traces dans le sous-onglet Chargement de page du tableau des traces, qui se trouve au bas du tableau de bord 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 mesures sur la façon dont les pages de votre application se chargent, en particulier le temps qu'il faut pour atteindre les points de chargement courants, comme une application réactive.
Les traces de chargement de page vous aident à suivre les éléments essentiels du Web 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 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 puisque le premier paint signale à vos utilisateurs que la page commence à se charger.
Démarre 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 de contenu
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 un texte.
Cette métrique est utile pour savoir à quelle vitesse vos utilisateurs voient le contenu réel de votre application plutôt qu'une simple nouvelle couleur d'arrière-plan ou un nouvel en-tête.
Démarre lorsque l'utilisateur accède à une page.
S'arrête immédiatement après que le navigateur restitue le premier contenu du DOM, y compris tout texte, image (y compris les images d'arrière-plan), canevas non blanc 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 à quelle vitesse 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 du délai d'entrée ).
Démarre lorsque l'utilisateur accède à une page.
S'arrête immédiatement avant que l'agent utilisateur ne définisse l'état de préparation 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é.
Démarre lorsque l'utilisateur accède à une page.
S'arrête immédiatement après le chargement et l'analyse complet du document HTML initial (
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.
Démarre 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 actuel.
Retard de première 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 en mesure de répondre à cette entrée.
Cette métrique est utile puisque 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, comme cliquer sur un bouton ou un lien hypertexte.
S'arrête immédiatement une fois que le navigateur est capable 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 Performance Monitoring 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 indicateurs clés, ajoutez-les à votre tableau de indicateurs en haut du tableau de bord Performance . Vous pouvez identifier rapidement les régressions en observant les changements d'une semaine à l'autre ou vérifier que les modifications récentes apportées à votre code améliorent les performances.
Pour ajouter une métrique à votre tableau de métriques, procédez comme suit :
- Accédez au tableau de bord Performances dans la console Firebase.
- Cliquez sur une fiche de métrique vide, puis sélectionnez une métrique existante à ajouter à votre tableau.
- Cliquez sur sur une fiche 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 variation numérique en pourcentage.
En savoir plus sur l'utilisation du tableau de bord .
Afficher les traces et leurs données
Pour afficher vos traces, accédez au tableau de bord 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 mesures pour chaque trace, et vous pouvez même trier la liste en fonction du pourcentage de variation pour une mesure 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 facilite la résolution rapide et la minimisation de 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 gros delta.
- Dans le tableau des traces, vous effectuez un tri pour afficher les deltas les plus importants 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 :
- Sur le tableau de bord des métriques, cliquez sur le bouton Afficher les détails de la métrique .
- Sur n'importe quelle carte 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 accéder aux métriques qui vous intéressent. Clique le
- Filtrer par URL de page pour afficher les données d'une page spécifique de votre site
- Filtrez par type de connexion efficace 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
En savoir plus sur l'affichage des données de vos traces .
Prochaines étapes
Apprenez-en davantage sur l’utilisation des attributs pour examiner les données de performances.
Découvrez comment suivre les problèmes de performances dans la console Firebase.
Configurez des alertes pour les chargements de pages 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.