Watch LCP and a layout shift happen
The banner pushes the heading, text and button down 300 ms after load: a layout shift without user input, so it counts towards CLS. Chromium-based browsers report largest-contentful-paint and layout-shift; Firefox and Safari support fewer entry types, so check PerformanceObserver.supportedEntryTypes before observing in production code (or let web-vitals do it).
Core Web Vitals are three numbers measured on real users: LCP (how soon the main content appears), INP (how quickly the page responds to taps and clicks) and CLS (how much the layout jumps); you measure them with PerformanceObserver or the web-vitals library, and improve them with smaller bundles, well-loaded images and fonts, reserved space and short main-thread tasks.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a function rate(name, value) that returns "good", "needs-improvement" or "poor" for LCP (ms), INP (ms) and CLS using the official thresholds, and test it with LCP 2400, INP 350 and CLS 0.3.
A product card shows a 4:3 photo that loads after the card renders, and the grid jumps. Write the card so it never shifts.
Explain it without notes
What do LCP, INP and CLS measure, and what are the "good" thresholds?
What's the difference between field and lab data, and which one do Core Web Vitals use?
Give three common causes of poor INP in a React app and how to fix each.
How would you find out why a React app's bundle is large, and what would you do about it?
Preview
Console
Nothing logged yet.Expected console output
LCP entry reported: true
layout shift reported: true
shift without user input (counts for CLS): true
CLS above zero: true