Common Causes of Poor Web Vitals
| Metric | Meaning | Good Target | Why It Matters | Common Fixes |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Time for main content (hero image / large text) to load | ≤ 2.5s | First impression of page speed | Optimize images, preload hero assets, reduce blocking JS/CSS, use edge/server rendering |
| INP (Interaction to Next Paint) | Measures responsiveness to clicks/taps/typing | ≤ 200ms | Real measure of interactivity and “snappiness” | Split long tasks, reduce JS bundle, offload to Web Workers, use React concurrency |
| CLS (Cumulative Layout Shift) | How much the layout moves unexpectedly | ≤ 0.1 | Prevents misclicks + janky UX | Reserve space for images/ads, avoid DOM shifts above fold, use font-display: swap |
| FCP (First Contentful Paint) | Time until first visible element appears | ≤ 1.8s | Page doesn't feel blank | Reduce blocking resources, optimize initial HTML, improve server response |
| TTFB (Time To First Byte) | Time server takes to respond | ≤ 200ms | Reveals backend latency issues | CDN caching, edge compute, fix DB bottlenecks, avoid cold starts |
| TTI (Time To Interactive) | Time until page is fully usable (JS done) | ≤ 5s | Clear indicator of JS heaviness | Code-split, defer non-critical JS, minimize hydration cost |
| TBT (Total Blocking Time) | Total time main thread is blocked during load | ≤ 200ms | Predicts slow interactions | Reduce JS bundle, break long tasks, remove unused polyfills |