Largest Contentful Paint (LCP)

Largest Contentful Paint, LCP for short, is one of the three Core Web Vitals and measures when the largest visible element of the page has loaded.

What counts as the LCP element

Google identifies the largest visible element in the viewport on first render. This is typically a hero image, a background video poster or a large block of text such as a heading with the paragraph below it. You can see which element is the LCP on your page in Chrome DevTools, in the Performance tab under Web Vitals.

Thresholds

Google uses three ranges. Good means an LCP under 2.5 seconds. Needs improvement is between 2.5 and 4 seconds. Poor is anything over 4 seconds. What counts is the 75th percentile of real user measurements from CrUX. In other words, the threshold has to be met on 75 percent of all real visits, not on average.

The most common slowdowns

First, large uncompressed images. A 4 MB JPEG in the hero is still common. Second, render-blocking CSS or JavaScript in the head that stops the browser from painting the LCP element. Third, slow server response time (TTFB). If the server alone takes 800 ms, there is hardly any time left for everything else.

How we optimise LCP in practice

Hero image in WebP or AVIF, resized to the exact display size, with srcset for different resolutions. The LCP element gets fetchpriority="high" and never loading="lazy". Critical CSS is delivered inline in the head. Fonts are loaded with font-display: swap so text is visible immediately. We keep server response time under 100 ms with Cloudflare edge caching.

Related terms

Core Web Vitals · Lighthouse · INP · CLS