Blog

Your Hero Image and Largest Contentful Paint

Google considers Largest Contentful Paint (LCP) good at 2.5 seconds or less and poor above 4.0 seconds (Google web.dev). LCP measures how long it takes for the largest piece of content in the first screen to appear. On many small business sites, that largest piece is the hero image at the top of the home page.

What the research observed

LCP is one of Google’s Core Web Vitals. It is assessed at the 75th percentile of page loads, and mobile and desktop are measured separately (Google web.dev). That means your score reflects slower visits, not your best case on office Wi-Fi. A page that loads in 2 seconds for you can still be rated by the slower quarter of real visits on phones.

The scale has three bands: good at 2.5 seconds or less, needs improvement between 2.5 and 4.0 seconds, and poor above 4.0 seconds (Google web.dev).

The claim that the hero image is often the LCP element is a practical inference from how LCP works, not a measured result from these sources. Large images near the top of a page tend to be the biggest element in the first screen, so they tend to set the score.

What it means for a business website

An oversized hero photo, or one that loads late, makes your page look slow to every visitor and can drag down your LCP score. A common cause is lazy loading. Lazy loading is useful for images further down the page, but applied to the hero it tells the browser to wait before fetching the one image that matters most.

What to do

  • Find your LCP element with a page speed tool and confirm whether it is the hero image.
  • Resize and compress the hero image to the dimensions it actually displays at.
  • Preload the hero image and remove lazy loading from it.
  • Check mobile and desktop scores separately, since Google measures them separately.

Sources

  1. Web Vitals. Google (web.dev).
  2. Largest Contentful Paint (LCP). Google (web.dev).