LCP (Largest Contentful Paint)
LCP measures the time it takes for the largest visible content element on a page, such as a hero image or heading, to fully render, indicating how fast a page feels to users.
Largest Contentful Paint (LCP) is one of Google's three Core Web Vitals. It measures the render time of the largest image, video, or block of text visible in the viewport when the page first loads. In practical terms, it measures when the main content of a page becomes visible to the user.
These thresholds are measured at the 75th percentile of page loads across real users. The "largest" element is typically the hero image on a landing page, the featured image on a blog post, a large heading, or a video thumbnail. The browser automatically identifies which element is the largest in the initial viewport.
In practice
- A travel website optimized their hero images by serving WebP format and appropriate sizes, reducing LCP from 5.2 seconds to 1.9 seconds on mobile
- A blog preloaded their LCP element (a featured image) and saw LCP improve from 3.1s to 1.6s, resulting in a measurable decrease in bounce rate
- An e-commerce site discovered that a large CSS file was render-blocking their LCP element; inlining critical CSS brought LCP from 4.0s to 2.1s
- A news site implemented responsive images with the srcset attribute, serving smaller images to mobile devices and reducing mobile LCP by 40%
Not sure how this applies to you?
A senior engineer walks your site, your search presence and the way enquiries reach you, then writes down the three things worth fixing first. You keep the document either way.