What is Largest Contentful Paint (LCP)?

LCP measures the time from when the page starts loading to when the largest visible content element (image, video, or text block) is fully rendered on screen. Google considers LCP under 2.5 seconds as 'good.'

What causes poor LCP?

Common causes include slow server response times (high TTFB), render-blocking JavaScript and CSS, slow resource load times for hero images or fonts, and client-side rendering that delays content.

How much does LCP affect SEO rankings?

LCP is one of the three Core Web Vitals that Google uses as a ranking signal. Pages with LCP over 4 seconds are flagged as 'poor' and may be penalized in search results compared to faster competitors.

What is a good LCP score?

Under 2.5 seconds is rated 'good,' between 2.5 and 4 seconds 'needs improvement,' and over 4 seconds is 'poor.' Aim for under 2.5s on both mobile and desktop.

Does lazy loading the hero image hurt LCP?

Yes. The LCP element should never be lazy-loaded because it delays rendering of the most important content. Use eager loading and fetchpriority='high' for the LCP image.

Fix Largest Contentful Paint (LCP): Speed Up Your Biggest Element

Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element on your page to render. It's one of Google's three Core Web Vitals and directly affects your search rankings and user experience.

Why LCP Matters

A slow LCP means your users stare at a blank or incomplete page:

LCP Time	Rating	User Impact
≤ 2.5s	Good	Users see content quickly, low bounce rate
2.5–4s	Needs Improvement	Noticeable delay, some users leave
> 4s	Poor	High bounce rate, SEO penalty

Research shows that a 1-second improvement in LCP can increase conversions by up to 27%.

What Element Is Your LCP?

LCP typically corresponds to one of these:

Hero image — the banner or product image above the fold
Hero video poster — the thumbnail of an auto-playing video
Large text block — an <h1> or prominent paragraph
Background image via CSS background-image

Run a Lighthouse audit or check Chrome DevTools → Performance → Timings to identify your specific LCP element.

How to Fix Slow LCP

1. Optimize Server Response Time (TTFB)

The LCP clock starts when the browser requests the page. A slow server eats into your budget.

Target: TTFB under 800ms

Use a CDN to serve pages from edge locations
Implement page caching (static generation, ISR, or full-page cache)
Upgrade your hosting if the server itself is slow
Optimize database queries and API calls

2. Preload the LCP Resource

Tell the browser to fetch the LCP image immediately rather than waiting to discover it during parsing:

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

For responsive images:

<link
  rel="preload"
  as="image"
  href="/hero-mobile.webp"
  media="(max-width: 768px)"
/>
<link
  rel="preload"
  as="image"
  href="/hero-desktop.webp"
  media="(min-width: 769px)"
/>

3. Don't Lazy-Load the LCP Image

This is one of the most common mistakes:

<!-- ❌ BAD — delays the most important image -->
<img src="hero.webp" loading="lazy" />

<!-- ✅ GOOD — loads immediately with high priority -->
<img src="hero.webp" loading="eager" fetchpriority="high" />

4. Eliminate Render-Blocking Resources

CSS and synchronous JavaScript in the <head> block rendering. See our guide on fixing render-blocking resources.

Inline critical CSS
Defer non-critical CSS with media="print" swap
Add defer or async to non-essential scripts

5. Use Modern Image Formats

Switch from JPEG/PNG to WebP or AVIF:

Format	Savings vs. JPEG
WebP	25–35% smaller
AVIF	40–50% smaller

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero" width="1200" height="600" />
</picture>

6. Set Explicit Dimensions

Always include width and height on your LCP image to prevent layout shifts and allow the browser to allocate space immediately:

<img src="hero.webp" width="1200" height="600" alt="Hero image" />

Measuring LCP

Lab data: Lighthouse, WebPageTest, Chrome DevTools Performance panel
Field data: Chrome User Experience Report (CrUX), web-vitals JavaScript library
BadPageSpeed: Monitors LCP continuously and alerts you when it regresses

Quick Wins Checklist

Identify your LCP element in DevTools
Preload it with fetchpriority="high"
Remove loading="lazy" from the LCP image
Serve WebP/AVIF with proper sizing
Inline critical CSS, defer the rest
Target TTFB under 800ms

Why LCP Matters

A slow LCP means your users stare at a blank or incomplete page:

LCP Time	Rating	User Impact
≤ 2.5s	Good	Users see content quickly, low bounce rate
2.5–4s	Needs Improvement	Noticeable delay, some users leave
> 4s	Poor	High bounce rate, SEO penalty

Research shows that a 1-second improvement in LCP can increase conversions by up to 27%.

