INP: one long task vs work that yields
The slow handler never lets the browser paint "working": the user sees nothing for 150 ms, then the result. The chunked version does the same total work but returns to the browser every 15 ms, so "working" appears at once and other input is handled between chunks. Click the slow button yourself: the button even fails to show its pressed state. Chromium also offers scheduler.yield(), which resumes your work ahead of other queued tasks.
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
long tasks during the slow click: 1
long tasks during the chunked click: 0
Status: done (chunked)