Fixing LCP on image-heavy homepages

On most marketing sites and online stores, the Largest Contentful Paint element is an image: a hero banner, a featured product or a campaign photo. That makes LCP one of the most fixable Core Web Vitals, because the causes are mechanical and the fixes are well understood. It also makes it one of the easiest to break again, since every new campaign brings new imagery. This is the process we follow when a client's LCP fails on image-heavy pages.

Find the actual LCP element

Teams often assume the LCP element is the hero image, then spend a week optimizing the wrong thing. On mobile, it may be a heading, a product image further down or a background image set in CSS. We confirm it in three ways: the LCP section of a PageSpeed Insights report, a DevTools performance trace, and real user monitoring with attribution, which tells us which element was LCP for real visitors. Those three sources sometimes disagree, especially on pages with carousels or personalized content, and the field data wins.

Break LCP into its parts

LCP time is the sum of four sub-parts, and each one points to a different fix.

• Time to First Byte: how long the server takes to start sending HTML.
• Resource load delay: the gap between the first byte and the browser starting to download the LCP image.
• Resource load duration: how long the image takes to download.
• Element render delay: the time between the image finishing and it appearing on screen.

On image-heavy pages, the biggest culprit is usually load delay, not download time. The browser discovers the hero image late because it is set as a CSS background, injected by JavaScript, or marked as lazy-loaded. On a recent retail homepage, the hero image took only 400 milliseconds to download, but the browser did not start fetching it until 1.9 seconds after the HTML arrived.

Most slow hero images are not too big. They are found too late.

The fixes, in order of impact

1. Make the image discoverable in the HTML. Use a real <img> element in the server-rendered markup rather than a CSS background or a JavaScript slider that builds the DOM after load.
2. Never lazy-load the LCP image. Many themes and plugins apply lazy loading to every image. Exclude the first image in the viewport, and add fetchpriority="high" so the browser prioritizes it over other resources.
3. Preload when discovery is unavoidably late. If the image must come from CSS or a component, add a preload link in the document head with matching imagesrcset and imagesizes attributes.
4. Serve the right size. Use srcset and an accurate sizes attribute so mobile devices download an image around their viewport width, not a 2,400-pixel desktop banner.
5. Use modern formats. AVIF or WebP with sensible quality settings typically cut hero image weight by 30 to 50 percent compared with JPEG at similar visual quality.
6. Serve from the same origin or a fast CDN. An image on a third-party domain adds a connection setup. Where that is unavoidable, a preconnect hint helps.

A trimmed example of a well-behaved hero image:

<img
  src="/images/hero-1200.avif"
  srcset="/images/hero-640.avif 640w, /images/hero-1200.avif 1200w, /images/hero-2000.avif 2000w"
  sizes="100vw"
  width="2000" height="1000"
  fetchpriority="high"
  alt="Linen shirts folded on a wooden bench">

Explicit width and height attributes matter as well. They do not speed up the download, but they let the browser reserve space for the image before it arrives, which prevents layout shift and avoids a late re-layout that can push the LCP moment back. We also check that the image CDN is not resizing on the fly for every uncached request. A transformation service that takes 600 milliseconds to generate a variant on first request can undo everything else, so we warm the cache for hero images when campaigns launch.

Carousels, video and render delay

Carousels deserve their own mention because they combine several problems at once. The first slide is often rendered by JavaScript, slides are lazy-loaded, and the slider library itself blocks rendering. If the business insists on a carousel, render the first slide as plain HTML with the image eager and prioritized, and initialize the carousel after the page is interactive. Better still, test whether the carousel earns its place. On more than one client site, replacing a five-slide rotator with a single strong image improved both LCP and click-through.

Hero videos follow the same rule. Use a lightweight poster image as the LCP candidate and load the video afterwards. Autoplaying video as the first paint almost always fails LCP on mobile networks.

Element render delay, the final sub-part, is usually caused by render-blocking CSS and JavaScript or by a font that hides text in an overlaid headline. Inlining critical CSS, deferring non-essential scripts and using a sensible font-display setting typically resolve it.

Keeping LCP fixed as content changes

Once the template is right, the remaining risk is content. Editors upload uncompressed photography, campaigns introduce new layouts, and someone re-enables a slider. We guard against that with automated image processing on upload, template-level checks that the first image is not lazy-loaded, and synthetic monitoring on the homepage and top landing pages. Field LCP is tracked in real user monitoring, with an alert if the 75th percentile rises above 2.5 seconds for a week.

This work is a core part of our Core Web Vitals optimization projects. Image delivery often involves the CDN, so it overlaps with CDN configuration, and on WordPress sites it usually happens alongside broader WordPress speed optimization.

Is your hero image holding you back?

If your LCP is failing and you want a clear diagnosis, send us the pages that matter most. Request a quote and we will return a fixed price within 24 hours.