- All Courses
- React Performance Engineering
- Measuring Before You Optimize
- Core Web Vitals in the field
Core Web Vitals in the field
Lab tools run on a fast machine over a fast network and produce a repeatable best case.
Overview
Your laptop is not your user
Lab tools run on a fast machine over a fast network and produce a repeatable best case. Field data comes from real devices and shows the distribution, which is where the interesting problems live.
Largest contentful paint is how long until the main content appears. Interaction to next paint measures the worst responsiveness the user actually experienced. Cumulative layout shift captures how much the page moved under them while they were reading it.
Look at the 75th percentile rather than the average. Performance work is about the bad sessions; the average hides them by definition.
In this lesson you will:
- Tell lab data and field data apart
- Know what LCP, INP, and CLS each measure
- Report vitals from real sessions
Resources
Notes are not saved yet — they clear when you leave this page.
Profiling with React DevTools
13m
Reading a flame graph
19m