Core Web Vitals Performance Budgets
Set performance budgets aligned with Google Core Web Vitals thresholds for LCP, FID/INP, and CLS. Learn the relationship between resource budgets and timing metrics for SEO rankings.
Detailed Explanation
Core Web Vitals and Performance Budgets
Core Web Vitals (CWV) are Google's metrics for measuring real-world user experience. They directly influence search rankings, making them essential targets for performance budgets.
Current Core Web Vitals Thresholds
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP | <= 2.5s | <= 4.0s | > 4.0s |
| INP | <= 200ms | <= 500ms | > 500ms |
| CLS | <= 0.1 | <= 0.25 | > 0.25 |
Mapping Resource Budgets to CWV
LCP (Largest Contentful Paint) is affected by:
- Total page weight (determines download time)
- Server response time (TTFB)
- Hero image size and format
- Render-blocking CSS and JS
Budget targets for good LCP:
- TTFB: < 800 ms
- CSS: < 80 KB (critical CSS inlined)
- Hero image: < 100 KB (preloaded)
- Total above-the-fold: < 200 KB
INP (Interaction to Next Paint) is affected by:
- JavaScript bundle size (parse/compile time)
- Main thread blocking time
- Event handler complexity
Budget targets for good INP:
- JavaScript: < 200 KB (compressed)
- No individual task > 50 ms on main thread
CLS (Cumulative Layout Shift) is affected by:
- Images without dimensions
- Fonts causing FOIT/FOUT
- Dynamic content injection
- Ad slots without reserved space
Budget targets for low CLS:
- All images with explicit width/height
- Font display: swap with size-adjust
- Reserved ad slot dimensions
Setting CWV-Aligned Budgets
In the Performance Budget Tracker, set timing budgets as:
| Metric | Budget Target |
|---|---|
| TTFB | 600 ms |
| FCP | 1500 ms |
| LCP | 2500 ms |
These provide safety margins below the "good" thresholds.
Monitoring Strategy
Use the exported budget JSON alongside real-user monitoring (RUM) tools like the web-vitals library to track both resource budgets (preventative) and actual CWV scores (outcome-based).
Use Case
CWV-aligned budgets are critical for any site where organic search traffic matters. Google explicitly uses CWV as a ranking signal. Sites that fail CWV thresholds lose ranking position to competitors who pass. Setting resource budgets that map to good CWV scores creates a proactive defense against ranking drops.