Hero Images and LCP

Why Hero Images Dominate LCP

The hero image — the large, prominent image at the top of a page — is the Largest Contentful Paint element on the majority of web pages. LCP measures when the largest visible content finishes rendering, and for most pages with a hero section, that content is the hero image. Everything that delays that image directly delays your LCP score.

A well-optimized hero image can bring LCP under 2.5 seconds (Google’s “good” threshold). A poorly delivered hero image — uncompressed, not preloaded, lazy-loaded by mistake — can push LCP past 4 seconds on mobile, even on an otherwise fast site.

What Slows Hero Image Delivery

Several factors compound to delay hero images:

• File size — an uncompressed 2MB hero image takes significantly longer to download than a properly compressed 200KB version at the same visual quality.
• Format — serving JPEG when WebP or AVIF would cut the file size by 30–50%.
• Incorrect lazy loading — if the hero image has loading="lazy", the browser defers downloading it until layout is calculated, adding hundreds of milliseconds.
• Late discovery — when the hero image URL is buried in CSS or JavaScript rather than visible in the HTML, the browser cannot start downloading it until those resources are parsed.
• No responsive sizing — mobile visitors downloading the desktop-sized hero waste bandwidth on pixels they cannot display.

Preloading the Hero Image

For images referenced in CSS (background images) or loaded via JavaScript, the browser does not discover them during the initial HTML parse. A <link rel="preload"> tag in the document head tells the browser to start downloading the image immediately, before it encounters the CSS or JavaScript that references it.

Preloading is one of the highest-impact optimizations for hero image LCP. It can save 200–500ms by starting the download during HTML parsing rather than waiting for CSS evaluation. However, preloading should only be used for the single most important image — preloading too many resources dilutes the benefit.

Avoiding Common Mistakes

The most common hero image mistakes in WordPress:

• Lazy loading the hero — WordPress excludes the first content image from lazy loading since version 5.9, but page builder hero images often bypass this. Ensure your hero has loading="eager" or no loading attribute at all.
• CSS background images — a hero set as background-image in CSS is discovered later than an <img> element in HTML. If you must use a background image, add a preload link.
• Missing fetchpriority — the fetchpriority="high" attribute tells the browser to prioritize this image over other resources. It is well-supported and costs nothing to add.

Tools That Can Help

ShortPixel and Imagify handle the compression and format conversion side of hero optimization — ensuring the file itself is as small as possible before delivery concerns even come into play.

Perfmatters provides fine-grained control over lazy loading exclusions and preload hints in WordPress without custom code.

Further Reading

• Optimize Largest Contentful Paint (web.dev) — Google’s comprehensive guide to LCP optimization, with detailed coverage of image delivery strategies.

Related Articles