Real-time User

Monitoring
New Relic Browser
Agenda

01 Customer Experience

02 Performance

03 Perceived Performance

04 Browser Lab

05 Browser queries

© 2022 New Relic, Inc. All rights reserved

 Reference
Front end
experience

A framework to improve Availability

digital customer experience Is it up and running?
through the different layers
of your stack Functionality
Is it working right?

Performance

Is it working fast enough?

© 2022 New Relic, Inc. All rights reserved

Availability
Is it up and running?

1. Look for Throughput drops

Browser Summary charts / Dashboards / Browser Alert (Throughput drops)

1. Synthetic monitoring tests send real, Selenium-powered Google Chrome browsers

to your site from locations around the world to ensure your content is always up,
everywhere.

URL not reachable / API reports incorrect payload

1. You can define and consume service level indicators and service level objectives for
your applications.

Service levels are used to measure the performance of a service from the end user (or
client application) point of view
© 2022 New Relic, Inc. All rights reserved
Functionality
Make sure it’s working for your customers

1. Triage any JavaScript errors

Prioritise - view by name, frequency, browser, custom attributes

1. Set up ‘scripted browser’ monitors in Synthetics

Are the critical user paths through your site working (login, checkout, search, etc.)

1. Set up Alerts on your Synthetics monitors

Get notified if something affects user experience (even if back-end or infrastructure)

© 2022 New Relic, Inc. All rights reserved

Speed
Optimise experience and minimise bounce rates

1. Page Load times don’t give the full picture

Use Percentile & Histograms to avoid skewed averages

Look at First Paint/First Contentful Paint as better indicators of success

1. Configure front end Apdex Threshold

Are the critical user paths through your site working (login, checkout, search, etc.)

1. Optimise front-end code / manage ‘page bloat’ with Session Traces

Check for blocking JS, slow AJAX calls / Session Trace Waterfall

1. Set up page load speed alerts

Use Dynamic Baseline Alerting to set healthy page load thresholds

© 2022 New Relic, Inc. All rights reserved
Troubleshooting front-end problems
What correlates on the Summary page?

Drops in Throughput

Spikes (small?) in Front End time

Wide gaps between first byte and DOM

content load/Page Load

Drops in Apdex

Spike in JS Errors

Explore Median & 95th Percentiles

(averages can be skewed by outliers)
© 2022 New Relic, Inc. All rights reserved
Core Web Vitals
What users really care about
• measures loading
performance.
• To provide a good user
experience, LCP should
occur within 2.5 seconds of
when the page first starts
loading
© 2022 New Relic, Inc. All rights reserved
• measures interactivity.
• To provide a good user
experience, pages should
have a FID of 100
milliseconds or less
https://web.dev/vitals
• measures visual stability.
• To provide a good user
experience, pages should
maintain a CLS of 0.1. or
less
Browser Timings

© 2022 New Relic, Inc. All rights reserved

Focus on ‘User-centric’ performance metrics
Measure when end users perceive your pages are starting to render

First Paint:

● First pixel renders on a screen

(background?)

First Contentful Paint:

● Any content from the DOM

(text, images, non-white canvas, or SVG)

© 2022 New Relic, Inc. All rights reserved

 10-15 mins
Lab: Explore Browser Performance
Use Demotronv2 account - WebPortal App - past 24 hours

Front End performance issues are more subtle in charts than back end spikes. Zoom in.

1. Change the time picker to 24 hours and compare Median, Average, and 95th percentile stats.
What are your observations? __________________________

2. What’s the highest 95th percentile page load time you see? __________

3. Does this application have a lot of errors? What are the most common errors?
________________________

4. Use Page views menu: What pages are slow?____________________

5. Explore a slow ‘Session Trace’ for the most time consuming pages

6. What was causing the slow page loads? Was it based on a particular Browser
type?_______________
© 2022 New Relic, Inc. All rights reserved
 10-15 mins
Lab: Custom charts & alerts Front End Performance
Using the NRU Training account & Pet Clinic App
1. Monitor median baselines by comparing current versus historical performance of
firstContentfulPaint

SELECT percentile(firstContentfulPaint, 50) as 'First contentful paint' FROM PageView WHERE

appName='New Relic Pet Clinic' SINCE 1 day ago COMPARE WITH 2 days ago TIMESERIES

1. Find outliers using the 95th percentile

SELECT percentile(firstPaint, 50) as 'First paint', percentile(firstPaint, 95) as 'First paint', percentile(duration,
50) AS 'Window load + AJAX' FROM BrowserInteraction WHERE appName = 'New Relic Pet Clinic'
TIMESERIES SINCE 3 days ago UNTIL now

1. Create an NRQL alert if a user doesn’t see content or pixels within 7 seconds
Try using NRQL: SELECT percentile(firstPaint , 99) FROM BrowserInteraction
Threshold: Static When Query Returns a value above 7 seconds
© 2022 New Relic, Inc. All rights reserved
Thank you.
learn@newrelic.com

© 2022 New Relic, Inc. All rights reserved