What is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) measures how long it takes for the biggest image or block of text in the visible part of a page to appear. Google counts an LCP of 2.5 seconds or less as good, and it’s one of the three Core Web Vitals it uses as part of its page experience signals.

LCP is the closest thing to a number for “when does this page look loaded?”. A visitor doesn’t care when the last tracking script finishes. They care when the hero image, headline or product photo shows up, and that’s the moment LCP captures.

It’s also the Core Web Vital most sites fail. Large hero images, slow servers and pages that build themselves in JavaScript all push it up, and on mobile connections the gap between a good and a poor score is very noticeable.

How Largest Contentful Paint works

As a page loads, the browser keeps track of the largest element visible in the viewport and records when it was rendered. The final candidate, once the visitor first interacts with the page or loading finishes, becomes the LCP element and its render time is the LCP score.

The elements that can count are:

• Images, including images inside an SVG
• Videos, using the poster image or first frame
• Elements with a background image loaded through CSS
• Block-level elements containing text, such as headings and paragraphs

On most marketing sites and online shops, the LCP element is the hero image or main product photo. On blogs and news pages it’s often the headline or the first paragraph.

What counts as a good LCP score

Google’s thresholds are measured at the 75th percentile of real page loads, split by mobile and desktop. So three out of four visits need to hit the target, not just your fastest ones.

LCP	Rating
2.5 seconds or less	Good
Over 2.5 and up to 4 seconds	Needs improvement
Over 4 seconds	Poor

LCP sits alongside Interaction to Next Paint (INP), which replaced First Input Delay in March 2024, and Cumulative Layout Shift (CLS). Our guide to Core Web Vitals explains how the three fit together.

How to measure LCP

Use field data from real visitors to judge your score, and lab data to work out why it’s slow. The two often disagree, and field data is what Google uses.

1. Search Console Core Web Vitals report. Groups your URLs into good, needs improvement and poor based on Chrome user data. Start here to see which page templates have a problem.
2. PageSpeed Insights. Shows field data for a URL or the whole origin where Chrome has enough of it, plus a Lighthouse lab test that names the LCP element.
3. Chrome DevTools. The Performance panel shows live LCP as you load the page and highlights the element, which is the quickest way to see what you’re actually optimising.
4. Real user monitoring. Google’s web-vitals JavaScript library, or an analytics tool built on it, records LCP from your own visitors, including pages with too little traffic for Chrome’s public data.

The four parts of LCP

Every LCP time breaks into four parts, and knowing which one is large tells you what to fix:

• Time to First Byte. How long the server takes to start sending the 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 itself takes to download.
• Element render delay. The time between the image arriving and it actually appearing on screen.

For a text LCP element, only the first and last parts apply. Google’s own guidance suggests most of the time should go on the first byte and the download, with the two delays kept as small as possible.

How to improve Largest Contentful Paint

The biggest wins usually come from getting the LCP image requested earlier and making it smaller. In rough order of impact:

1. Don’t lazy-load the LCP image. Lazy loading above-the-fold images is one of the most common causes of a poor score. Load the hero image normally.
2. Give it high fetch priority. Adding fetchpriority=”high” to the hero image tells the browser to download it ahead of less important files.
3. Make it discoverable in the HTML. If the image is set as a CSS background or injected by JavaScript, the browser finds it late. Use a normal image tag, or preload it.
4. Serve the right size and format. Compress images, use WebP or AVIF, and use srcset so phones don’t download desktop-sized files.
5. Cut server response time. Page caching, a content delivery network and better hosting all reduce Time to First Byte, which delays everything after it.
6. Remove render-blocking resources. Large CSS files and synchronous scripts in the head hold up rendering. Inline critical CSS and defer scripts that aren’t needed straight away.
7. Render the main content on the server. Pages that build their content in the browser with JavaScript usually have a high element render delay.

We go through these fixes alongside INP and CLS in how to improve Core Web Vitals and page speed.

How LCP affects rankings

LCP does affect rankings, but only modestly. Core Web Vitals are part of the page experience signals Google uses, and Google has said great content can still rank well with a weaker page experience. A faster LCP is unlikely to lift a weak page to the top on its own.

The bigger payoff is usually with visitors. Slow pages lose people before they’ve seen anything, so improving LCP on your key landing pages tends to help enquiries and sales as much as rankings. If your templates are failing and you’re not sure where to start, our technical SEO team can help, and a free strategy session is a good place to start.

Related reading: our guides to page speed and JavaScript SEO.

Common questions