Skip to main content
SlapMyWeb
Slap a site

Performance fix

How to Fix a Slow Largest Contentful Paint

Get the biggest visible element rendering within 2.5 seconds.

Difficulty
Medium
Impact
High
Time
1-3 hours

Before

<img src="/hero.jpg" loading="lazy" alt="…">

After

<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" fetchpriority="high" width="1200" height="630" alt="…">
Before and after code for: How to Fix a Slow Largest Contentful Paint

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 it

  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.

The code

Beforehtml
<img src="/hero.jpg" loading="lazy" alt="…">
Afterhtml
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" fetchpriority="high" width="1200" height="630" alt="…">

On your platform

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.

Sources

More fixes

Performance

How to Minify Your CSS

Strip comments and whitespace from stylesheets to cut their size by 30-50%.

Performance

How to Minify Your JavaScript

Compress JS by removing comments, whitespace and shortening names: often a 40-60% reduction.

Performance

How to Lazy-Load Off-Screen Images

Defer images below the fold so they don't compete with the initial render.

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 signupLive scan progress