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 bugs in your payment method, you and your team are feeling confident. It's time to push the fixes.

Change to the scenario-2 directory and set up your environment.

bash
$
cd ../scenario-2
$
npm install
$
npm run build

Now that you've released your new code, it's time to check Twitter for some user feedback.

A Twitter thread showing that the site is loading slow

Oh no! You fixed the errors but forgot to check if your site was loading fine.

Important

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

Open the application in the IDE of your choice. In public/index.html file of your app, paste the browser monitoring code snippet, that you copied in the last procedure, inside the <head>.

Reproduce the issue

You've been notified by your users that your site is loading slowly. Reproduce the issue for yourself.

From the root directory of the project, build and run your application.

bash
$
npm run build
$
npm run newstart

This opens your Reliqstaurants application in your browser.

Reliqstaurants homepage

In another terminal window, navigate to the root directory of your application, and run the load generator.

bash
$
cd browser-pro-lab-material/scenario-2/simulator
$
python3 simulator.py

The load generator helps you generate some traffic against your app so you don't have to.

Your users were right! Your site ia taking long to load. But why? Use New Relic browser to discover the source of delay.

Debug slowness in your application

Step 1 of 13

From the New Relic homepage, go to Browser.

Arrow showing navigation to browser

Step 2 of 13

Choose your Reliqstaurants application.

select Reliqstaurants app

Step 3 of 13

Here, you see all the data related to your browser application including Core web vitals, Initial page load and route change, User-centric page load times and others.

image showing Reliqstaurants summary

Notice the Core web vitals - 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 4 of 13

Notice the Front end vs. back end graph.

image showing frontend vs backend graph

Click on Back end (time to first byte) (50%).

image showing backend time consumption

The graph indicate that the back end is taking maximum 40 mili seconds to process the request. 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 5 of 13

Take a closer look at Initial page load and route change graph.

image showing page load graph

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

Step 6 of 13

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

Sort the pages by Most time-consuming.

image showing sorted page views

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

Step 7 of 13

Scroll down to Session traces.

image showing session traces

Step 8 of 13

Sort the Session traces in the decending order of Page load.

image showing sorted session traces

Step 9 of 13

From the list, click the first one.

image showing sorted session traces

This takes you to Session traces detail page.

Step 10 of 13

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

image showing trace detail

Step 11 of 13

Scroll down on the trace to move through the time window and see the details.

image showing time window to scroll

Step 12 of 13

Notice that the background image is panning through almost the entire trace.

image showing image trace

Step 13 of 13

Hover over the assest.

image showing image trace detail

Your suspicion was right. The image 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.