Largest Contentful Paint (LCP) is the time from when a page starts loading until the largest image, video poster or text block in the viewport is rendered. It is one of the three Core Web Vitals and stands in for “when did the main content appear?”.
| Rating | LCP (75th percentile) |
|---|---|
| Good | 2.5 s or less |
| Needs improvement | 2.5 s to 4.0 s |
| Poor | Over 4.0 s |
Common causes of a slow LCP
- A large hero image that is not compressed, resized or served in a modern format (AVIF or WebP)
- The LCP image is discovered late, for example loaded by JavaScript or as a CSS background
- Lazy-loading the LCP image, which delays it
- A slow server response; see TTFB
- Render-blocking CSS and JavaScript
How to improve it
Serve the LCP image at the size it is displayed, in AVIF or WebP, and mark it with fetchpriority="high" instead of loading="lazy". Preload it if it is not in the initial HTML. Reduce render-blocking resources and speed up the server response.