Check out what’s new from Firebase at Google I/O 2022. Learn more

En savoir plus sur les données de performances de chargement des pages (applications Web)

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 .

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.

une image du tableau des métriques dans le tableau de bord Firebase Performance Monitoring

Pour ajouter une métrique à votre tableau de métriques, accédez au tableau de bord des performances dans la console Firebase, puis cliquez sur l'onglet Tableau de bord . 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, comme 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.

Si vous cliquez sur un nom de trace dans le tableau des traces, vous pouvez ensuite cliquer sur différents écrans pour explorer la trace et explorer les métriques qui vous intéressent. Sur la plupart des pages, vous pouvez utiliser le bouton Filtrer l' (en haut à gauche de l'écran) pour filtrer les données par attribut, par exemple :

une image des données Firebase Performance Monitoring filtrées par attribut
  • 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.