How Do You Improve Largest Contentful Paint?
LCP is the most commonly failed Core Web Vital and usually the most fixable, because it has a single identifiable culprit: one element, one moment. The diagnostic discipline is to name that element before changing anything, since optimisations aimed at the wrong resource are why so much performance work produces no measurable improvement.
How do you find the LCP element?
Chrome DevTools marks it in the Performance panel timing track, and Lighthouse names it directly under the Largest Contentful Paint audit. It is usually a hero image, a background image, a large heading or a video poster frame. Identify it on a real page, not the homepage you assume is representative.
The element can differ by viewport, which catches people out. A hero image that dominates desktop may be hidden on mobile, making a headline the LCP candidate there. Since mobile field data typically drives the failing assessment, check mobile first.
What are the biggest LCP wins?
Remove lazy loading from the LCP image, since deferring it guarantees a late paint. Preload it with fetchpriority high. Serve it in a modern format at the size actually rendered. Eliminate render-blocking stylesheets and scripts above it. Reduce server response time, which sets the floor for everything after.
The lazy-loading mistake is worth calling out because it is so common. Blanket lazy loading applied across a template catches the hero image, adding hundreds of milliseconds before the browser even requests it. Images above the fold should load eagerly; only offscreen images benefit.
How much does server response time matter?
It sets a hard floor. LCP cannot occur before the document arrives, so a Time to First Byte of 1.2 seconds leaves only 1.3 seconds of the 2.5-second budget for everything else. Caching, a content delivery network and reducing server work are prerequisites rather than refinements.
This is where sites with heavy server-side rendering or uncached database queries lose before the browser does any work at all. If TTFB is above roughly 800 milliseconds, address that before optimising images, because no amount of front-end work recovers the lost time.
Do web fonts affect LCP?
Yes, when the LCP element is text. A font loading late either blocks rendering or causes a swap that re-times the paint. Preloading the font file, using font-display swap and subsetting to the characters you need all reduce the delay between first paint and final LCP.
Self-hosting fonts usually beats third-party hosting now, because browser cache partitioning removed the cross-site caching benefit that once justified shared CDNs. A self-hosted, preloaded, subset font on your own origin avoids an extra connection entirely.
Key takeaways
- Identify the LCP element before changing anything, and check mobile separately.
- Never lazy-load the LCP image; preload it with fetchpriority high instead.
- Time to First Byte sets a floor that front-end optimisation cannot recover.
- Render-blocking CSS and JavaScript above the element delay the paint directly.
- When the LCP element is text, preload and subset the font that renders it.
Frequently asked questions
- Does a CDN fix LCP on its own?
- It helps by cutting network latency and often improves TTFB substantially, but it does not fix render-blocking resources, oversized images or lazy-loaded heroes. A CDN is usually necessary and rarely sufficient. Sites frequently add one and are disappointed that LCP moves less than expected.
- Should you inline critical CSS?
- It can help meaningfully when stylesheets block rendering of the LCP element. The trade-off is a larger HTML document and a maintenance burden keeping the inlined subset accurate. Try removing or deferring unnecessary CSS first, since that is simpler and often enough.
- Does image format matter much?
- Yes. Modern formats such as WebP and AVIF typically cut file size substantially against JPEG at equivalent quality, which directly reduces transfer time for the LCP resource. Serving a correctly sized image matters as much as format; a large image scaled down in CSS wastes the saving.
- Why did LCP get worse after I optimised images?
- A common cause is that the LCP element changed. Making the hero image faster can promote a different, slower element to LCP candidate, such as a late-loading heading or a block that was previously not the largest. Re-identify the element after any significant change.
Web Performance, BigBalli. We track Core Web Vitals definitions and thresholds as Google revises them, cross-checked against web.dev and Chrome developer documentation.