Largest Contentful Paint (LCP)

How LCP works

The browser reports a new LCP candidate every time a larger element paints: first maybe a heading, then a hero image. The last candidate before the user interacts or scrolls is the page's LCP.

Elements that count: <img>, <image> inside SVG, <video> poster images, elements with a CSS background-image loaded via url(), and block-level elements containing text. Size is the visible area in the viewport, not the file's pixel size.

Web.dev breaks LCP into four sub-parts: time to first byte, resource load delay (how late the LCP image was discovered), resource load duration (downloading it) and element render delay. On a waterfall you can see all four.

Common causes of a poor LCP

Slow server response

Everything starts after TTFB. A 1.5 s server response leaves 1 s for everything else.

Late discovery

The hero image is set in CSS or injected by JavaScript, so the browser only finds it after downloading and running those files. It appears far down the waterfall.

Lazy-loading the hero

loading="lazy" on the LCP image tells the browser to wait until layout — a common self-inflicted delay.

Render-blocking CSS and JS

Even when the image has arrived, it can't paint until blocking stylesheets and scripts finish.

Heavy images

A 600 KB JPEG takes seconds on a mobile connection. Size it for the viewport and use AVIF/WebP.

How to improve LCP

1. Put the LCP image in the HTML as a plain <img> with fetchpriority="high"; never lazy-load it.
2. If it must come from CSS, add <link rel="preload" as="image" href="…" fetchpriority="high">.
3. Serve it from your own origin (or preconnect to the image CDN) to skip extra connection setup.
4. Compress and size it: AVIF/WebP with srcset so phones download phone-sized files.
5. Cut render-blocking CSS/JS and reduce TTFB — both push every paint later.

See your page's request order, TTFB and render-blocking files in the waterfall speed test, or check the render-blocking resources on their own.

Enter your field numbers in the Core Web Vitals checker to see whether you pass.