What Is Largest Contentful Paint (LCP) and How Do You Improve It?

Largest Contentful Paint, or LCP, is one of Google's Core Web Vitals — a set of performance metrics that measure real-world user experience and feed directly into Google's page experience ranking signal. LCP measures how long it takes for the largest visible content element on a page to finish rendering in the user's viewport.

Unlike older speed metrics that measured when a page finished loading entirely, LCP focuses on the point at which a user can see the most significant piece of content — typically a hero image, a large heading, or a prominent banner. A fast LCP makes a page feel usable even before everything else has loaded.

What Counts as the LCP Element

Google considers images (including background images in CSS), video poster frames, block-level text elements, and SVG elements as candidates for the LCP element. The LCP element is determined dynamically — as the page loads, the LCP candidate may change as larger elements render. The final LCP is recorded when the element that ends up being the largest in the viewport has fully rendered.

On most marketing websites, the LCP element is a hero image. On blog posts or article pages, it is often a large heading. Understanding which element is your LCP — something PageSpeed Insights will tell you — is essential before you start optimising, because the right fix depends entirely on which element is involved.

What Causes a Poor LCP Score

Slow server response time (TTFB) directly delays LCP — if the page itself arrives slowly, all elements on it render late. Render-blocking resources, such as large CSS files or synchronously loaded JavaScript in the head of the document, delay when the browser can begin painting content to screen. Large, unoptimised images are the most common culprit for poor LCP on image-heavy sites.

Resource loading prioritisation also matters. If the LCP image is not preloaded or is discovered late in the loading waterfall — for example if it is a background image set in CSS rather than an HTML img element — the browser may not begin downloading it until late in the process, pushing LCP further out.

How to Improve LCP

Optimise your LCP image first. Compress it, convert it to a modern format such as WebP or AVIF, and serve it at the correct dimensions for the viewport. Add a fetchpriority="high" attribute to the LCP image element so the browser downloads it as soon as possible. If it is a hero image, avoid lazy loading it — lazy loading is counterproductive for above-the-fold content.

Add a preload link tag in the document head for the LCP image: <link rel="preload" as="image" href="hero.webp">. This instructs the browser to start downloading the image early in the page load, before the parser reaches the img tag itself. Combined with server-side caching to reduce TTFB and elimination of render-blocking resources, these changes typically bring LCP within the 2.5 second good threshold.