LCP-Focused Performance Budget Strategy
Build performance budgets specifically targeting Largest Contentful Paint (LCP) optimization. Cover resource prioritization, preloading, server timing, and the four phases of LCP with budget allocations for each.
Detailed Explanation
LCP-Focused Performance Budgets
Largest Contentful Paint (LCP) is often the most important Core Web Vital for SEO and user experience. It measures when the largest visible content element (usually a hero image or heading) finishes rendering.
The Four Phases of LCP
LCP can be broken down into four sequential phases, each with its own budget:
| Phase | Target | Budget Allocation |
|---|---|---|
| 1. Time to First Byte | < 800ms | Server + network |
| 2. Resource load delay | < 100ms | Discovery time |
| 3. Resource load time | < 800ms | Download time |
| 4. Element render delay | < 100ms | Rendering time |
| Total LCP | < 2500ms |
Phase 1: TTFB Budget
The server must respond within 800ms. Budget allocation:
- DNS + TCP + TLS: < 200ms (use CDN)
- Server processing: < 400ms (caching, optimization)
- Network transit: < 200ms (geographic proximity)
Phase 2: Resource Load Delay
The LCP resource must be discovered immediately:
- Preload the LCP image:
<link rel="preload">eliminates discovery delay - No render-blocking resources before the LCP element
- Avoid lazy loading the LCP image — it should load eagerly
Phase 3: Resource Load Time
The LCP resource must download quickly:
- Image LCP budget: < 100 KB compressed (WebP/AVIF)
- Text LCP budget: CSS must be loaded (< 40 KB critical CSS)
- Total concurrent downloads: Keep within bandwidth capacity
Phase 4: Element Render Delay
The browser must render the element quickly:
- No render-blocking JS before LCP element
- CSS must be parsed — keep critical CSS small and inlined
- Font loading — use
font-display: optionalto prevent font-triggered LCP delays
Tracking LCP Resources
In the Performance Budget Tracker, tag LCP-critical resources:
hero-image.webp— 80 KB (Image type)critical.css— 12 KB (CSS type, inlined)- Ensure total above-fold resources < 200 KB
LCP Budget by Device
| Device | LCP Target | Total Above-Fold |
|---|---|---|
| Mobile 3G | < 2500ms | < 150 KB |
| Mobile 4G | < 2000ms | < 200 KB |
| Desktop | < 1500ms | < 300 KB |
Use Case
LCP-focused budgets are critical for sites where the LCP element is a large hero image or video thumbnail. E-commerce product pages, news article pages, and landing pages all benefit from explicitly budgeting the LCP resource and its dependencies. A clear LCP budget prevents the common mistake of optimizing total page weight while neglecting the critical rendering path.