Application Real-Time Monitoring Service:Diagnostiquer les temps de chargement lents des pages

Prérequis

Connectez votre application frontend à ARMS. Pour plus d'informations, consultez

Présentation de l'intégration de la surveillance du navigateur

.

Diagnostiquer les temps de chargement lents des pages

L'exemple suivant montre comment résoudre un problème de chargement de page lent :

1. Connectez-vous à la console ARMS. Dans le volet de navigation de gauche, choisissez Browser Monitoring > Browser Monitoring.

2. Sur la page Browser Monitoring, sélectionnez une région dans la barre de navigation supérieure et cliquez sur le nom de l'application à gérer.

3. Dans le volet de navigation de gauche, choisissez Application > Access speed.

4. Analysez les métriques de performance clés dans les sections Page Load Time Details et Waterfall Chart of Page Loading pour identifier toute anomalie.

   Figure 1.

   Détails du temps de chargement de la page

   

   Figure 2.

   Graphique en cascade du chargement de la page

   

   • Page load detailsWaterfall Chart of Page Loading Si le temps dans la section est élevé, ou si les temps de résolution DNS, de connexion TCP ou de connexion SSL dans la section sont élevés, le chargement lent de la page est probablement dû à un problème réseau. Vérifiez votre réseau.

   • Page load detailsWaterfall Chart of Page Loading Si le temps dans la section est élevé, ou si les temps de réponse de la requête et de transfert du contenu dans la section sont élevés, le chargement lent de la page est probablement dû à une requête API lente. Pour approfondir l'investigation, passez à l'étape Étape 5.

   • Page load detailsWaterfall Chart of Page Loading Si le temps dans la section est élevé, ou si les temps d'analyse du DOM et de chargement des ressources dans la section sont élevés, le chargement lent de la page est probablement dû à un chargement lent des ressources frontend. Pour approfondir l'investigation, passez à l'étape Étape 6.

5. Diagnostiquez les requêtes API lentes. Dans le volet de navigation de gauche, choisissez Application > API details.

   1. Sous l'onglet API Requests, localisez l'API cible et cliquez sur Analyze dans la colonne Actions.

   2. Sous l'onglet API details, cliquez sur View Trace dans le coin supérieur droit de la section Request Details pour afficher le temps total passé dans le frontend et la trace de l'application backend.

      Dans le tableau de l'onglet

      Trace

      , un

      span

      dont le

      Call Type

      est

      Frontend

      représente le temps total, et un

      span

      dont le

      Call Type

      est

      HTTP Entry

      représente le temps de traitement par l'application backend. La colonne

      Timeline

      affiche un graphique à barres qui visualise la durée de chaque

      span

      .

      • Si le temps de traitement par l'application backend est court mais que le temps total est long, cela indique un temps de transfert réseau long pour la requête API. Dans ce cas, sur la page API details, cliquez sur View Session dans le coin supérieur droit de la section Request Details pour afficher les informations de session, telles que le type de réseau, la région, le navigateur, l'appareil et le système d'exploitation.

      • Si le temps de traitement par l'application backend est long, cela indique un problème de performance dans le service backend. Dans ce cas, cliquez sur l'icône de loupe dans la colonne Method Stack. Ensuite, dans la boîte de dialogue Method Stack, affichez la pile d'appels pour identifier le goulot d'étranglement dans la trace backend.

6. Diagnostiquez les ressources frontend lentes. Dans le volet de navigation de gauche, choisissez Application > Access speed.

7. Sur la page Access speed, dans la section Slow Page Session Traces (Top 20), cliquez sur le nom de la page pour une session lente.

   Cette section répertorie les sessions lentes dans un tableau. Le tableau inclut les colonnes

   Page

   ,

   Session ID

   ,

   Browser

   ,

   Fully loaded time

   (en ms) et

   Start time

   . Utilisez le temps de chargement pour identifier la session lente cible.

   Sur la page

   Session Tracing

   , dans la section

   Page Resource Loading Waterfall

   , affichez les détails des ressources qui ont provoqué le chargement lent de la page.

Informations complémentaires

• Vitesse de la page : découvrez les métriques de chargement des pages et comment ARMS les mesure.

• Diagnostiquer les erreurs JS avec ARMS Browser Monitoring : découvrez comment résoudre les erreurs JavaScript en utilisant Browser Monitoring.