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:
Largest Contentful Paint (LCP) : métrique qui mesure le temps écoulé entre le moment où l'utilisateur accède à une page et le moment où le plus grand changement visuel se produit.
Interaction to Next Paint : métrique qui mesure le délai le plus long entre le moment où l'utilisateur interagit avec la page et le moment où la peinture suivante se produit.
cumulative layout shift (décalage de mise en page cumulatif) : métrique qui mesure et évalue les décalages de mise en page inattendus sur une page
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.
Largest Contentful Paint
Cette métrique mesure le temps écoulé entre le moment où l'utilisateur accède à une page et celui où l'image, le texte ou le contenu vidéo le plus grand s'affiche.
Cette métrique est utile pour comprendre la rapidité avec laquelle le contenu principal de la page Web devient visible pour l'utilisateur.
Démarre lorsque l'utilisateur accède à une page.
S'arrête lorsque le changement visuel le plus important se produit, y compris les éléments d'image, de texte ou de vidéo. Pour en savoir plus, consultez les métriques Web essentielles.
Élément "Largest contentful paint" : attribut personnalisé qui identifie l'élément correspondant au plus grand élément de contenu. Cette valeur est capturée en plus du délai de la plus grande peinture de contenu.
Interaction to Next Paint
Cette métrique mesure le temps écoulé entre le moment où un utilisateur interagit avec une page et le moment où la prochaine peinture se produit.
Cette métrique est utile, car elle mesure la réactivité d'une page aux entrées utilisateur.
Démarre lorsque l'utilisateur interagit avec la page (clic de souris, appui sur un appareil ou saisie au clavier).
S'arrête à la prochaine peinture. Pour en savoir plus, consultez les métriques Web essentielles.
Interaction to Next Paint la plus longue est un attribut personnalisé qui identifie l'élément avec lequel l'utilisateur a interagi lorsque l'événement "Interaction to Next Paint" s'est produit. Cela est capturé en plus du délai d'interaction avec la prochaine peinture.
Cumulative layout shift
Cette métrique mesure les scores de décalage de mise en page les plus importants pour chaque décalage de mise en page inattendu sur toute la durée de vie de la page.
Cette métrique est utile, car les changements de mise en page inattendus peuvent perturber l'expérience utilisateur. La métrique indique un score basé sur l'API Layout Instability. Pour en savoir plus sur le calcul du score, consultez les Core Web Vitals.
Largest layout shift target (Cible de décalage de mise en page la plus importante) est un attribut personnalisé qui identifie l'élément qui a été décalé lors du plus grand décalage de contenu. Cette mesure s'ajoute au score de décalage de mise en page cumulé.
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 vierges 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, au lieu 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 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 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 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 que vous avez 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.