Back to glossary

Largest Contentful Paint (LCP)

A Core Web Vital that measures the time from page load start until the largest visible content element (image, video, or text block) is rendered on screen. Good LCP is 2.5 seconds or less.

LCP captures the user's perception of loading speed by measuring when the main content becomes visible. The largest element is typically a hero image, video thumbnail, or large heading text block. Unlike older metrics like First Contentful Paint, LCP focuses on meaningful content rather than any pixel change.

For engineering teams optimizing LCP, focus on the critical rendering path for your largest element. Common LCP improvements include optimizing hero images (proper sizing, modern formats like WebP/AVIF, preload hints), reducing server response time (TTFB optimization), eliminating render-blocking resources (deferring non-critical CSS and JavaScript), and implementing effective caching strategies. Use Chrome DevTools Performance panel to identify your LCP element and trace the bottleneck. For image-heavy pages, responsive images with srcset and proper width/height attributes prevent unnecessary large downloads. Server-side rendering or static generation significantly improves LCP for JavaScript-heavy applications.

Related Terms