What is LCP and how to improve Largest Contentful Paint

Largest Contentful Paint (LCP)

LCP measures when the largest visible content element — usually a hero image or large heading — finishes rendering. It is Google's primary metric for perceived load speed. Target: under 2.5 seconds.

Common LCP elements: <img>, <video> poster, background image via CSS, large <h1> blocks.

The four causes of slow LCP, in order of frequency:

1. Slow server (TTFB) — everything starts later

2. Render-blocking resources — delay when the browser starts the LCP fetch

3. Slow resource load time — the LCP image itself is large or not prioritized

4. Client-side rendering — the LCP element is injected by JavaScript

<!-- Tell the browser this image is the most important resource -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

<!-- On the img tag itself -->
<img src="hero.webp" fetchpriority="high" alt="Hero" width="1200" height="600">

fetchpriority="high" moves the LCP image to the top of the browser's download queue. Without it, the browser may discover the image late and assign it medium priority behind scripts and other resources.

Measure LCP in the field using the web-vitals library:

import { onLCP } from 'web-vitals';
onLCP(metric => console.log('LCP:', metric.value, 'ms'));