What Is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) measures how long it takes for the biggest piece of content on the screen to render — usually a hero image, a large headline, or a video poster frame. In plain terms, it answers the question your visitor is silently asking: "how fast does this page actually look loaded?"

A fast LCP makes a page feel quick and trustworthy. A slow one means a visitor is staring at a half-built page, and on a business website that often means a lost enquiry or sale before they've even read a word.

One of the three Core Web Vitals

LCP is one of Google's three current Core Web Vitals, alongside:

• Interaction to Next Paint (INP) — how quickly the page responds when someone taps or clicks.
• Cumulative Layout Shift (CLS) — how much the layout jumps around as things load.

If you read an older guide you might see First Input Delay (FID) listed here. That metric was retired in March 2024 and replaced by INP — so any "three Core Web Vitals" list that still mentions FID is out of date. For the bigger picture, start with our intro to Core Web Vitals.

What counts as a good LCP

Google publishes target thresholds for LCP:

These are measured on real visits (field data from the Chrome User Experience Report, or CrUX), not just a one-off lab test, and Google scores you at the 75th percentile of those visits. So a quick result for most people isn't enough if a meaningful slice of your audience — say, mobile users on a slower connection — has a slow experience.

Which element is "the LCP element"?

The browser looks at what's visible in the initial viewport — before any scrolling — and picks the largest image, block of text, or video poster frame. On most small-business sites that's the hero image or the big headline at the top of the page. Tools like PageSpeed Insights will name the exact element, so you don't have to guess.

The four parts of LCP

Modern LCP diagnosis breaks the number into four sequential pieces. Knowing which one is slow tells you who needs to fix it:

1. Time to First Byte (TTFB) — how long until the server sends the first byte of the page. This is hosting: PHP speed, server caching, distance to the visitor. Read more in our TTFB explainer.
2. Resource load delay — the gap between the page arriving and the browser starting to fetch the hero image. Lazy-loading the hero, or hiding it behind CSS or JavaScript, makes this gap large.
3. Resource load time — how long the hero image itself takes to download. File size and format live here.
4. Element render delay — the time between the image being downloaded and actually appearing, usually because render-blocking CSS or JavaScript is in the way.

What hurts LCP

• A slow server (high TTFB). Everything after it is late too.
• Lazy-loading the hero image. loading="lazy" is great for images far down the page and a classic mistake on the one at the top — it tells the browser to wait on the very image it should fetch first.
• Huge, unoptimised images. A multi-megabyte hero image is the single most common LCP culprit on the websites we see.
• Render-blocking CSS and JavaScript — page builders and stacks of plugins are the usual source.

How to improve LCP

• Fast managed hosting with server-level caching and a CDN, so the page starts arriving sooner and assets are served from near the visitor.
• Right-size the hero image for the space it fills, and export it as WebP or AVIF — the same picture at a fraction of the file size.
• Don't lazy-load the hero. Give it fetchpriority="high" and, where you can, preload it, so the browser fetches it before anything else.
• Trim render-blocking CSS and JavaScript — fewer plugins, lighter page-builder settings, and defer scripts that aren't needed above the fold.

A note for WordPress owners

WordPress core already does some of this for you. Since 5.9 it skips lazy-loading the first image on the page, and since 6.3 it automatically adds fetchpriority="high" to the image it thinks is your LCP element. So you usually don't need a plugin to "fix" hero-image priority — and if an optimisation plugin forces loading="lazy" on every image, it can undo core's good work.

Whose job is which

• Your host's job: TTFB, server caching, PHP performance, CDN. On Site Schema this is handled for you.
• Your job (or your designer's): which hero image you use, how big it is, what format it's in, and how much page-builder and plugin weight sits on top of it.

If your LCP is slow, check the four parts above first. It tells you in seconds whether the answer is a hosting conversation or an afternoon with your images.