Skip to content
RankThat

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is a Core Web Vital that measures how long it takes for the biggest image or text block in the viewport to appear. Good is 2.5 seconds or less.

Largest Contentful Paint marks the moment a visitor can see the main thing on the page. The browser watches which element in the visible area is largest (often a hero image, a product photo or a big heading) and records when it finishes rendering. That time is the LCP.

It’s one of the three Core Web Vitals. Google rates it good at 2.5 seconds or less, needs improvement up to 4 seconds, and poor beyond that, measured at the 75th percentile of real visits.

Why it matters

LCP is the closest single number to “how long until this page looks loaded”. Bean & Barrel Coffee’s product pages open with a large photo of the bag. If that photo is a 3 MB file that only starts downloading after a stylesheet and three scripts, shoppers on mobile data stare at a blank space for four or five seconds. Some leave before they see the price.

The four parts of LCP

Google breaks LCP into stages, which tells you where to look:

  1. Time to first byte. How long the server takes to respond. A slow host or uncached WordPress pages show up here (see TTFB).
  2. Resource load delay. The gap before the browser starts fetching the LCP image, often because it’s discovered late.
  3. Resource load time. How long the image itself takes to download.
  4. Element render delay. Time between the image arriving and it appearing, often caused by render-blocking resources.

Fixes that usually help

  • Compress and resize the hero image, and serve WebP or AVIF.
  • Don’t lazy-load the LCP image. Lazy loading is for images further down the page.
  • Tell the browser it’s important, and make sure it’s in the HTML rather than injected by JavaScript:
<img src="/images/colombia-huila-bag.webp" width="1200" height="800"
     fetchpriority="high" alt="Bag of Colombia Huila whole bean coffee">
  • Use page caching and a CDN to cut server response time.
  • Defer scripts that aren’t needed to show the first screen.

Common mistakes

The most frequent one is a theme or plugin applying loading="lazy" to every image, including the hero. Another is a slider: the first slide may be the LCP element, and slider scripts often delay it. A third is fixing lab scores in Lighthouse while ignoring the field data in Search Console, which is what Google actually uses.

How to check

PageSpeed Insights names the LCP element and shows the breakdown above. RankThat’s Site Audit flags slow LCP across your pages, and on WordPress the Bridge plugin can apply image compression and LCP image priority as reviewable fixes, avoiding the lazy loading trap.

Do this month’s SEO in an afternoon.

Start free trialCheck a site free