Largest Contentful Paint (LCP)
What is Largest Contentful Paint?
Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures how long it takes for the largest image, video poster or block of text visible in the viewport to render, counted from when the user started loading the page. Google rates LCP good at 2.5 seconds or less and poor above 4 seconds, at the 75th percentile of visits.
The LCP element is usually a hero image, a product photo, a large heading or the first paragraph. It can be an <img>, an image inside an SVG, a video’s poster image, an element with a CSS background image, or a block-level element containing text. The browser keeps updating its choice as the page loads and stops once the person interacts.
LCP time breaks into four parts: time to first byte, the delay before the browser starts loading the LCP resource, the time to download it, and the delay before it is rendered. Knowing which part is large tells you what to fix.
Why Largest Contentful Paint matters for SEO
LCP is the closest single number to “when did the page look loaded?”, and it is the Core Web Vital that most sites fail. Because it is part of page experience, it feeds into Google’s ranking systems, and slow LCP also means people leave before they see your content.
How to improve LCP
- Find the LCP element in PageSpeed Insights or the Chrome DevTools Performance panel.
- Cut server response time with caching, a faster backend or a CDN.
- Make the LCP image discoverable in the HTML as an <img>, not something injected by JavaScript or hidden in a CSS file.
- Add fetchpriority="high" to the LCP image, or preload it, so the browser fetches it early.
- Never lazy-load the LCP image. Leave loading="lazy" off images at the top of the page.
- Compress and resize the image and serve WebP or AVIF.
- Remove render-blocking resources that delay the first paint, and avoid client-side rendering for the main content.
Largest Contentful Paint example
<img src="/img/hero-1200.webp"
srcset="/img/hero-600.webp 600w, /img/hero-1200.webp 1200w"
sizes="100vw"
width="1200" height="600"
fetchpriority="high"
alt="Runner on a muddy trail">Largest Contentful Paint FAQ
What is a good LCP score?
2.5 seconds or less for at least 75% of visits. Between 2.5 and 4 seconds needs improvement, and over 4 seconds is poor.
Why is my LCP slow on mobile but fine on desktop?
Phones usually have slower networks and CPUs, and mobile layouts often make a different element the largest. Test with mobile throttling and check which element is the LCP on mobile.
Related SEO terms
Core Web Vitals are Google’s three metrics for real-world page experience: Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift.
Page speed is how quickly a page loads, shows its content and responds to input. Google measures it mainly through Core Web Vitals.
Time to First Byte (TTFB) is the time from requesting a page until the first byte of the response arrives. It sets the floor for every other speed metric.
Lazy loading delays loading images, iframes or other content until they are about to scroll into view, which speeds up the first load of a page.
Render-blocking resources are CSS and JavaScript files that the browser must download and process before it can show any of the page.
PageSpeed Insights is Google’s free tool that shows a page’s real-user Core Web Vitals and a Lighthouse lab test with suggestions, for mobile and desktop.