If you’ve ever run your site through PageSpeed Insights and seen a red or orange score next to “LCP,” you’re not alone. Largest Contentful Paint is one of the three Core Web Vitals that Google uses to judge how fast a page feels to a real visitor — and for most WordPress sites, it’s the hardest one to get right.

The good news: once you understand what LCP actually measures, fixing it is mostly a matter of ticking off a short, well-known list of causes. Let’s walk through it.

What is Largest Contentful Paint?

Largest Contentful Paint (LCP) is the time it takes for the largest visible element in the initial viewport — the part of the page a visitor sees before scrolling — to finish rendering on screen.

On most pages, that “largest element” is one of:

• A hero image or banner at the top of the page
• A post’s featured image
• A large block of heading text (less common, but it happens on text-heavy landing pages)

LCP isn’t about when the page starts loading, and it isn’t about every image on the page — it’s specifically about when that one dominant, above-the-fold element becomes fully visible. Google’s Core Web Vitals guidance considers an LCP under 2.5 seconds to be “good.” Between 2.5 and 4 seconds is “needs improvement,” and anything beyond 4 seconds is “poor.”

Why does this matter beyond a score? LCP is a reasonable proxy for how quickly a visitor perceives your page as “loaded.” A slow LCP means people are staring at a blank or half-rendered page longer, which affects both user experience and, since Core Web Vitals feed into Google’s ranking signals, your SEO.

Common causes of slow LCP

Before fixing anything, it helps to know what’s actually causing the delay. In practice, slow LCP almost always comes down to one or more of these:

1. A huge, unoptimized hero image

The single most common culprit. A 3–5 MB JPEG or PNG straight out of a camera or stock photo site, displayed at a fraction of its native size, forces the browser to download far more data than it needs before it can paint that image.

2. Render-blocking CSS

Before the browser can paint anything, it has to build the page’s render tree — which means downloading and parsing your CSS first. If your theme and plugins load large stylesheets that block rendering, the browser sits idle waiting on CSS it may not even need for the content currently in view.

3. Slow server response

If your hosting or a heavy plugin stack takes a long time to generate the HTML in the first place, everything downstream — including LCP — starts later. A slow Time to First Byte (TTFB) pushes back every other timing metric.

4. The LCP image being lazy-loaded by mistake

Lazy loading is great for images below the fold — it defers them until the visitor scrolls near them, saving bandwidth. But if lazy loading is applied blindly to every image on the page, including the hero or featured image that’s visible immediately, you’ve told the browser to deliberately delay the one image it should be fetching first. This is a surprisingly common and easy-to-miss mistake, especially with “optimize everything” plugin settings.

How to fix slow LCP

Once you know the cause, the fixes are fairly direct:

• Right-size and compress the LCP image. Don’t serve a 2400px-wide image into a 800px-wide slot. Resize it to match its actual display dimensions (accounting for retina screens), and compress it well. Converting to a modern format like AVIF typically produces meaningfully smaller files than JPEG at equivalent visual quality, which directly cuts download time.
• Preload it. Adding a <link rel=”preload”> hint for the LCP image tells the browser “fetch this now, don’t wait to discover it while parsing the HTML.” This can shave a significant chunk off the time to first paint.
• Load it eagerly, not lazily. Make sure the specific image that appears in the initial viewport uses loading=”eager” (or no lazy-loading attribute at all) so the browser doesn’t artificially delay it.
• Set fetchpriority=”high” on the LCP image. This newer HTML attribute tells the browser to prioritize that image’s network request over other, less urgent resources competing for bandwidth.
• Trim your critical CSS. Identify only the CSS needed to render what’s above the fold, inline that small amount directly in the page, and defer the rest to load after first paint. This removes CSS as a blocker for your hero content specifically.

Each of these targets a different bottleneck, and most slow-LCP pages benefit from combining two or three of them at once — for example, a right-sized AVIF image that’s also preloaded and marked as high priority.

How AWP handles this automatically

Manually finding the LCP element on every template, resizing images for every breakpoint, and hand-tuning critical CSS is realistic for one page — not for an entire site with dozens of templates and thousands of images.

This is exactly what AWP (Accelerate Website Pages) is built to automate. When you run a personalized optimization, AWP identifies the actual LCP element on each page per device — because the image or heading that dominates the viewport on a phone often isn’t the same one that dominates on a desktop screen. It then prioritizes that specific element:

• It encodes a right-sized AVIF variant of the LCP image directly into your own WordPress media library, matched to the dimensions it’s actually displayed at on each device.
• It serves that image through a responsive srcset so each visitor downloads only the size their device needs.
• It applies preload and eager loading to the LCP image specifically, so it’s never accidentally caught by a blanket lazy-loading rule.
• It works out which CSS is genuinely critical for that page’s first paint, inlines it, and defers the rest — reducing render-blocking CSS without you having to hand-edit stylesheets.

Because this all runs on your own server against your own content, your images never leave your site as files — AWP’s cloud analysis only measures dimensions to decide the right sizing, and nothing about your media is retained. Every change is applied at the output layer, so your original posts, pages, and uploaded images stay untouched and the optimization is fully reversible.

If your LCP score has been stuck in the orange or red for a while, it’s rarely one big problem — it’s usually this small cluster of fixable issues stacking up. Start with the biggest lever (image size and format), work through preload and eager loading, then tidy up your critical CSS. Or let AWP handle the analysis and apply the fixes for you, per page and per device.