Performance Monitoring 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 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:
First paint (Première peinture) : métrique qui mesure le temps écoulé entre le moment où l'utilisateur accède à une page et le moment où tout changement visuel se produit.
First Contentful Paint (première peinture avec contenu) : métrique qui mesure le temps écoulé entre le moment où un utilisateur accède à une page et celui où un contenu significatif s'affiche, comme une image ou du texte.
domInteractive : métrique qui mesure le temps écoulé 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.
domContentLoadedEventEnd : métrique qui mesure le temps écoulé entre le moment où l'utilisateur accède à une page et celui où le document HTML d'origine est complètement chargé et analysé.
loadEventEnd : métrique qui mesure le temps écoulé entre le moment où l'utilisateur accède à la page et celui où l'événement de chargement du document en cours est terminé.
First Input Delay : métrique qui mesure le temps écoulé 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 consulter les données de ces traces dans le sous-onglet Chargement de la page du tableau des traces, situé en bas du tableau de bord Performances (pour en savoir plus sur l'utilisation de la console, consultez la suite de 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 des points de chargement courants, comme une application responsive.
Les traces de chargement de page vous aident à suivre les métriques Web Vitals principales de votre application, comme la première peinture avec du contenu.
Métriques collectées pour les traces de chargement de page
Ces traces sont prêtes à l'emploi. Vous ne pouvez donc pas y ajouter de métriques ni d'attributs personnalisés.
First paint
Cette métrique mesure le temps écoulé entre le moment où l'utilisateur accède à une page et le moment où tout changement visuel se produit.
Cette métrique est utile, car la première peinture indique aux utilisateurs que la page commence à se charger.
Démarre lorsque l'utilisateur accède à une page.
S'arrête en cas de modification visuelle, y compris un changement de couleur d'arrière-plan ou un chargement d'en-tête.
First contentful paint
Cette métrique mesure le temps écoulé entre le moment où un utilisateur accède à une page et celui où un contenu pertinent s'affiche, comme une image ou du texte.
Cette métrique vous permet d'obtenir des insights sur la rapidité avec laquelle 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.
Démarre lorsque l'utilisateur accède à une page.
S'arrête immédiatement après que le navigateur a affiché le premier contenu du DOM, y compris le texte, les images (y compris les images de fond), les canevas non blancs ou les SVG.
domInteractive
Cette métrique mesure le temps écoulé 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 obtenir des insights sur la rapidité avec laquelle vos utilisateurs peuvent réellement interagir avec les éléments de votre application, comme les boutons et les liens hypertextes, plutôt que de les voir simplement à l'écran. Notez que cela ne signifie pas que le navigateur répondra à l'interaction (pour cette métrique, reportez-vous à la trace first input delay).
Démarre lorsque l'utilisateur accède à une page.
S'arrête immédiatement avant que le user-agent ne définisse le degré de préparation du document HTML actuel sur "Interactif".
domContentLoadedEventEnd
Cette métrique mesure le temps écoulé entre le moment où l'utilisateur accède à une page et celui où le document HTML initial est entièrement chargé et analysé.
Démarre lorsque l'utilisateur accède à une page.
S'arrête immédiatement après le chargement et l'analyse complets du document HTML initial (
DOMContentLoaded), mais cela ne signifie pas que les feuilles de style, les images et les sous-cadres sont entièrement chargés.
loadEventEnd
Cette métrique mesure le temps écoulé entre le moment où l'utilisateur accède à la page et celui où l'événement de chargement du document en cours est terminé.
Cette métrique vous permet d'obtenir des insights sur le temps de chargement de l'ensemble de 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.
First input delay
Cette métrique mesure le temps écoulé 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, car le navigateur qui répond à une interaction utilisateur donne aux 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 a pu répondre à la saisie, ce qui signifie qu'il n'est pas occupé à charger ou à analyser votre contenu.
Notez que pour mesurer la métrique de délai de première entrée, vous devez ajouter la bibliothèque de polyfill pour cette métrique. Pour obtenir des instructions d'installation, consultez 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 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.
"Panneau de contrôle Firebase Performance Monitoring" />
Pour ajouter une métrique à votre tableau de métriques, procédez comme suit:
- Accédez au tableau de bord des 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 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.
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 la page jusqu'au tableau des traces, puis cliquez sur le sous-onglet approprié. Le tableau affiche certaines métriques principales pour chaque trace. Vous pouvez même trier la liste en fonction du pourcentage de variation d'une métrique 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
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.
Découvrez comment afficher les données de vos traces.
Étapes suivantes
Découvrez comment utiliser des attributs pour examiner les données sur les 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 délai de première saisie pour une page spécifique dépasse un seuil que vous définissez.