Largest Contentful Paint (LCP) is the Core Web Vitals measure of loading speed. It records how long it takes, from the start of navigation, for the largest image or block of text in the visible area to be drawn. An LCP of 2.5 seconds or less, at the 75th percentile of page loads, is rated good.
Why it matters
Visitors judge a page by when the main thing appears, not by when the last tracking script finishes. LCP approximates that moment. Google includes it among the three Core Web Vitals with INP and CLS, and Search Console groups URLs by their LCP status in the Core Web Vitals report.
The element that counts is the largest one visible in the viewport when the page loads. Typical candidates are:
- an
imgelement, including an image inside an SVG - the poster image of a
video - an element with a background image loaded through
url() - a block-level element containing text, such as a heading or paragraph
On many pages this is the hero image or the main headline.
How to check
- Run the address through PageSpeed Insights. The top block shows real-visitor LCP when Google has enough data, and the Lighthouse block lists the LCP element.
- In Chrome DevTools, record in the Performance panel and look for the LCP marker in the Timings track. Click it to see which element it was.
- Open the Core Web Vitals report in Search Console to see which groups of URLs are slow.
Rating bands for LCP:
| LCP time | Rating |
|---|---|
| 2.5 seconds or less | Good |
| Over 2.5 up to 4 seconds | Needs improvement |
| Over 4 seconds | Poor |
What makes LCP slow
LCP is the sum of four parts: server response time, the delay before the browser fetches the LCP resource, the download time of that resource, and the delay before it is painted. Improve whichever part is largest on your page.
Common mistakes
- Adding
loading="lazy"to the hero image, which tells the browser to wait instead of fetching it early. - Optimising the whole page equally instead of finding the actual LCP element first.
- Treating a good lab score as final when real visitors on slower phones see something different.
- Using a huge image file scaled down by CSS.
Frequently asked questions
Is LCP the same as page load time?
No. Page load time waits for everything, including images far down the page. LCP stops counting once the largest visible element has rendered.
Can the LCP element change?
Yes. The browser updates the candidate as larger elements appear, and stops once the visitor interacts with the page. The final candidate is the one reported.
What is a quick win for LCP?
Make sure the LCP image is not lazy-loaded, is correctly sized and compressed, and can be discovered in the HTML. You can add fetchpriority="high" to that image to hint its importance.
Related guides
- Fix a slow Largest Contentful Paint
- Core Web Vitals explained
- Time to First Byte (TTFB) fixes
- Find and fix slow images
Crawvix's scan checks whether Largest Contentful Paint is good on your pages. To see it for yourself, Try the free website sample.