Largest Contentful Paint
Largest Contentful Paint (LCP) is a Core Web Vital that measures how long it takes for the largest visible content element in the viewport to render after a page starts loading.
Start here
- Check your LCP in Search Console first—it's free and shows real user data.
- Identify the actual LCP element for each page type (image, text, video).
- Optimize server response time, reduce render-blocking resources, and compress images.
- Measure at the 75th percentile across mobile and desktop, not just one test.
- Don't stop at images—CSS and JavaScript can be bigger blockers.
Here's what I'd do first to get a handle on it.
What I'd do first
- Check your LCP in Google Search Console under Core Web Vitals. It'll show you which URLs are struggling.
- Run a few URLs through PageSpeed Insights to see the actual LCP element and its render time.
- Identify the LCP element (often a hero image or large heading) and note its size and loading behavior.
- Look at the lab data suggestions: they'll point to server response time, render-blocking resources, or image optimization.
- Set a baseline: note your current 75th percentile LCP for mobile and desktop separately.
Plain-English take
Think of LCP as the moment your page's main visual—like a big photo or a bold headline—appears on screen. It's not about every image or ad loading; it's about the one thing that makes the page feel useful. Google picked this because it matches what users actually notice: they don't care if the footer loads later, they want the hero shot now. The target is 2.5 seconds. If you're over that, visitors start bouncing.
When it actually matters
- Content-heavy pages: blogs, news articles, product pages with large images.
- Above-the-fold hero sections: any page where the first thing you see is a big image or video.
- Mobile users: they're often on slower connections, so LCP can tank if you're not careful.
- E-commerce: product images are usually the LCP element—if they're slow, you lose sales.
- Google ranking: LCP is a Core Web Vital, so it directly impacts page experience signals in search.
What I got wrong
- I used to think LCP meant the whole page was done loading. Nope—it's just the largest visible element. The rest can still be rendering.
- I focused only on images. But often the culprit is render-blocking CSS or JavaScript that delays the LCP element.
- I tested on my fast desktop once and called it good. You need field data (75th percentile) across devices.
- I assumed the LCP element was always the same. On mobile, the viewport is smaller, so a different element might be the largest.
Next step
Quick answers
What is Largest Contentful Paint?
LCP is a Core Web Vital that measures the time it takes for the largest visible content element in the viewport to render after a page starts loading.
What is a good LCP score?
A good LCP score is 2.5 seconds or less, measured at the 75th percentile of page loads.
How is LCP different from First Contentful Paint?
FCP measures the first visible element, while LCP measures the largest visible element, which better reflects perceived load time.
How can I improve LCP?
Common improvements include optimizing images, reducing render-blocking CSS/JavaScript, preloading key resources, and improving server response time.
Sources
Primary documentation is linked directly. Anything commercial is marked nofollow.
- Google web.dev: Largest Contentful Paint (LCP) — Primary Google guidance with the clearest definition, scope, and threshold framing for LCP.
- W3C LCP specification repository — Technical specification source for the metric's formal behavior and terminology.
- Google Search Central / Core Web Vitals guidance — Best source for SEO relevance, ranking/page experience context, and how Google uses Core Web Vitals.
Notes from Callum Bennett.