Fix Slow LCP on a WordPress Theme: Find the Hero, Then Clear Its Path

What slow LCP looks like before anyone measures it

The page header appears, then a blank band where the big photo belongs, then the photo drops in. Or the headline stays invisible while everything around it is ready. Owners also meet the problem as a red LCP number on mobile in PageSpeed Insights, or as a poor URL group in Search Console. Desktop often passes while phones fail, because phones get slower networks and frequently the same oversized file.

Google's thresholds and its four-part breakdown of LCP are explained in WordPress vs Next.js LCP. This page assumes you want your own number down this week, on the theme you already have. For problems other than speed, start at the troubleshooting hub.

Name the element before you change a single setting

Run the slow URL through PageSpeed Insights and read its LCP diagnostic. It names the element, shows a snippet of its markup and breaks its time into phases. Then confirm in Chrome DevTools: the Performance panel in recent versions shows the LCP element live as the page loads, and a recorded trace marks the exact moment it painted.

• A hero image in an img tag is the friendliest case. Everything below applies.
• A builder section background is common and harder, because the browser finds it only after the CSS arrives.
• The first slide of a slider is usually late twice: discovered by script, then faded in.
• A heading or paragraph means fonts and render-blocking CSS are the suspects, not images.
• A cookie banner's text can be the largest element on a phone. Overlaying it differently or shortening it changes the result.

Check the element on every key template. A blog post and a product page often have different LCP elements from the homepage, and each needs its own fix.

Causes in the order they usually cost time

1. The hero is lazy-loaded

Lazy loading tells the browser to wait until an image nears the viewport. For the hero, that wait is pure loss. WordPress core skips lazy loading on the first few images it outputs, but themes and plugins run their own systems. Flatsome applies Smart Lazy Loading to backgrounds and images, Bricks can lazy-load images, backgrounds and videos, and Blocksy has a lazy load toggle for theme images. Check: view the page source and find the hero's tag. A loading attribute set to lazy, or the real address parked in a data attribute, means it is being held back.

2. The browser cannot see the hero in the HTML

A CSS background, a slider that builds slides with JavaScript, or an entrance animation that hides the element until a script reveals it all delay discovery or painting. Check: search the raw HTML, not the inspected page, for the image file name. If it is missing, or appears only inside a stylesheet, the browser finds it late.

3. The server is slow to start

Nothing paints before the first byte. Check: in the DevTools Network panel, select the document request and read the waiting time for the server's response. Compare a cached page with an uncached one; a big gap means caching works but misses often, and a slow cached page means the cache is not serving at all.

4. The file is too big

A 3,000-pixel photo shown in a phone-width strip wastes most of its bytes. Check: the Network panel shows the file's size and dimensions. Compare them with the size it displays at.

5. CSS and fonts block the paint

When the LCP element is text, or the image has arrived but nothing has painted, stylesheets and fonts are holding the screen. Check: the render-blocking list in PageSpeed Insights, and the font requests in the Network panel. Theme fonts not loading covers font delivery.

Preload and fetchpriority, used with restraint

Once the hero is a real image and no longer lazy, tell the browser it matters. Adding fetchpriority set to high on the hero's img tag raises its place in the download queue. WordPress core already adds that attribute to the image it judges most likely to be the LCP element, but only for images core outputs, never for a builder's background.

A preload link in the page head goes further: it starts the download before the browser even reaches the image. Use it when the hero sits in CSS or is added by script. For responsive images, the preload needs matching imagesrcset and imagesizes values, or the browser fetches one file for the preload and another for the page. Some themes do this for you: WoodMart has a Preload LCP Image option in Theme Settings > Performance.

Getting the server out of the hero's way

If the first byte takes long, every other fix starts late. Confirm full-page caching is on and that visitors get hits: response headers such as cf-cache-status on Cloudflare, or your host's own cache header, say hit or miss. Pages served to logged-in users, carts and checkouts skip the cache by design, so judge speed as a visitor.

When uncached pages are slow on a quiet server, the work is in PHP and the database. Install Query Monitor on a staging copy to see slow queries and which plugin runs them, check that the site runs a current PHP version, and ask the host about object caching. If the host is the ceiling, slow websites on shared hosting explains what to look for, and a theme update that made things worse is covered in slow after a theme update.

An LCP fix session for any theme

1. 1

   Name the element on each template

   Record the LCP element for the homepage, a landing page, a post and a product page from PageSpeed Insights.

2. 2

   Turn the hero into a real image

   Replace a section background or slider with an image block or image widget, so the img tag sits in the HTML.

3. 3

   Exclude it from every lazy loader

   Check theme, builder and optimization plugin settings. Use exclusion fields for the hero's class or file name, and run only one lazy-loading system.

4. 4

   Raise its priority

   Set fetchpriority to high on the hero, or use your theme's preload option; add a preload link for heroes that must stay in CSS.

5. 5

   Shrink the file

   Export the hero at the largest size it displays, in WebP or AVIF, and let WordPress generate smaller versions for phones.

6. 6

   Remove the entrance effect

   Turn off fade-in and slide-in animations on anything visible on first load.

7. 7

   Fix the first byte

   Confirm caching hits for visitors, then look at hosting and PHP if uncached pages are slow.

8. 8

   Measure, then wait for field data

   Confirm in the lab, then watch Search Console's field data catch up over the following weeks.

Theme settings that help, and where they hide

• WoodMart: Preload LCP Image, lazy loading with offset and placeholder, and Host Google Fonts locally, all under Theme Settings > Performance.
• Avada: a choice between Avada and WordPress lazy loading, critical CSS generation, video facades and font preloading in Global Options > Performance. See the Avada speed guide.
• Divi: Critical CSS is on by default in the Performance tab, which shortens render delay if the critical slice is complete. See Divi speed.
• Kadence: Enable CSS Preload and local Google Fonts with preload under Customizer > General > Performance. See Kadence speed.
• Astra: Load Google Fonts Locally with preloading under Astra > Settings > Performance, the main lever for text LCP. See Astra speed.
• Neve: Pro's Lazy Rendering applies content-visibility to off-screen elements, which helps below the fold and should not touch the hero. See Neve speed.

For a theme-by-theme view of which ones start light, the fastest WordPress themes roundup is a useful second opinion, though no theme setting rescues a three-megabyte slider.

When the hero will not stay fast

Every fix on this page can be undone by a routine edit. A marketer swaps the hero for a slider. A builder update outputs backgrounds differently. A new optimization plugin brings its own lazy loader. On WordPress the hero's speed is owned jointly by the theme, the builder, the image plugin, the cache and the editor, and none of them is responsible for the total.

On a Next.js build the template decides how the hero loads, once, and editors working in Athena CMS change the picture without changing how it is delivered. It costs more to build and needs a developer for layout changes. If your LCP keeps sliding back, compare the trade in WordPress vs Next.js speed, or have our theme speed optimization service do the session above and tell you honestly whether the theme can hold the result.