Real User Monitoring (RUM)

Real user monitoring (RUM) measures Core Web Vitals in the browsers of the people who visit your site. You add one small script to your pages, and LoadFocus shows LCP, INP, CLS, FCP and TTFB at the 75th percentile, per page and per device. It also shows what slows them down: the elements, images and scripts behind the numbers, and how they differ by country, browser, connection and navigation type.

Lab runs tell you how fast a page can be from one location on one device profile. RUM tells you how fast it is for your visitors. It also works where the Chrome UX Report field data has nothing to show, because it does not depend on Google having enough Chrome traffic for your site.

Add a site

1. Click RUM in the sidebar of the page speed app, or open speed.loadfocus.com/rum. The page lists your sites.
2. Click Add a site, enter a Site name and the Hostnames the site runs on, and click Create site.
3. Open the site and copy the snippet from Install. Paste it into the <head> of every page.

Separate hostnames with commas, up to 10 per site. Page views are counted only from these hostnames, and *.example.com covers example.com and every subdomain. The hostname check stops casual pollution of your numbers, but the site key in the snippet is public, so treat the numbers as visitor data, not as a security control.

If your site sends a strict Referrer-Policy: no-referrer, the browser sends no origin with the beacon and those page views are not counted. For such a site, tick Accept page views from pages that send no origin in the site's settings. The hostname is then taken from the snippet, which any page could fake, so leave it off unless your site needs it.

The snippet

<script async src="https://speed.loadfocus.com/rum.js" data-site="YOUR_SITE_KEY"></script>

The snippet on the site's page has your site key filled in. The script loads after your page and sends one small beacon when the visitor leaves the page or hides the tab.

Three optional settings:

• Sampling. data-sample="0.25" measures a quarter of page views. Page views outside the sample are not measured at all. The Measure choice above the snippet on the site's page sets it for you.

• Page names. By default each page is named by its path. To group pages yourself, set window.LOADFOCUS_RUM_PAGE on the page, for example window.LOADFOCUS_RUM_PAGE = "/product/:id";.

• Pinned version. On the site's page, Pin this version (Subresource Integrity) gives you a snippet that loads a frozen copy of the script with its integrity hash:

  <script async src="https://speed.loadfocus.com/rum.v1.js" integrity="sha384-..." crossorigin="anonymous" data-site="YOUR_SITE_KEY"></script>

  Nothing LoadFocus deploys can change that script, and the browser refuses it if it ever differs from the hash. Copy the snippet from the site's page for the real hash. To get a later version, install the new snippet. The plain rum.js snippet always loads the current version.

If your site sends a Content-Security-Policy, allow https://speed.loadfocus.com in script-src (the script) and in connect-src (the beacon).

What is measured

LCP, INP and CLS are the Core Web Vitals. The values follow the same rules as Google's web-vitals library: LCP stops at the first input, CLS is the largest burst of layout shifts, INP leaves out one outlier per 50 interactions, and paints in a tab opened in the background do not count. Each page view is classed as mobile or desktop.

One beacon is sent per page view. A page restored from the browser's back/forward cache counts as a new page view, as Google's web-vitals library reports it.

Page views from bots, crawlers, headless browsers, lab tools such as Lighthouse (LoadFocus monitors included) and scripts are not counted. The site's page shows how many were left out in the last 24 hours.

Privacy

The script sets no cookies and stores nothing in the browser. Each beacon carries the page path, the device class and the numbers, plus what explains them:

• Short CSS selectors of the elements behind LCP, INP and CLS: the tag, the id and up to two class names, never text or other attributes.
• The address of the LCP image and of the slowest script, without the query string.
• The connection type and how the page was opened (normal visit, reload, back or forward).

And:

• The query string and the hash of the page are never sent.
• Ids, numbers, tokens and email addresses in paths are grouped as :id, so /orders/48213 and /orders/48214 are both counted as /orders/:id.
• The visitor's IP address is used in memory to look up the country and, as a hash that changes every day, for the rate limits. It is never stored.

