Frontend · interactive

Core Web Vitals: Largest Contentful Paint

LCP is when the biggest thing on screen, usually a hero image or headline, finishes drawing. Google counts under 2.5 s as good. It's a chain of waits, so fix the links. Times are illustrative.

WaterfallLCP 4.06 s · poor

HTML
styles.css
app.js (render-blocking)
hero.jpg
LCP

Dashed line: the 2.5 s “good” threshold.

LCP 4.06 s with 0 of 4 fixes.

Serve from a CDNShorter round trips for every file.Defer the blocking scriptThe page can render without waiting for app.js.Preload the hero imageThe image starts downloading with the HTML, not after CSS is parsed.Resize + AVIF the image1.2 MB becomes 140 KB.

Step 1 of 4 · read left to right

1
The HTML has to arrive
Every round trip to a far-away server adds delay before anything starts.
A CDN shortens every round trip.
2
CSS and sync scripts block rendering
Nothing paints until blocking CSS and scripts in the head finish. Defer scripts that aren't needed for the first paint.
<script defer src="app.js">
3
Start the hero image early
If the image is set in CSS or JS, the browser discovers it late. Preload it, or put it in the HTML with fetchpriority=high.
<link rel="preload" as="image" href="hero.avif">
4
Send fewer bytes
Resize to the displayed size and use AVIF or WebP. A 1.2 MB photo for a 600 px slot is the most common LCP problem.
Also watch CLS (layout shifts) and INP (slow responses to input).

In production

Tools and technologies

Core Web Vitals are measured in the field and in the lab.

Not tied to one language — use these names when you search docs or design a system.