Google 致力于为黑人社区推动种族平等。查看具体举措

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

Contrôle des performances utilisations des traces de données sur les processus Collect 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, Contrôle des performances recueille automatiquement une trace pour chaque page de votre application appelée une trace de chargement de la page. Chaque trace de chargement de page collecte les métriques par défaut suivantes :

  • première peinture - Une mesure qui mesure le temps entre le moment où les Navigue utilisateur à une page et lors de tout changement visuel se produit

  • première peinture pourvues d'un contenu - Une mesure qui mesure le temps entre le moment où un utilisateur navigue vers une page et quand affiche le contenu significatif, comme une image ou d'un texte

  • DOMInteractive - Une mesure qui mesure le temps entre le moment où les Navigue utilisateur à une page et lorsque la page est considérée interactive pour l'utilisateur

  • domContentLoadedEventEnd - Une mesure qui mesure le temps entre le moment où l'utilisateur navigue vers une page et lorsque le document HTML initial est complètement chargé et analysé

  • loadEventEnd - Une mesure qui mesure le temps entre le moment où l'utilisateur navigue à la page et lorsque l'événement de chargement de documents en cours se termine

  • premier retard d'entrée - Une mesure qui mesure le temps entre le moment où l' utilisateur interagit avec une page et lorsque le navigateur est en mesure 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.

Page traces de charge vous aider à suivre de votre application vitals Web de base , comme première peinture pourvues d'un 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 la temps entre le moment où l'utilisateur accède à une page et lors de tout changement visuel se produit.

Cette mesure est utile , car les premiers signaux de peinture à vos utilisateurs que la page commence à 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 mesure, reportez - vous à la première trace de retard 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.

  • Arrête immédiatement après le document HTML initial est complètement chargé et analysé ( DOMContentLoaded ), mais cela ne veut pas dire que les images, feuilles de style, et sont sous - trames terminé le chargement.

loadEventEnd

Cette métrique mesure la temps entre le moment où l'utilisateur accède à la page et lorsque les finalise l' événement de charge du document en cours.

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.

  • Commence lorsque l'utilisateur premier interagit avec un élément sur la page, comme en cliquant sur un bouton ou 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 obtenir des instructions d'installation, reportez - vous à la bibliothèque de documentation .

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 savoir comment affichent une tendance, ajoutez vos paramètres clés à votre carte des paramètres en haut du tableau de bord de performance. 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 mesure à votre carte de métriques, allez sur le tableau de bord de performance 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 une carte métrique peuplée pour plus d' options, comme 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 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, allez sur le tableau de bord de performance dans la console Firebase, faites défiler vers le bas à la table 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 filtre le bouton ( 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 la page pour visualiser les données d'une page spécifique de votre site
  • Filtrer par type de connexion efficace pour apprendre comment un impact de connexion 3g votre app
  • Filtrer par pays pour vous assurer que l' emplacement de votre base de données ne touche pas une région spécifique

En savoir plus sur l' affichage des données pour vos traces .

Prochaines étapes