laboratoire
Cette procédure fait partie d'un laboratoire qui vous apprend à dépanner votre application Web avec New Relic .
Chaque procédure du laboratoire s'appuie sur la précédente, alors assurez-vous d'avoir terminé la dernière procédure, Déboguer les erreurs dans votre application, avant de commencer celle-ci.
Après avoir corrigé les erreurs JavaScript dans votre application, vous et votre équipe vous sentez en confiance. Prêt pour votre temps libre, vous vous rendez sur les réseaux sociaux, mais vous consultez Twitter et voyez des clients confus :
Oh oh! Vos clients n'ont pas l'air contents. Il est temps d'utiliser monitoring des navigateurs New Relic pour découvrir la source du retard.
Important
Afin de voir vos données dans New Relic, vous devez activer monitoring des navigateurs pour cette procédure.
Si vous ne l’avez pas déjà fait, instrumentez votre application avec notre agent de navigateur.
Déboguer la lenteur de votre application
Depuis la page d’accueil de New Relic, accédez à Browser et choisissez votre application Relicstaurants .
Ici, vous voyez toutes les données relatives à votre application de navigateur, y compris Page views with JavaScript errors, Core web vitals, User time on the site, Initial page load and route changes et autres.
Notez le largest contentful paint (LCP).
Le Largest Contentful Paint (LCP) représente la vitesse à laquelle le contenu principal d'une page Web est chargé. Idéalement, le contenu ne devrait pas prendre plus d’une ou deux secondes à charger. Ici, vous voyez que votre site se charge en plus de 5 secondes. Pas étonnant que vos techniciens se plaignent !
Mais qu'est-ce qui cause ce retard ? arrière-plan?
Faites défiler vers le bas et remarquez le graphique Front end vs. back end .
Cliquez sur Back end (time to first byte) (50%) pour filtrer le graphique et voir combien de temps le backend prend pour se charger.
Le graphique indique que le back-end a pris au maximum 140 millisecondes pour traiter la demande dans le pire des cas. Cela signifie-t-il que votre frontend provoque des retards ?
Cliquez sur Front end (Window load + AJAX) (50%).
Voilà le problème ! Le graphique indique que le retard se produit sur le frontend.
Pour déterminer ce qui pourrait être à l'origine du retard sur le frontend, examinez de plus près le graphique Initial page load and route change .
Cliquez sur Initial page load (Window load + AJAX).
Le graphique indique que Initial page load (Window load + AJAX) prend 5 à 6 secondes, ce qui est alarmant.
Cliquez sur Initial page load and route change pour voir plus de détails.
Cela vous amène à Page views.
Trier les pages par Most time-consuming.
Notez que la page initiale prend près de 90 % du temps à charger.
Cliquez dessus pour voir ses détails.
Cette page vous montre Page view breakdown, Median initial page load time et d'autres détails importants. Le graphique Page view breakdown est particulièrement important ici car il vous aide à déterminer pourquoi et où votre page prend plus de temps. En examinant de plus près ce graphique, vous voyez que Page rendering prend jusqu'à 5 000 millisecondes.
Vous savez maintenant que la page initiale prend beaucoup de temps à s'afficher, ce qui ralentit votre application. Ensuite, nous observons le Session traces pour déterminer ce qui ralentit le processus de rendu.
Quittez cette vue en cliquant sur le X dans le coin supérieur droit.
Depuis la navigation de gauche, accédez à Session traces et triez-les dans l'ordre décroissant de Page load.
Ici, vous voyez la trace de session triée dans l'ordre de Page load temps.
Dans la liste, cliquez sur le premier.
Cela vous amène à la page de détails Session traces .
Ici, vous voyez la trace complète de cette session particulière. Cette page vous montre également Backend, Dom Processing, Page Load et d'autres informations relatives à trace .
Veuillez noter que Page load prend plus de temps que prévu. Vous avez besoin d’un calendrier détaillé de la charge. Faites défiler le pointeur vers la gauche et la droite pour ajuster la chronologie.
Faites défiler la trace pour vous déplacer dans la fenêtre temporelle et voir les détails de chaque événement au cours de cette session.
Notez qu’un événement particulier prend plus de 5 secondes.
Cliquez sur l'événement pour voir ses détails.
Notez que c'est une image. En particulier, c'est l'image d'arrière-plan de votre application qui prend 5 à 6 secondes à charger et qui provoque le retard.
Sur la base de ces résultats, vous émettez l’hypothèse que l’image d’arrière-plan est la coupable ici. Les images haute résolution et non optimisées sont la raison la plus courante de la lenteur du site Web. Bonne nouvelle ! Maintenant que vous connaissez la raison, vous pouvez résoudre le problème.
Résumé
Pour résumer, vous avez observé une lenteur dans votre application et utilisé monitoring des navigateurs New Relic pour :
- Observez Core web vitals de votre site
- Réduire les sources de lenteur
Devoirs
Bien joué! Maintenant que vous avez pris une longueur d'avance avec notre monitoring, voici quelques documents qui vous aideront à franchir les prochaines étapes de votre parcours.