How to Achieve a Sub-Second LCP on a Content Site
To get LCP under one second, serve static HTML from an edge cache, inline critical CSS, ship near-zero client JavaScript, and make your LCP element text or a pre-sized, priority-loaded image rather than a late-fetched hero.
Key takeaways
- What is a good LCP score? — Google considers an LCP under 2.5 seconds "good", but for a cache-first content site you can realistically target under 1.0 second a
- Does server-side rendering improve LCP? — Yes. Serving fully-formed HTML from an edge cache removes client-side data fetching and rendering from the critical pa
Largest Contentful Paint (LCP) measures when the biggest above-the-fold element becomes visible. On a content site, hitting a sub-second LCP is almost entirely an architecture problem, not a tuning problem.
Why cache-first rendering wins
The single biggest lever is where the HTML comes from. A database query in the request path adds tens to hundreds of milliseconds before a single byte reaches the browser. Static generation plus an edge cache removes that entirely: the origin does the work once, and every subsequent visitor gets a cache HIT measured in single-digit milliseconds.
Make the LCP element cheap
The fastest LCP element is text. When your hero is a headline rendered from server HTML, there is nothing to fetch and nothing to decode. If you must use an image, give it explicit dimensions, mark it high priority, and serve it as AVIF under 100 KB.
Cut the JavaScript
Every kilobyte of client JavaScript competes with paint for main-thread time. Render on the server, hydrate only tiny interactive islands, and defer anything non-essential until after first paint.
Lock it down with budgets
Performance regresses silently. Enforce a budget in CI — HTML under 50 KB gzipped, client JS under 70 KB — and fail the build when a change blows past it.
Frequently asked questions
- What is a good LCP score?
- Google considers an LCP under 2.5 seconds "good", but for a cache-first content site you can realistically target under 1.0 second at the 75th percentile.
- Does server-side rendering improve LCP?
- Yes. Serving fully-formed HTML from an edge cache removes client-side data fetching and rendering from the critical path, which is the most reliable way to lower LCP.