How to Fix Largest Contentful Paint (LCP) and Speed Up Your Site

lcplargest-contentful-paintcore-web-vitalswebsite-speedperformance-optimization
Performance metrics dashboard showing website speed data

Your LCP score isn't about your whole page. It's about one element - the largest visible content when your page first loads. If that element is slow, your score tanks. Everything else is noise.

Google uses LCP as one of the three Core Web Vitals (alongside CLS and INP) because it closely matches what users perceive as "this page loaded." A good LCP is under 2.5 seconds. Anything over 4 seconds is considered poor.

What counts as LCP

Not everything on your page can be the LCP element. Google only considers:

  • Images: <img> elements, <image> inside SVG, CSS background-image
  • Video poster images: The thumbnail shown before video plays
  • Block-level text elements: Large headings or paragraphs

What doesn't count: icons, logos below the fold, lazy-loaded content that appears later.

The key insight: it's always the largest content above the fold at the moment the page becomes stable. Usually it's your hero image or main heading.

Find your LCP element

You have two options:

Option 1: DevTools

  1. Open Chrome DevTools
  2. Go to Performance tab
  3. Record a page load
  4. Look in the Timings section for "LCP"
  5. Click it to see which element triggered it

Option 2: PageSpeedFix

Run your URL through PageSpeedFix - we highlight the exact element causing your LCP score, along with specific fixes for your tech stack.

The 4 reasons your LCP is slow

1. The resource is too large

This is the most common cause. If your hero image is 2MB, it doesn't matter how fast your server is - users on average connections will wait.

What to do:

  • Compress images to under 200KB for hero images
  • Use modern formats: WebP saves 25-30% over JPEG, AVIF saves even more
  • Serve appropriately sized images for the viewport
<img
  src="hero.webp"
  srcset="hero-400.webp 400w,
          hero-800.webp 800w,
          hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  alt="Hero image"
  width="1200"
  height="600"
/>

I use Squoosh for one-off compressions and sharp in build pipelines.

2. The resource loads too late

Even a small, optimized image will hurt LCP if the browser doesn't start loading it until late.

Common mistakes:

  • Lazy-loading your hero image (never do this)
  • Not preloading the LCP image
  • Loading the image via JavaScript or CSS

What to do:

Add a preload hint in your <head>:

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

For Next.js, use the priority prop:

<Image src="/hero.jpg" priority alt="Hero" />

For Nuxt, use preload:

<NuxtImg src="/hero.jpg" preload />

And make sure you're NOT using loading="lazy" on your LCP image.

3. Render-blocking CSS and JavaScript

The browser won't paint anything until it has parsed all CSS in the <head>. If you have 500KB of CSS, that's a problem.

What to do:

  • Inline critical CSS (the CSS needed for above-the-fold content)
  • Defer non-critical CSS
  • Use async or defer on non-essential scripts

Honestly, critical CSS tools are finicky. Start simpler: just audit your CSS and remove what you don't need. Tools like PurgeCSS can help.

4. Slow server response (TTFB)

If your server takes 2 seconds to respond, your LCP can't be under 2 seconds. Simple math.

What to do:

  • Use a CDN for static assets
  • Enable server-side caching
  • Consider edge rendering (Vercel Edge, Cloudflare Workers)

This one's harder to fix - it might require infrastructure changes. But check your TTFB first. If it's under 600ms, focus on the other issues.

Quick checklist

Before you go deeper, run through this:

  • Is your LCP image under 200KB?
  • Is it using a modern format (WebP/AVIF)?
  • Is it preloaded or using priority?
  • Is loading="lazy" removed from it?
  • Is your render-blocking CSS minimal?
  • Is your TTFB under 600ms?

If you can check all of these, your LCP should be in good shape.

Frequently Asked Questions

What is a good LCP score?

A good LCP is under 2.5 seconds. Scores between 2.5-4 seconds need improvement, and anything over 4 seconds is considered poor. These thresholds apply to both mobile and desktop.

How do I find my LCP element?

The fastest way is to run your URL through PageSpeedFix - we highlight the exact element and give you framework-specific fixes. You can also use Chrome DevTools: open the Performance tab, record a page load, and look for "LCP" in the Timings section.

Does LCP affect SEO?

Yes. LCP is one of Google's three Core Web Vitals, which are ranking signals. Poor LCP can hurt your search rankings, especially when competing against sites with better performance.

Why is my LCP different on mobile vs desktop?

Mobile tests simulate slower devices and connections. A mid-tier phone on 4G will always load slower than a desktop on broadband. Optimize for mobile first since that's typically the harder target.

Should I lazy load my hero image?

Never lazy load your LCP image. Lazy loading delays when the browser fetches the image, directly hurting LCP. Use preload or framework-specific priority hints instead.

What's next

Not sure which of these is your actual problem? Run your site through PageSpeedFix - we'll identify your LCP element, tell you exactly what's slowing it down, and give you copy-paste fixes for your specific framework.

All posts