Web Vitals from real users

Server p95 can be healthy while the page feels broken. Images shift, the largest paint arrives late, or the main thread ignores a click. Core Web Vitals exist because lab scores and origin timers do not describe that experience.

The problem

A synthetic Lighthouse run on a warm cache in a London office is not your customer on a mid-range phone. Real-user monitoring (RUM) measures the session that actually happened. Without it, frontend regressions hide behind a green PHP waterfall.

What it is

Chrome’s Core Web Vitals are three field metrics with published good / needs-improvement / poor thresholds:

• LCP (Largest Contentful Paint) — when the main content appears. Good is 2.5s or less.
• INP (Interaction to Next Paint) — how quickly the page responds to clicks, taps, and keys. Good is 200ms or less. INP replaced FID as a Core Vital.
• CLS (Cumulative Layout Shift) — visual stability. Good is 0.1 or less.

Percentiles matter more than averages. p75 is the conventional reporting line for field vitals (Search Console and CrUX). p95 shows how bad the tail is on slower devices.

What it gives a team

• A frontend health check that does not require guessing from server duration.
• A way to see whether a CSS or hero-image change moved CLS or LCP after a release.
• Correlation in spirit with session replay: vitals tell you the page felt wrong; replay shows what the user saw.

How Talaria does it

The JavaScript browser SDK uses the web-vitals library and emits one child span named browser.web_vital for LCP, INP, CLS, and TTFB when tracing is on and that page load was sampled. The span is parented to the document pageload, including after a client-side navigation, and it does not lengthen the route transaction. The dashboard reads p50, p75, and p95 from those spans. PHP, Node, Dart, and Flutter do not record Web Vitals.

How to read it

• Watch p75 against Chrome’s good thresholds before chasing p95.
• LCP regressions: hero media, fonts, or a slow origin TTFB you will see on the server waterfall — open that trace to name the query behind it.
• INP regressions: long tasks, expensive click handlers, hydration.
• CLS regressions: images without dimensions, injected banners, web fonts swapping late.

Vitals describe the document the browser painted. Pair them with server traces when the complaint is “the page is slow to show anything.”

Turn it on

Use @newtalaria/browser with tracing on in Project settings. Load a real page in a real browser. Headless crawls that never paint will not produce LCP.