Skip to main content
SlapMyWeb
Slap a site
Fix Guide

How to Fix a Slow Largest Contentful Paint

Get the biggest visible element rendering within 2.5 seconds.

Medium High Impact 1-3 hours

Largest Contentful Paint measures how long the biggest visible element takes to render — usually a hero image or headline. A good score is 2.5 seconds or less at the 75th percentile of real visits. The two usual causes are a slow server response and a hero image that is oversized, lazy-loaded, or discovered late.

Why It Matters

LCP is a Core Web Vital, graded on field data from real Chrome users rather than a lab run. It is also the metric that corresponds most directly to "the page felt slow".

How to Fix

1

Identify the LCP element

Performance tooling names it. Fixing the wrong element is the most common wasted effort here — it is often not what you assume.
2

Never lazy-load it

loading="lazy" on the LCP image delays the exact element being measured. Set fetchpriority="high" on it instead.
3

Preload it

If it is referenced from CSS or added by script, the browser finds it late. A preload link starts the fetch immediately.
4

Reduce its size and fix TTFB

Serve the image at display size in a modern format, and check server response — LCP can never be faster than TTFB.

Code Fix

html
Before (broken)
<img src="/hero.jpg" loading="lazy" alt="…">
After (fixed)
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" fetchpriority="high" width="1200" height="630" alt="…">

Platform-Specific Instructions

WordPress

Some optimisation plugins lazy-load every image including the hero. Exclude above-the-fold images explicitly.

Next.js

Set priority on the next/image that is the LCP element; it adds both the preload and fetchpriority.

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs — and links each one straight to its guide.

Run a free audit
Free foreverNo signupResults in 30s