Largest Contentful Paint (LCP) is one of Google's three Core Web Vitals metrics. It measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport.
What counts as the largest element?
LCP considers these element types:
<img>elements<image>elements inside an<svg><video>elements with a poster image- Elements with a background image loaded via
url() - Block-level elements containing text nodes
LCP thresholds
Google considers LCP scores as follows:
- Good: 2.5 seconds or less
- Needs Improvement: Between 2.5 and 4.0 seconds
- Poor: More than 4.0 seconds
Common causes of poor LCP
- Slow server response times
- Render-blocking JavaScript and CSS
- Slow resource load times (images, fonts)
- Client-side rendering delays
How to improve LCP
- Optimize your server response time (TTFB)
- Use a CDN to serve static assets
- Preload critical resources
- Optimize and compress images
- Remove render-blocking resources
Related Terms
Core Web Vitals
A set of three metrics defined by Google that measure the loading performance, interactivity, and visual stability of a web page.
First Contentful Paint (FCP)
A performance metric that measures the time from when the page starts loading to when any part of the page's content is rendered on screen.
Render Blocking
Resources that prevent the browser from rendering page content until they are fully downloaded and processed.
Time to First Byte (TTFB)
A performance metric that measures the time between the request for a resource and when the first byte of a response begins to arrive.