What is Largest Contentful Paint? | Glossary

Largest Contentful Paint, or LCP, is the time from when someone starts loading a page to when the largest piece of content in their screen finishes appearing. On most sites that piece is the main hero photo or the headline. It is the closest single number to the visitor's feeling of "the page has loaded".

What LCP measures, step by step

As the page renders, the browser keeps track of the biggest image, video poster or text block visible in the viewport. Each time a larger one paints, it becomes the new candidate. Once the visitor scrolls or interacts, the browser stops looking and the last candidate's paint time is the LCP. It is one of the three Core Web Vitals, and Google rates it good at 2.5 seconds or less and poor above 4 seconds, judged at the 75th percentile of real visits.

The total breaks into four parts: time to the first byte from the server, the delay before the browser discovers the LCP resource, the time to download it, and the delay before it is drawn. Knowing which part is slow tells you what to fix.

Diagnosing a slow LCP

A florist's homepage has a full-width photo in its hero section. PageSpeed Insights names that photo as the LCP element at 5.1 seconds on mobile. Looking closer: the image is a 3,000-pixel JPEG, it is set as a CSS background (so the browser finds it late), and it is marked to lazy-load. The fixes follow directly:

• Serve a properly sized WebP or AVIF version with srcset so phones get a phone-sized file.
• Use a real img element so the browser discovers it in the HTML.
• Remove loading="lazy" from it and add fetchpriority="high".
• Serve it from a CDN close to visitors.

When to worry about LCP

If your main pages pass in Search Console or PageSpeed field data, leave it alone. If they fail on mobile, LCP is usually the most visible problem and often the easiest to improve, since it tends to come down to one large file or a slow server response.

Common LCP mistakes

• Lazy-loading the hero. It delays the exact element being measured.
• Hiding the headline until a web font loads. Use font-display: swap so text paints with a fallback first.
• Rendering everything with client-side JavaScript. If the hero only appears after a large script runs, LCP waits for that script.
• Slider carousels as the first view. Big rotating images are heavy, and the first slide often loads late.

Related terms

• Core Web Vitals: the set LCP belongs to.
• Cumulative Layout Shift: the stability metric measured alongside it.
• Lazy loading: helpful below the fold, harmful for the LCP image.
• WebP: a lighter image format that shortens download time.