Paths and element ids come from your own pages. If a path can carry a name, for example /u/jane.doe, give those pages one name with window.LOADFOCUS_RUM_PAGE. There is nothing to add to a cookie banner.

Read the dashboard

Each site has its own page. Choose the Period (7 days, 28 days or 90 days) and you get:

• A tile per metric with its p75, colored good, needs improvement or poor, the share of page views in each band and the share that is good.
• A daily chart of the p75 for the metric you click, with the good and poor thresholds as dashed lines and page views as faint bars.
• Pages: your most viewed pages with their views and p75 LCP, INP and CLS. Pages beyond the first 300 distinct paths in a day are counted as (other pages). Hover a page's LCP to see its four phases.
• Devices: the share of page views and the p75 LCP, INP and CLS for Mobile and Desktop.

Numbers appear within a few minutes of the first visits.

Each site on the RUM page shows Receiving data or Waiting for the first page view. A p75 that stands on fewer than 30 page views is shown grey as Too few to rate, with its count, because it can still swing a lot. Days in the chart are UTC days.

What slows your pages

Below the pages and devices, each site shows what is behind its numbers. The same snippet collects it, so there is nothing to set up.

What slows LCP

A bar splits LCP into four phases, each at the 75th percentile:

• Time to first byte: until the first byte of the page arrives.
• Load delay: from then until the browser starts downloading the LCP image.
• Load duration: the download of the image.
• Render delay: from the end of the download until the image or text is painted.

A text LCP has no load delay and no load duration. Each phase is its own percentile, so the four do not add up to the LCP above. Under the bar, Element lists the elements that were the LCP as a short CSS selector, with their type (Image or Text), views and LCP, and Image lists the LCP images by address.

What slows INP

A bar splits the slowest interaction of each page view into Input delay (waiting for the main thread), Processing (running the event handlers) and Presentation (painting the next frame). Slowest interactions lists the elements people clicked, tapped or typed in, with the event. Scripts running during the slowest interaction lists the script that ran longest during it, by address, with what started it (Started by, for example event-listener). Only Chrome and Edge report scripts.

What shifts

What shifts lists the element that moved most in each page view's largest burst of layout shifts, with its CLS.

Each of these tables keeps up to 100 different elements, images or scripts a day per site. The rest are counted as (other elements), (other images) or (other scripts).

Breakdowns

Breakdowns shows views and p75 LCP, INP, CLS and TTFB per:

• Country: from the visitor's IP address, looked up when the page view arrives and not kept. Up to 60 countries a day per site, the rest in Other countries. Countries come from GeoLite2 data created by MaxMind.
• Browser: Chrome, Edge, Safari, Firefox, Samsung Internet, Opera, or Other browsers.
• Connection: the effective connection type the browser reports (4g, 3g, 2g, slow-2g). Only Chrome, Edge and other Chromium browsers report it, so Safari and Firefox visits show as Not reported.
• Navigation: Normal visit, Reload, Back or forward, Back/forward cache (a page restored instantly) and Prerendered.

Alerts

In Alerts on a site's page, pick a metric, enter a threshold after p75 above, tick the alert channels under Notify and click Add alert. You can add up to 5 alerts per site. Each is checked every hour against today and yesterday (UTC), once at least 30 page views are measured. You get one message when the p75 goes above the threshold and one when it is back under. Alerts go to your team's alert channels.

Deploy markers

To see your releases on the daily chart, post a marker with the site key (the data-site value in the snippet) as configId:

curl -X POST "https://speed.loadfocus.com/api/test/applighthouse/annotations" \
  -H "loadfocus-auth: YOUR_API_KEY" -H "content-type: application/json" \
  -d '{"label":"Deployed v1.4.2","configId":"YOUR_SITE_KEY"}'

Markers posted without a configId show on every site and monitor. More in CI Build Gating & Deploy Markers.

Limits

Page views are counted per team. The page shows how many you have used this month. Once the limit is reached, new page views are not counted until next month.

To change the name or hostnames of a site, use Edit site. Delete site removes the site and all its data.

Related

• Real-user field data (CrUX)
• Core Web Vitals metrics
• Largest Contentful Paint