Google is committed to advancing racial equity for Black communities. See how.
Cette page a été traduite par l'API Cloud Translation.
Switch to English

Traces de durée automatiques pour les applications Web

Une trace est un rapport des données de performances capturées entre deux moments dans votre application. Pour les applications Web, la surveillance des performances fournit automatiquement une trace de durée pour le chargement de la page .

La trace de chargement de page se décompose en les métriques par défaut suivantes:

  • métrique de la première peinture - Mesure le temps entre le moment où l'utilisateur accède à une page et le moment où un changement visuel se produit

  • Première métrique de peinture pleine de contenu - 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

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

  • métrique domContentLoadedEventEnd - 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 metric - 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

  • métrique du premier délai d'entrée - 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

Définitions des statistiques de chargement de page

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 la première peinture 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 contentieuse

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 obtenir des informations 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 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), canevas non blanc 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 obtenir des informations sur la rapidité avec laquelle vos utilisateurs peuvent réellement interagir avec les éléments de votre application, tels que 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 immédiatement avant que l'agent utilisateur ne définisse l'état de préparation 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é.

  • Démarre 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 sont complètement chargés.

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 obtenir des informations sur le temps nécessaire 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.

Premier retard 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.

  • Démarre lorsque l'utilisateur interagit pour la première fois avec un élément de la page, comme 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 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.

Surveiller les traces de durée de chargement automatique des pages dans la console

  1. Dans la console Firebase, accédez au tableau de bord Performance .

  2. Cliquez sur l'onglet Sur l'appareil , puis vous pouvez:

    • Affichez un rapport rapide des données collectées pour toutes les traces de chargement de votre page (et toutes les traces personnalisées que vous avez ajoutées).

    • Cliquez sur une trace spécifique pour examiner les données de la trace plus en détail.

    • Utilisez le bouton filtre en haut à gauche du tableau de bord pour effectuer un filtrage de base des données par attribut.

  3. Si vous cliquez sur une trace spécifique, la console affiche une vue d'ensemble des données collectées sur les cartes métriques.

    • Utilisez les options en haut à droite du tableau de bord pour afficher les données sous forme agrégée ou dans le temps .

    • Utilisez le bouton filtre en haut à gauche du tableau de bord pour effectuer un filtrage de base des données par attribut.

  4. Pour toute métrique, cliquez sur Afficher plus pour consulter des informations plus détaillées sur les données collectées et utiliser des fonctionnalités d'analyse plus riches. Par exemple, vous pouvez filtrer et segmenter les données par attribut.