Web Vitals Playground
Core Web Vitals are part of Google's page experience signals — and, more importantly, they are what people feel when a page is slow, jumpy or unresponsive. Each demo below has a bad and a good version, with a live overlay measuring the metric.
Demos
- LCP — Largest Contentful Paint (loading): bad · good
- CLS — Cumulative Layout Shift (visual stability): bad · good
- INP — Interaction to Next Paint (responsiveness): bad · good
Thresholds
| Metric | Good | Needs improvement | Poor |
|---|---|---|---|
| LCP | ≤ 2.5 s | ≤ 4 s | > 4 s |
| CLS | ≤ 0.1 | ≤ 0.25 | > 0.25 |
| INP | ≤ 200 ms | ≤ 500 ms | > 500 ms |
Best viewed in Chrome or Edge. Source code and explanations on GitHub.