Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. 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 accède à une page et le moment où un changement visuel se produit

  • première peinture de contenu — Une métrique qui mesure le temps entre le moment où un utilisateur accède à une page et l'affichage d'un contenu significatif, comme une image ou du texte

  • domInteractive — Une métrique qui 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

  • domContentLoadedEventEnd — Une métrique qui 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é

  • loadEventEnd — Une métrique qui mesure le temps entre le moment où l'utilisateur accède à la page et la fin de l' événement de chargement du document actuel

  • 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 visualiser les données de ces traces dans le sous - onglet de charge page du tableau des traces, qui se trouve au bas du tableau de bord de performance ( en savoir plus sur l' utilisation de la console à la page suivante ).

Définition d'une trace de chargement de page

Cette trace mesure plusieurs métriques 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 car le premier dessin signale à vos utilisateurs que la page commence à se charger.

  • Démarre lorsque l'utilisateur accède à une page.

  • Arrête lors de tout changement visuel se produit, y compris un changement de couleur de fond ou une charge 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 l'affichage d'un contenu significatif, comme une image ou du texte.

Cette métrique est utile pour savoir combien de temps 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 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 combien de temps 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 ).

  • Démarre lorsque l'utilisateur accède à une page.

  • S'arrête juste avant que l'agent utilisateur ne définisse la préparation du document HTML actuel sur « interactif ».

domContenuChargéÉvénementFin

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' DOMContentLoaded complet du document HTML initial ( DOMContentLoaded ), mais cela ne signifie pas que le chargement des feuilles de style, des images et des sous-cadres est terminé.

loadEventEnd

Cette métrique mesure le temps entre le moment où l'utilisateur accède à la page et la fin de l' événement de chargement du document actuel.

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 la 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 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.

  • Démarre 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 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 retard 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 les tendances de vos métriques clés, ajoutez-les à votre tableau de métriques en haut du tableau de bord des performances . Vous pouvez identifier rapidement les régressions en observant les modifications d'une semaine à l'autre ou vérifier que les modifications récentes apportées à 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 .

Afficher 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 filtre (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 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