Largest Contentful Paint: how to find and fix a slow LCP

Craig AddymanUpdated 4 November 20267 min read

What LCP measures

Largest Contentful Paint is one of Google's three Core Web Vitals. It times how long the page's main content takes to show, counted from when the visitor starts navigating to the page.

The element can be an image, a video's poster or first frame, an element with a CSS background image, or a block of text. Chrome ignores some elements, such as invisible ones and those that fill the whole viewport as a background.

Google says good Core Web Vitals align with what its ranking systems reward, but a good score doesn't guarantee rankings. Treat LCP as a visitor problem first.

Field data vs your browser

The score Google uses comes from real Chrome visitors, taken at the 75th percentile of page loads and split by mobile and desktop. You can see it in Search Console's Core Web Vitals report or PageSpeed Insights, where a page has enough visits.

A test in your own browser is a single visit on your device and connection. It won't match the field number, and that's fine. Field data tells you whether there's a problem. A local test tells you what's causing it.

How to find the LCP element

Copy// Logs the LCP element and time for this page load
new PerformanceObserver((list) => {
  const entry = list.getEntries().at(-1);
  console.log('LCP', Math.round(entry.startTime) + ' ms', entry.element, entry.url || '(text)');
}).observe({ type: 'largest-contentful-paint', buffered: true });

Test on a throttled connection or real phone too. A page that's fast on your desktop can still be slow for most visitors.

Where the time goes

LCP breaks into four parts. Google's web.dev guidance gives a rough target for each, so find the part that's out of line before you change anything.

How to fix it

• Slow first byte: cache HTML where you can, use a CDN and remove redirects before the page. See how to trace redirects.
• Load delay: put the image in the HTML as an <img> so the browser finds it straight away. If it's a CSS background or added by JavaScript, preload it.
• Don't lazy-load it: remove loading="lazy" from the LCP image. It delays the request.
• Prioritise it: add fetchpriority="high" to one image, or two at most.
• Load duration: use a modern format, serve the right size for the screen and compress it.
• Render delay: look for render-blocking CSS and JavaScript, and for content that's held back until a script runs.

Copy<img src="/hero.webp" width="1200" height="630" alt="..." fetchpriority="high">

The width and height also reserve space, which helps your layout shift score. If the page loads quickly but feels slow to use, see Interaction to Next Paint.

How crawlers report this

Crawlers usually report the causes, not the page's LCP element, and these come from PageSpeed data, so labels can change between versions.