Frontend Performance/Monitoring
Lesson 8 of 20 · Episode 8

Real User Monitoring

Collecting performance from the people actually using your site, and reading the distribution they produce.

RUMBeaconDistributionNewRelic
Watch on YouTube ↗

RUM is where the abstract metrics become a living dashboard. You drop a tiny script in your page, and every real visit quietly reports back — building a picture of how your site actually performs for everyone, not just for you on your fast laptop. Here's how it works, and how to read it without getting fooled by averages.

The mechanism

How RUM collects data

A RUM tool is usually a small third-party snippet that loads early, listens for the Web Vitals as they finalize, and sends them in a beacon — typically when the page is hidden or unloaded, so it never delays anything. The service aggregates millions of these into the distributions you analyze:

InteractiveFrom real visits to a dashboard
👥
Real users
every device & network
📜
RUM snippet
in your <head>
beacon on page-hide
📊
Dashboard
aggregated p75 + breakdowns
The snippet measures each real session and beacons it out on page-hide; the service aggregates into p75 and segment breakdowns.
In practice

Wiring it up

Setup is genuinely a copy-paste. Tools like New Relic (the one from the episode), SpeedCurve, or Sentry hand you a snippet keyed to your account; you drop it high in <head> so it initializes before the page loads:

index.html — paste the RUM snippet early in <head>
<head>
  <!-- RUM agent: must run early to capture the full load -->
  <script src="https://js-agent.newrelic.com/…"></script>
  <script>
    window.NREUM || (NREUM = {});
    NREUM.init = { /* trustKey, accountID, agentID, licenseKey */ };
  </script>
  <!-- the rest of your head -->
</head>
Keep it light
It runs in every user's browser. Resist capturing everything — over-instrumenting RUM turns the monitor into the bottleneck. Capture the vitals and key timings; reach for heavy traces in the lab instead.
Reading it

The dashboard

A good RUM dashboard leads with a Core Web Vitals breakdown: the p75 for each metric, the share of users in good/needs-work/poor, and a load-time breakdown (TTFB → network → DOM processing → render) so you can see which stage is slow. Play with the mock dashboard below:

InteractiveA RUM dashboard you can filter
2.30s
Good
p75 LCP · 48,210 sessions
Experience distribution
72%
18%
Good Needs work Poor
Load-time breakdown
TTFB
380ms
Network
520ms
DOM processing
640ms
Render
460ms
Overall p75 looks borderline-OK. But an average hides who's hurting — filter by segment.
The overall number looks borderline — but filter to India or Mobile and the real problem (and which stage causes it) jumps out.
The reason RUM exists

The power move: segment everything

The single most valuable thing RUM gives you is the ability to break the data down — by country, device, browser, connection, even by individual URL. An “okay” global average almost always hides a segment that's suffering. Filtering to that segment turns “the site feels slow for some people” into “mobile users in India are blocked on a 1.6 s network stage on the /checkout page.”

Then hand it to the lab
Once RUM tells you who and where, you recreate that exact segment (device + throttled network) in a synthetic test to get the full trace and actually debug it. Field finds it; lab fixes it.

Many RUM tools also offer session traces — a per-visit timeline of backend time, DOM processing, and events, with errors pinned to the file and line — so you can zoom from “a segment is slow” all the way down to one user's bad session.

Q1Multiple choice
When does a RUM snippet typically send its data, and why?
Q2Multiple choice
Your global p75 LCP is 2.3s (borderline). What's the most useful next step in RUM?
Q3Multiple choice
Why shouldn't you capture every request, frame, and log in RUM?
Key takeaways
  • RUM is a lightweight snippet that beacons each real visit's metrics to a dashboard.
  • Read it via p75, the good/needs/poor split, and a stage breakdown (TTFB → network → DOM → render).
  • Its superpower is segmentation — by geo, device, browser, connection, URL.
  • Keep it light; over-instrumenting makes the monitor the bottleneck.
  • Field (RUM) finds who's slow; hand that segment to the lab to debug.
← Previous
7. RUM vs. Synthetic Monitoring
Next →
9. Synthetic Monitoring — WebPageTest