The main content takes too long to appear

Largest Contentful Paint measures how long a visitor waits before the biggest thing on the page shows up. Google uses it directly as a ranking signal, and visitors leave well before it finishes on a slow page.

When someone lands on your page, there's usually one big element that matters most — a hero image, a headline, a banner. Largest Contentful Paint (LCP) is the moment that biggest element finishes loading and becomes visible. If that takes too long, your visitor is staring at a blank or half-built page and wondering whether anything is going to happen.

A good target is under 2.5 seconds for most visitors.

Why it matters

A slow LCP means people wait, and waiting people leave — many before the page is even usable. Because Google treats LCP as a direct ranking signal, a slow score can also push your pages further down in search results, costing you traffic you never see.

How to fix it

The biggest element is usually an image, so most fixes centre on getting that image (and the code around it) to load sooner.

1. Compress and correctly size the main image

Serve the image at the size it's actually displayed, in a modern format like WebP or AVIF. A 4000px photo squeezed into a 800px space wastes load time.

2. Preload the main image

Tell the browser to fetch it early instead of discovering it late:

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

3. Don't lazy-load the main image

Lazy loading is good for images below the fold, but it delays anything visible on arrival. Make sure your hero image loads eagerly:

<img src="/images/hero.webp" loading="eager" fetchpriority="high" alt="...">

4. Remove render-blocking CSS and JavaScript

Large stylesheets and scripts loaded before the content force the browser to wait. Defer or minify what isn't needed immediately.

WordPress

Install a caching and optimisation plugin (for example WP Rocket, LiteSpeed Cache, or W3 Total Cache). Enable page caching, CSS/JS minification, and "delay JavaScript" or "defer" options. Use an image plugin (such as ShortPixel or Imagify) to compress and convert images to WebP, and confirm your hero image is excluded from lazy loading.

Nginx

Turn on compression and long cache lifetimes for static assets:

gzip on;
gzip_types text/css application/javascript image/svg+xml;

location ~* \.(jpg|jpeg|png|webp|css|js)$ {
    expires 30d;
    add_header Cache-Control "public";
}

Apache

Enable compression and caching in .htaccess:

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/css application/javascript image/svg+xml
</IfModule>

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/webp "access plus 30 days"
    ExpiresByType text/css "access plus 30 days"
    ExpiresByType application/javascript "access plus 30 days"
</IfModule>

Cloudflare

Enable Auto Minify (CSS/JS), Brotli compression, and caching under the Speed and Caching sections. Turn on Polish to compress images automatically, and consider Early Hints to let browsers preload key resources sooner.

How to check it worked

Run the page through Google PageSpeed Insights or the Lighthouse tab in Chrome's developer tools and confirm the reported LCP is under 2.5 seconds; test on a mobile connection, since that's where slow loads hurt most.