How to Fix LCP (Largest Contentful Paint) — Complete Guide

Largest Contentful Paint (LCP) measures how long it takes for the largest visible element on the page (usually a hero image, heading, or video poster) to render. Google considers LCP good if it loads within 2.5 seconds. Poor LCP (>4.0s) directly hurts your search ranking.

LCP is one of the three Core Web Vitals that Google uses as a ranking signal. It's also the metric most correlated with user-perceived load speed — users judge a page by when the "main content" appears.

Add a preload link in your so the browser starts downloading the LCP image immediately, before CSS is parsed:

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

For Next.js, use the priority prop on next/image:

import Image from 'next/image'

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

This alone often cuts LCP by 1-2 seconds.

Convert hero images to WebP or AVIF. WebP is 25-35% smaller than JPEG at the same quality. Use the element for fallback:

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

Always specify width and height to prevent layout shift (CLS).

Move non-critical CSS below the fold using media="print" hack or async loading:

<!-- Critical CSS inline -->
<style>/* only above-the-fold styles */</style>

<!-- Non-critical CSS loaded async -->
<link rel="stylesheet" href="/non-critical.css" media="print" onload="this.media='all'" />

For JavaScript, use defer or async attributes, and move heavy scripts below the fold.

Target TTFB under 200ms:

- Use a CDN (Vercel, Cloudflare, Fastly) to serve from edge locations

- Enable compression (gzip/brotli) on your server

- Use stale-while-revalidate caching headers

- Optimize database queries — add indexes, reduce N+1 queries

- Use Incremental Static Regeneration (ISR) in Next.js for dynamic pages

Use these tools to measure and track LCP: