The Modern LCP Improvement Playbook
Step-by-step guidance for reducing Largest Contentful Paint using render-path modeling, streaming HTML, and proactive media delivery.
Map the real render path
Most teams optimize LCP in the abstract. Instead, trace the exact bytes the browser must download before the hero is visible. Inline critical CSS, collapse non-essential JavaScript, and make the initial HTML self-sufficient.
Pull CrUX field data for the slowest country + device combo. If that experience is healthy, every other persona will benefit automatically.
- Ship `<link rel="preload">` hints for hero media and web fonts
- Gate marketing pixels until `requestAnimationFrame` after LCP
- Fallback to server-rendered hero copy whenever hydration is delayed
Treat hero media like a build artifact
Compress hero assets aggressively and respect the 200KB budget. Use AVIF/WebP for imagery, run `sharp` in CI, and serve multiple aspect ratios.
When using video, prerender the poster frame and defer autoplay until interaction. A still image is usually enough to satisfy LCP.
Stream HTML before you hydrate
Adopt server components or at least chunk your HTML so browsers can paint partial hero content before all data arrives.
If you are gated by edge compute, push static hero fragments via a CDN key so they avoid origin entirely.
Instrument relentlessly
Hook the `largest-contentful-paint` PerformanceObserver and ship the data to your warehouse. Alert when p75 creeps above the budget for any segment.
Compare your MakeWebsite.fast synthetic score with Search Console field data weekly. Divergence usually means you optimized for desktop but not low-end Android.
Key takeaways
- Render-path literacy beats generic checklist optimization.
- Optimize hero media as if it were code — versioned, budgeted, and tested.
- Tie synthetic and field data together so LCP never regresses silently.
FAQ
What is a realistic global LCP target?
Aim for <2.2s on p75 mobile traffic. That buffer absorbs seasonal peaks and keeps you under Google's 2.5s guidance.
Can I ignore LCP once I launch server components?
No. Server components shorten the critical path but you still need diligent media budgets, CDN strategy, and hydration safeguards.
Related research
Mobile
Why Mobile Speed Scores Lag (and How to Close the Gap)
Mobile devices inherit weaker CPUs, flakier networks, and more aggressive thermal throttling. Here is the remediation backlog that actually works.
Guides
Core Web Vitals Guide for 2025
INP is now a ranking signal and CLS budgets keep tightening. Use this annual refresh to prioritize engineering work with surgical precision.