Core Web Vitals
| Metric | Good | Needs Improvement | Poor |
|---|
LCP | ≤ 2.5s | 2.5–4.0s | > 4.0s |
INP | ≤ 200ms | 200–500ms | > 500ms |
CLS | ≤ 0.1 | 0.1–0.25 | > 0.25 |
Key Metrics Explained
| Metric | What It Measures | How to Improve |
|---|
| LCP (Largest Contentful Paint) | Time until largest visible element renders | Optimize server response, preload hero image, remove render-blocking resources |
| INP (Interaction to Next Paint) | Responsiveness to user interactions | Break up long tasks, use Web Workers, debounce inputs |
| CLS (Cumulative Layout Shift) | Visual stability during page load | Set explicit width/height on images, avoid injecting content above existing |
| TTFB (Time to First Byte) | Server responsiveness | CDN, caching, optimized backend |
| FCP (First Contentful Paint) | First visual content rendered | Inline critical CSS, font optimization |
Lighthouse Scoring
| Category | Weight | Key Audit |
|---|
| Performance | Core vitals + audits | LCP 25%, TBT 30%, CLS 25%, SI 10%, FCP 10% |
| Accessibility | WCAG compliance | Contrast, labels, landmark elements |
| Best Practices | Security & standards | HTTPS, correct image aspect ratios |
| SEO | Search discoverability | Meta tags, crawlability, mobile-friendly |
Measurement Tools
| Tool | Type | Best For |
|---|
| Lighthouse | Lab (simulated) | Development, CI/CD, audits |
| PageSpeed Insights | Lab + Field | Real-user data + lab recommendations |
| Chrome UX Report (CrUX) | Field (real user) | Real-world performance across origins |
| Web Vitals Extension | Field (real user) | Local testing during development |
Pro Tip: Measure performance in the lab for debugging, but optimize for field data (CrUX). Lab conditions are ideal; real users have slow networks and low-end devices.