Debug frontend slowness in your application

lab

This procedure is part of a lab that teaches you how to troubleshoot your web app with New Relic browser.

Each procedure in the lab builds upon the last, so make sure you've completed the last procedure, Debug errors in your application, before starting this one.

After fixing JavaScript errors in your application, you and your team are feeling confident. Ready for your down time, you head over to social media but you check Twitter and see some confused customers:

Tweeter thread showing unhapy customer

Uh oh! You customers don't look happy. It's time to useNew Relic browser to discover the source of delay.

Important

In order to see your data in New Relic, you need to enable browser monitoring for this procedure.

If you haven't already, instrument your app with our browser agent.

Debug slowness in your application

Step 1 of 14

From the New Relic homepage, navigate to Browser and choose your Relicstaurants application.

select Reliqstaurants app

Step 2 of 14

Here, you see all the data related to your browser application including Page views with JavaScript errors, Core web vitals, User time on the site, Initial page load and route changes, and others.

image showing Reliqstaurants summary

Notice the Largest Contentful Paint (LCP).

image showing Core web vitals

Largest Contentful Paint (LCP) represents how quickly the main content of a web page is loaded. Ideally, the content should not take more than a second or two to load. Here, you see that your site is loading in more than 5 seconds. No wonder your users are complaining!

But what's causing this delay? back end?

Step 3 of 14

Scroll down and notice the Front end vs. back end graph.

image showing frontend vs backend graph

Click on Back end (time to first byte) (50%) to filter the graph and see how long backend takes to load.

image showing backend time consumption

The graph indicates that the back end took maximum 140 mili seconds to process the request in worst case. Does this mean your front end is causing delay?

Click on Front end (Window load + AJAX) (50%).

image showing frontend time consumption

There's the problem! The graph indicates that the delay is happening on front end.

Step 4 of 14

To narrow down what might be causing the delat on front end, take a closer look at Initial page load and route change graph.

image showing page load graph

Step 5 of 14

Click on Initial page load (Window load + AJAX).

image showing initial page load (Window load + AJAX)

The graph indicates that Initial page load (Window load + AJAX) is taking 5-6 seconds which is alarming.

Step 6 of 14

Click Initial page load and route change to see more details.

Arrow pointing to page load graph

This takes you to Page views.

image showing page views

Step 7 of 14

Sort the pages by Most time-consuming.

image showing how to sort pages

Notice that the initial page is taking almost 90% of time to load.

image showing sorted page views

Click on it to view it's details.

image showing sorted page views

This page shows you Page view breakdown, Median initial page load time, and other important details. Page view breakdown graph is especially important here since it helps you narrow down why and where your page is taking longer. Upon taking a closer look into this graph, you see that Page rendering is taking as long as 5000 miliseconds.

image showing page breakdown w.r.t page rendering

You now know that initial page is taking quite long to render making your application slow. Next, we observe the Session traces to figure out what is slowing down the rendering process.

Exit this view by clicking the X in the top right hand corner.

Step 8 of 14

From left hand navigation, navigate to Session traces and sort them in the decending order of Page load..

image showing session traces

Step 9 of 14

Here, you see the session traces sorted in the order of Page load time.

image showing sorted session traces

Step 10 of 14

From the list, click the first one.

image showing sorted session traces

This takes you to Session traces detail page.

Here, you see the complete trace for that particular session. This page also shows you Backend, Dom Processing, Page Load, and other trace related information.

image showing trace detail

Step 11 of 14

Note that Page load is taking longer than expected. You're need a detailed timeline of the load. Scroll the pointer on the left and right to adjust the timeline.

image showing pointer to adjust time window

Step 12 of 14

Scroll through the trace to move through the time window and see the details of individual events during this session.

image showing time window to scroll

Step 13 of 14

Notice that a particular event is taking more than 5 seconds.

image showing image trace

Step 14 of 14

Click on the event to see its details.

image showing image trace detail

Notice that its an image. Particularly, its the background image of your application which is taking 5 - 6 seconds to load and causing the delay.

Based on these findings, you hypothesize that the background image is the culprit here. High-resolution, unoptimized images are the most common reason behind the website slowness. Good news! now that you know the reason, you can fix the problem.

Summary

To recap, you observed slowness in your application and used New Relic browser to:

  1. Observe Core web vitals of your site
  2. Narrow down the sources of slowness

Homework

Well done! Now that you've gotten a jump start with New Relic browser, here are some docs that will help you take the next steps on your journey.