Core Web Vitals: LCP Optimization: Best Practices

What Is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) measures how long it takes for the largest visible content element on a page to fully render. This is typically a hero image, a large text block, or a video poster. Google considers LCP one of the three Core Web Vitals and uses it as a ranking signal.

The performance thresholds are:

Good: LCP under 2.5 seconds
Needs Improvement: 2.5 to 4.0 seconds
Poor: Over 4.0 seconds

If your LCP consistently exceeds 2.5 seconds, you are leaving rankings and conversions on the table.

What Determines Your LCP Score

LCP is affected by four main factors:

Server response time — How quickly your server delivers the initial HTML
Resource load time — How fast the LCP element (image, font, video) downloads
Render-blocking resources — CSS and JavaScript that delay rendering
Client-side rendering — JavaScript that must execute before the LCP element appears

Optimizing LCP means attacking all four of these factors systematically.

Optimize Server Response Time (TTFB)

The clock starts when the browser sends a request and does not stop until the LCP element is fully rendered. Every millisecond of server delay pushes LCP further out. Common improvements:

Use a Content Delivery Network (CDN) to serve content from edge locations close to users. See our guide on CDN strategies for SEO.
Implement server-side caching to avoid regenerating pages on every request
Optimize database queries that slow down page generation
Upgrade your hosting if your current plan cannot handle traffic efficiently
Use HTTP/2 or HTTP/3 to reduce connection overhead

For a comprehensive approach, read our dedicated guide on TTFB optimization strategies.

Optimize the LCP Element

For Images (Most Common LCP Element)

Images are the LCP element on most pages. Optimize them aggressively:

Use modern formats: WebP and AVIF offer 25-50% smaller file sizes compared to JPEG and PNG with equivalent quality.

Resize appropriately: Serve images at the exact dimensions needed, not larger. Use responsive images with srcset to deliver appropriate sizes for different viewports.

Compress aggressively: Use lossy compression at quality levels between 75-85% for most images. The quality difference is invisible to most users but the file size difference is significant.

Preload the LCP image: Add a preload hint in your HTML head:

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

Set explicit dimensions: Always include width and height attributes on images to prevent layout shifts and allow the browser to allocate space immediately.

For a complete guide, see our article on image optimization for SEO and performance.

For Text Elements

When a large heading or paragraph is the LCP element:

Optimize font loading: Use font-display: swap to show text immediately in a fallback font while the custom font loads. Better yet, use font-display: optional to avoid layout shifts entirely.

Preload critical fonts:

<link rel="preload" as="font" type="font/woff2" href="/font.woff2" crossorigin />

Reduce CSS blocking: Inline critical CSS needed for above-the-fold content and defer the rest. Learn more in our guide on font optimization for web performance.

Eliminate Render-Blocking Resources

Critical CSS Inlining

Extract the CSS needed to render above-the-fold content and inline it directly in the HTML <head>. Load the remaining CSS asynchronously:

<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'" />

JavaScript Optimization

Defer non-critical JavaScript using the defer or async attribute
Remove unused JavaScript — audit your bundles for dead code
Split JavaScript bundles so only the code needed for the current page loads initially
Move third-party scripts below the fold or load them after user interaction

Preconnect to Critical Origins

If your LCP element loads from a third-party domain (CDN, image service), add preconnect hints:

<link rel="preconnect" href="https://cdn.example.com" /> <link rel="dns-prefetch" href="https://cdn.example.com" />

Avoid Client-Side Rendering for LCP Content

If your LCP element depends on JavaScript to render (common in React/Vue/Angular applications), it cannot appear until:

HTML downloads
JavaScript bundle downloads
JavaScript parses and executes
API calls complete (if any)
DOM updates to show the content

This chain of dependencies makes achieving good LCP nearly impossible with client-side rendering. Use server-side rendering or static site generation to ensure the LCP element is in the initial HTML response.

Measuring LCP

Lab Data

Lighthouse — Chrome DevTools Lighthouse audit
PageSpeed Insights — Google’s web performance tool
WebPageTest — Detailed waterfall analysis showing exactly when LCP occurs

Field Data (Real User Metrics)

Chrome User Experience Report (CrUX) — Real user data aggregated by Google
Google Search Console Core Web Vitals report — Shows your site’s CWV performance
Web Vitals JavaScript library — Measure LCP from your own users in production

Field data is what Google uses for ranking, so prioritize improving your CrUX numbers over lab scores.

Common LCP Issues and Solutions

Slow Hero Images

Problem: A large hero image takes 3+ seconds to load. Solution: Compress to WebP/AVIF, resize to exact viewport dimensions, preload with <link rel="preload">, and use a CDN.

Render-Blocking CSS Frameworks

Problem: A large CSS framework (Bootstrap, Tailwind without purging) blocks rendering. Solution: Purge unused CSS, inline critical CSS, and load the rest asynchronously.

Third-Party Script Delays

Problem: Analytics, chat widgets, or ad scripts delay rendering. Solution: Load non-essential third-party scripts after the page becomes interactive, using defer, dynamic import, or intersection observer triggers.

API-Dependent Content

Problem: The main content loads from an API call after initial page load. Solution: Implement server-side rendering to include content in the initial HTML. Cache API responses at the edge.

Unoptimized Fonts

Problem: Custom fonts delay text rendering, making text-based LCP slow. Solution: Preload fonts, use font-display: swap, and limit the number of font files loaded.

LCP Optimization Checklist

Work through this checklist systematically:

TTFB is under 200ms for key landing pages
LCP image is preloaded and uses modern formats (WebP/AVIF)
LCP image is properly sized for the viewport
Critical CSS is inlined in the HTML head
Non-critical CSS loads asynchronously
JavaScript is deferred or async
Third-party scripts load after LCP
Fonts are preloaded with appropriate font-display values
No client-side rendering dependency for LCP content
CDN is configured for static assets

Key Takeaways

LCP is the most impactful Core Web Vital because it directly reflects how quickly users see your main content:

Start with your server — reduce TTFB through caching, CDNs, and server optimization
Optimize the LCP element itself — compress images, preload resources, and use modern formats
Remove rendering bottlenecks — inline critical CSS, defer JavaScript, and eliminate render-blocking resources
Measure with real user data — CrUX and field metrics matter more than lab scores
Test continuously as new code, content, and third-party scripts can regress your scores

A fast LCP means users see content quickly, stay engaged longer, and search engines reward you with better visibility. Combined with optimizing CLS and INP, strong LCP performance completes your Core Web Vitals optimization strategy.