Reserve the space: no shift
Same banner, same timing, zero layout shift: the space was reserved from the first paint. The same idea fixes images (width/height or aspect-ratio) and skeleton screens (make the skeleton the same size as the content it stands for).
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
layout shift reported: false
CLS above zero: false