How to Fix Slow Largest Contentful Paint (LCP)

LCP is one image away from passing or failing

Largest Contentful Paint measures how long the biggest visible element above the fold takes to render. The threshold:

• Pass: ≤ 2.5s
• Needs improvement: 2.5–4.0s
• Fail: > 4.0s

For most sites, the LCP element is one of three things — a hero image, a hero text block, or a hero video — and one specific fix moves the score across the threshold. This post is the priority order for diagnosing and fixing LCP.

Step 1: Identify the LCP candidate

The Page Speed Grader reports the actual element flagged as the LCP candidate. The report names it directly: <img class="hero-image">, <h1>, or <div class="hero-video-container">.

Three categories of LCP element, each with a different fix:

If the LCP is over 2.5s and the candidate is something else (a footer image, a deeply-nested div), something is genuinely wrong with the page render order. That's a deeper investigation — start by checking that the hero element is in the initial HTML, not injected by JavaScript.

Step 2: The five fixes in priority order

Fix 1: Image format and size

If the LCP candidate is an image, the fastest fix is image optimization.

Convert to WebP or AVIF. WebP is roughly 60-80% smaller than equivalent-quality JPEG. AVIF is even smaller (roughly 80% smaller than JPEG) but has slightly worse browser support — use the <picture> element with both:

<picture>
  <source srcset