Field data picks the fire

React chapter 148 · Web Perf · lab vs field · p75 · CrUX, RUM, PerformanceObserver · source: Todd H. Gardner, Fundamentals of Web Performance, Part 1 slides 149–202 (capturing metrics, lab vs field, tools, and RUM)

The problem

Lighthouse is green on the developer’s laptop, so the team declares the page fast. Real users on budget phones still wait: one clean lab run and an average have hidden the slow tail.

The pattern that fixes it

Use field data at the 75th percentile to choose the metric, route, and user cohort that hurts. Then reproduce that cohort in a controlled lab trace, fix the diagnosed cause, and return to field data to validate the result.

In plain words

A lab test is a controlled experiment; field data is what real visitors experienced. Field data tells you where the fire is. A lab trace helps you find which wire started it.

A doctor uses population symptoms to decide which problem matters, then uses a focused scan to diagnose one patient. One perfect treadmill run cannot describe the whole city.

Terms

lab data
A repeatable test on one chosen device, network, page, and moment. Best for diagnosis.
field data
Measurements from real visits across real devices and networks. Best for understanding experience.
p75
The 75th percentile: 75% of visits are at or faster than this value; the slower 25% are not averaged away.
RUM
Real User Monitoring: your own field telemetry, usually with route, device, region, and metric attribution.

Going deeper

CrUX and RUM answer different questions

CrUX is public, aggregated Chrome field data and is useful for an outside-in view. RUM can cover your authenticated and private routes, add product context, and alert sooner. Either one chooses the problem; neither replaces the diagnostic detail of a Performance trace.

Why one average lies

A fast desktop majority can pull the average below a target while a large mobile cohort is still slow. Inspect p75 by route and meaningful cohort. Do not slice so narrowly that a handful of visits looks like a trend.

Collect the least data you need

The web-vitals library normalizes Core Web Vitals collection. Send the metric name, value, route, and coarse diagnostic context; sample traffic and avoid URLs or attributes that contain personal data. Observability code also has a cost, so keep it small and off the critical path.

Validate in the same place you found the problem

A lab trace can prove that a fix removed a long task or advanced image discovery. It cannot prove that p75 improved for real users. Release safely, compare the same route and cohort over enough visits, and watch the product metric beside the performance metric.

Keep learning

More courses

  • Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
  • Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
  • Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
  • System Design — Eight interview case studies, from a flash sale and Tatkal to a live final and a chat model, plus JWT in separate chapters.
  • Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
  • Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
  • Frontend system design — How a UI is sliced when it is a product, not a page: ownership of state, cache, routes, and what happens when the network lies.
  • CSS in depth — See the box, then the page. Visual chapters from the box model through Flexbox surprises, Grid, selectors, and units, then backgrounds, shapes, and visual effects, each with a playground.
  • Accessibility — HTML labs first, then a full pass of WAI-ARIA 1.3: naming, every state, widget and structure roles, live regions, ariaNotify, and relationships.
  • Docker — What an image is, why layers cache, and how containers find each other on a network.
  • Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.