Fix-it guide

Optimize Largest Contentful Paint (LCP)

Largest Contentful Paint measures how long it takes for the biggest visible element on your page, usually the hero image or main headline, to finish rendering.

High impactHalf a dayPerformance (Core Web Vitals)

What it is

Largest Contentful Paint measures how long it takes for the biggest visible element on your page, usually the hero image or main headline, to finish rendering. Google considers under 2.5 seconds "good," 2.5–4 seconds "needs improvement," and over 4 seconds "poor." LCP is one of the three Core Web Vitals.

Why it matters

A slow LCP means visitors stare at a blank or partial screen and bounce. Google measures LCP in the wild (Chrome User Experience Report) and uses it as a ranking factor. Cutting LCP from 4s to 2s consistently moves rankings and lifts conversion on the same page.

How to fix it

  1. Identify the LCP element

    Open Chrome DevTools > Performance > Record a page load. The LCP candidate is highlighted in the timeline. Usually it is your hero image or H1.

  2. Preload the LCP image

    If your LCP is a hero image, tell the browser to download it early with <link rel="preload">. This is the single biggest LCP win on most sites.

    <head>
  <link
    rel="preload"
    as="image"
    href="/hero.webp"
    fetchpriority="high"
  />
</head>

  3. Serve responsive, modern image formats

    Convert your hero to WebP or AVIF, usually 30–60% smaller than JPEG at the same quality. Serve a phone-sized variant to phones using srcset.

    <img
  src="/hero-1200.webp"
  srcset="/hero-600.webp 600w, /hero-1200.webp 1200w, /hero-2000.webp 2000w"
  sizes="(max-width: 700px) 600px, (max-width: 1300px) 1200px, 2000px"
  width="1200"
  height="800"
  alt="..."
  fetchpriority="high"
/>

  4. Defer or code-split non-critical JS

    Render-blocking JavaScript pushes LCP later. Add `defer` to non-critical scripts, lazy-load anything below the fold, and split large bundles. In Next.js, use `dynamic()` with `{ ssr: false }` for client-only widgets.

    <!-- Add defer so the script doesn't block render -->
<script src="/analytics.js" defer></script>

  5. Use a CDN

    Cloudflare, Vercel Edge, or Cloudfront serve your assets from a node close to the visitor. For US-only audiences this matters less; for global audiences it can shave a second off LCP.

  6. Eliminate slow server response time

    If TTFB (Time to First Byte) is over 800ms, no amount of frontend optimization will save your LCP. Cache pages aggressively, move from shared to managed hosting, and optimize slow database queries.

How to verify the fix

Run PageSpeed Insights (pagespeed.web.dev) for the URL on mobile. The Core Web Vitals panel should show LCP under 2.5s. Re-run the Drive Top-Line audit a few minutes after deploying changes, LCP is sampled fresh on each run.

Further reading

Confirm the fix

Run a fresh audit to make sure the issue is gone.

We’ll re-grade every category and confirm this issue is no longer firing.

Run a fresh audit
← All fix-it guidesSee the SEO glossary