How to Improve LCP (Largest Contentful Paint)

LCP (Largest Contentful Paint) is the time until your largest above-the-fold element finishes rendering. It is the Core Web Vital most sites fail, and usually the highest-impact one to fix because the same changes also speed up the whole page. The target is 2.5 seconds or less at the 75th percentile of real users.

What "largest element" actually means

It is the biggest image, video poster, background image, or block of text visible without scrolling. On most pages it is the hero image or the main headline. Knowing which element is your LCP is the first step — PageSpeed Insights and DevTools both tell you.

The common causes of slow LCP

• Slow server response (high TTFB) — the page takes too long to even start arriving.
• Render-blocking CSS and JavaScript — the browser must download and process them before it can paint.
• Large, unoptimized images — a 2MB hero image is a guaranteed LCP problem.
• The LCP resource discovered late — the browser does not learn it needs the image until deep into parsing.
• Client-side rendering — the content does not exist until JavaScript builds it.

How to fix it, in order

1. Cut server response time. Page caching plus a CDN is the single biggest lever — it often moves LCP from "poor" to "good" on its own. (See speeding up WordPress.)
2. Optimize the LCP image. Compress it, serve modern formats (WebP/AVIF), size it to the dimensions actually displayed, and add fetchpriority="high" so the browser fetches it first.
3. Preload the LCP resource with a <link rel="preload"> so it is discovered immediately.
4. Never lazy-load the LCP image. Lazy-loading is for below-the-fold images; lazy-loading the hero delays the very thing being measured.
5. Remove render-blocking resources. Minify and defer non-critical CSS/JS; inline the critical CSS for above-the-fold content.
6. Server-render key content so the LCP element is in the initial HTML, not built by JavaScript.

Common mistakes

• Optimizing lab score while field LCP stays poor — chase field data.
• Lazy-loading every image, including the hero.
• Compressing the image but leaving a 3-second server response untouched.

How to measure progress

Lab improvements (PageSpeed/Lighthouse) appear immediately; field LCP in Search Console updates over a rolling ~28-day window as real-user data accumulates, so give it a few weeks after a fix before judging.