How to Fix Slow Largest Contentful Paint (LCP) on WordPress

On this page

1. What counts as a good LCP
2. Step 1: Identify your LCP element
3. Step 2: Work out which part is slow
4. Fix slow server response
5. Fix the hero image
6. Remove render-blocking CSS, JavaScript and fonts
7. Confirm the fix worked

Largest Contentful Paint (LCP) measures how long the biggest piece of content in the first screen, usually a hero image, banner or main heading, takes to appear. When it's rated "poor", visitors stare at a mostly empty screen for too long, and some of them leave. Here's how to find what's slowing LCP on a WordPress site and how to fix each cause. If you're new to the three metrics, start with Core Web Vitals explained.

What counts as a good LCP

LCP time	Google's rating
2.5 seconds or less	Good
Between 2.5 and 4 seconds	Needs improvement
More than 4 seconds	Poor

Google judges this from real visits at the 75th percentile, so most of your visitors need a good experience, not just those on fast office Wi-Fi. Mobile and desktop are rated separately. For most Indian business sites, mobile matters most, because that's where most visitors are and where phones and networks are slowest.

Step 1: Identify your LCP element

The measured element varies by page, and often between mobile and desktop.

1. Run the page through PageSpeed Insights and select the mobile results.
2. Check the field data at the top to confirm real visitors are affected, not just the lab test.
3. In the diagnostics, find the item that names the Largest Contentful Paint element: the exact image or block of text measured.
4. For more detail, record a page load in the Performance panel of Chrome DevTools and look for the LCP marker.

Common LCP elements on WordPress sites are a hero image, a slider's first slide, an Elementor section background, a post's featured image or, on mobile, a large heading or opening paragraph.

Step 2: Work out which part is slow

LCP time breaks down into four parts, and each points to a different fix:

Part	What it means	Usual fix
Server response	Time before the first byte of HTML arrives (often called TTFB)	Caching, better hosting, fewer heavy plugins
Load delay	Time between the HTML arriving and the browser starting to download the LCP image	Make the image discoverable early; raise its priority
Load duration	Time spent downloading the image itself	Smaller, compressed, correctly sized images
Render delay	Time between the content being ready and it actually appearing	Remove render-blocking CSS, JavaScript, fonts and animations

If your LCP element is text, there's no image to download, so the time is usually split between server response and render delay.

Fix slow server response

If the HTML itself takes a long time to arrive, everything else waits. On WordPress, the usual causes are:

• No page caching: without it, WordPress builds every page from scratch with PHP and database queries. A caching plugin or your host's built-in cache serves a ready-made copy instead. See WordPress caching explained.
• Overloaded or distant hosting: cheap shared servers get busy, and a server on another continent adds delay for visitors in India.
• Heavy plugins: some run slow database queries or call external services on every page load.
• Outdated PHP: newer supported PHP versions are generally faster, after testing compatibility.

A quick check: if even cached pages are slow to start arriving, the hosting or server location is the likely problem, not just your plugins.

Fix the hero image

When the LCP element is an image, most gains come from getting it discovered early and making it small.

Don't lazy-load it

Lazy loading helps images further down the page but delays the first one. WordPress tries to skip lazy loading for the first large image, but page builders and optimisation plugins can override this. Most let you exclude above-the-fold images.

Give it high priority

Adding fetchpriority="high" to the hero image tells the browser to download it ahead of less important files. Recent WordPress versions add this automatically to the image they guess is the main one, so check the page source to confirm it's on the right image. Use it on one image only.

Avoid CSS background images for the hero

Background images set in CSS, which is how many Elementor sections and theme headers work, can't be found until the stylesheet has downloaded and been processed. That creates a long load delay. Where possible, use a normal image element for the hero. If it has to be a background, preload that one image.

Preload carefully

Preloading helps only for the resource that really is the LCP element. Preloading several images, fonts and scripts makes them compete for bandwidth and can slow LCP down. If the image uses responsive sizes, the preload must use the same sizes, or the browser may download two versions.

Make it small and replace sliders

Resize the image to its displayed size, compress it and serve WebP or AVIF, with a smaller version for phones; image optimisation for WordPress covers this. If the hero is a slider, its first slide often can't appear until the slider's JavaScript has run. A single strong image with a clear headline loads faster and is often clearer anyway.

Remove render-blocking CSS, JavaScript and fonts

If your LCP element is a heading, or the image has downloaded but still appears late, the problem is render delay. The browser won't paint the page until it has processed the stylesheets and scripts that block rendering.

• CSS: reduce unused CSS and consider critical CSS, the small set of styles the first screen needs, so the rest can load later. Test carefully, as removing CSS wrongly breaks layouts.
• JavaScript: defer scripts the first screen doesn't need, and avoid scripts in the page head that hold up rendering.
• Fonts: use one or two families with only the weights you need, host them on your own domain where practical, use font-display: swap so text shows in a fallback font immediately, and preload the main font if the hero heading uses it.
• Entrance animations: a hero heading or image set to fade or slide in stays invisible until the animation runs, which pushes LCP back. Keep animations out of the first screen.

Confirm the fix worked

• Clear your caching plugin and any CDN cache, then re-test several times, as lab results vary between runs
• Check mobile and desktop, and a few page types: home, service and blog pages
• Field data covers a rolling 28-day period, so real-user LCP improves gradually; use "Validate fix" in Search Console's Core Web Vitals report to track it

LCP usually has more than one cause, and fixes like critical CSS are easy to get wrong. My WordPress speed optimisation service targets your specific Core Web Vitals issues and shows before-and-after results. For Elementor hero sections that need rebuilding more efficiently, see Elementor development.