Skip to main content
Performance

Largest Contentful Paint

LCP

Portrait of Robert Klimant, co-founder of Roelu Studio
Robert KlimantCo-founder

What is Largest Contentful Paint?

Largest Contentful Paint (LCP) is the Core Web Vital that measures how long it takes for the largest visible element in the viewport to render. That element is usually the hero image, a large block of text, or a video poster. Google's passing threshold is under 2.5 seconds. Anything between 2.5 and 4 seconds is flagged as needing improvement; over 4 seconds is poor.

Why it matters

LCP is the closest metric to what a visitor actually feels when a page loads. If the hero takes four seconds to appear, the page feels broken — and the visitor is already reaching for the back button. Most LCP failures come from one of two places: a giant unoptimized hero image, or a render-blocking script that holds the browser hostage before it can paint. Both are fixable in an afternoon. Yet we routinely see scale-up homepages, built on premium platforms, shipping 4MB hero images. That is not a design choice. That is neglect.

How it works

When a page loads, the browser tracks every visible element and notes which one is largest. The clock starts at navigation and stops when that element finishes painting on screen. To improve LCP, the usual moves are: compress and resize the hero image, serve it in next-gen formats like WebP or AVIF, preload it in the document head, and put your site behind a CDN so the bytes travel a shorter distance. Removing render-blocking CSS and JavaScript helps too. On a well-built Next.js or Astro site with a global CDN, LCP under 1.5 seconds is normal. Under one second is the goal.

Related terms

  • Core Web Vitals

    Performance

    Google's three benchmark metrics that measure how fast a page loads, how quickly it responds to clicks, and how stable the layout feels as it renders — used in…

  • First Contentful Paint

    Performance

    The performance metric that measures how long it takes for the first piece of content — any text, image, or graphic — to appear on the screen after a visitor…

  • Image Optimization

    Performance

    Compressing, resizing, and serving images in modern formats so pages load faster without losing visible quality — usually the single biggest performance win…

  • Page Speed

    Performance

    How quickly a web page loads and becomes usable for a visitor — measured in seconds and milliseconds, and treated by Google as a confirmed ranking signal…

  • Lazy Loading

    Performance

    A technique that delays loading images and other heavy assets until the visitor scrolls near them, making the rest of the page load faster and feel snappier.

  • PageSpeed Insights

    Performance

    Google's free tool for measuring how fast a page loads on mobile and desktop, combining real-user field data with lab tests and offering specific, actionable…

  • Interaction to Next Paint

    Performance

    The Core Web Vital that measures how quickly a page responds when a visitor clicks, taps, or types — Google's official replacement for the older First Input…