What Element Is Your LCP?

LCP typically corresponds to one of these:

Hero image — the banner or product image above the fold
Hero video poster — the thumbnail of an auto-playing video
Large text block — an <h1> or prominent paragraph
Background image via CSS background-image

Run a Lighthouse audit or check Chrome DevTools → Performance → Timings to identify your specific LCP element.

How to Fix Slow LCP

1. Optimize Server Response Time (TTFB)

The LCP clock starts when the browser requests the page. A slow server eats into your budget.

Target: TTFB under 800ms

Use a CDN to serve pages from edge locations
Implement page caching (static generation, ISR, or full-page cache)
Upgrade your hosting if the server itself is slow
Optimize database queries and API calls

2. Preload the LCP Resource

Tell the browser to fetch the LCP image immediately rather than waiting to discover it during parsing:

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

For responsive images:

<link
  rel="preload"
  as="image"
  href="/hero-mobile.webp"
  media="(max-width: 768px)"
/>
<link
  rel="preload"
  as="image"
  href="/hero-desktop.webp"
  media="(min-width: 769px)"
/>

3. Don't Lazy-Load the LCP Image

This is one of the most common mistakes:

<!-- ❌ BAD — delays the most important image -->
<img src="hero.webp" loading="lazy" />

<!-- ✅ GOOD — loads immediately with high priority -->
<img src="hero.webp" loading="eager" fetchpriority="high" />

4. Eliminate Render-Blocking Resources

CSS and synchronous JavaScript in the <head> block rendering. See our guide on fixing render-blocking resources.

Inline critical CSS
Defer non-critical CSS with media="print" swap
Add defer or async to non-essential scripts

5. Use Modern Image Formats

Switch from JPEG/PNG to WebP or AVIF:

Format	Savings vs. JPEG
WebP	25–35% smaller
AVIF	40–50% smaller

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero" width="1200" height="600" />
</picture>

6. Set Explicit Dimensions

Always include width and height on your LCP image to prevent layout shifts and allow the browser to allocate space immediately:

<img src="hero.webp" width="1200" height="600" alt="Hero image" />

Measuring LCP

Lab data: Lighthouse, WebPageTest, Chrome DevTools Performance panel
Field data: Chrome User Experience Report (CrUX), web-vitals JavaScript library
BadPageSpeed: Monitors LCP continuously and alerts you when it regresses

Quick Wins Checklist

Identify your LCP element in DevTools
Preload it with fetchpriority="high"
Remove loading="lazy" from the LCP image
Serve WebP/AVIF with proper sizing
Inline critical CSS, defer the rest
Target TTFB under 800ms

Why LCP Matters

What Element Is Your LCP?

How to Fix Slow LCP

1. Optimize Server Response Time (TTFB)

2. Preload the LCP Resource

3. Don't Lazy-Load the LCP Image

4. Eliminate Render-Blocking Resources

5. Use Modern Image Formats

6. Set Explicit Dimensions

Measuring LCP

Quick Wins Checklist

Ready to stop wasting ad spend?

Share this article

Related Articles

How to Debug a Jumping UI to Fix CLS

How to Optimize Your Above the Fold Content for LCP

Fix Cumulative Layout Shift (CLS): Stop Your Page From Jumping

Fix Unused CSS: Remove Dead Stylesheets for Faster Pages

Share this article

Related Articles

How to Debug a Jumping UI to Fix CLS

How to Optimize Your Above the Fold Content for LCP

Fix Cumulative Layout Shift (CLS): Stop Your Page From Jumping

Fix Unused CSS: Remove Dead Stylesheets for Faster Pages

Why LCP Matters

What Element Is Your LCP?

How to Fix Slow LCP

1. Optimize Server Response Time (TTFB)

2. Preload the LCP Resource

3. Don't Lazy-Load the LCP Image

4. Eliminate Render-Blocking Resources

5. Use Modern Image Formats

6. Set Explicit Dimensions

Measuring LCP

Quick Wins Checklist

Ready to stop wasting ad spend?

Share this article

Related Articles

How to Debug a Jumping UI to Fix CLS

How to Optimize Your Above the Fold Content for LCP

Fix Cumulative Layout Shift (CLS): Stop Your Page From Jumping

Fix Unused CSS: Remove Dead Stylesheets for Faster Pages

Share this article

Related Articles

How to Debug a Jumping UI to Fix CLS

How to Optimize Your Above the Fold Content for LCP

Fix Cumulative Layout Shift (CLS): Stop Your Page From Jumping

Fix Unused CSS: Remove Dead Stylesheets for Faster Pages