Lab part 4: Debug frontend slowness in your application

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

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.

Notice the largest contentful paint (LCP).

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?

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

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

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%).

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

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

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

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

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

This takes you to Page views.

Sort the pages by Most time-consuming.

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

Click on it to view it's details.

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.

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.

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

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

From the list, click the first one.

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.

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.

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

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

Click on the event to see its details.

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