Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is the Core Web Vitals metric measuring how long it takes for the largest visible content element on a page to finish rendering. The "largest" element is typically a hero image, a large block of text, or a video poster — Google's algorithm picks whichever element occupies the most visible viewport area at the moment it appears.

Thresholds: Good is under 2.5 seconds, Needs Improvement is 2.5 to 4.0 seconds, Poor is over 4.0 seconds. Measured at the 75th percentile of real-user loads from the Chrome User Experience Report.

LCP is the canonical "feels fast" metric. Users perceive a page as loaded when the main content is visible, not when every asset has finished downloading. Optimising LCP usually delivers a more meaningful UX improvement than chasing total load time or DOMContentLoaded events.

The four phases that contribute to LCP, per Google's documentation: time to first byte (Time to First Byte (TTFB)), resource load delay, resource load duration, and element render delay. Optimising each phase requires different techniques.

TTFB is server-side: caching, CDN, faster back-end. Resource load delay is about removing render-blocking resources — defer non-critical CSS and JS, prioritise the LCP element's source via <link rel="preload"> or fetchpriority="high" on the image. Resource load duration is about asset weight — compress images, serve modern formats (WebP, AVIF), size images correctly for device viewport. Element render delay covers CSS parsing, font loading, and JavaScript execution that blocks the element from painting.

Common patterns that wreck LCP: hero images served at desktop resolution to mobile devices; web fonts blocking text render until the font file arrives; large above-the-fold JavaScript components that hydrate before the LCP element can paint; and lazy-loading applied to the LCP image itself (lazy-loading should be reserved for below-the-fold images).

Diagnose with Chrome DevTools' Performance panel, which highlights the LCP element and breaks down its load timeline. Fix the biggest contributing phase first — usually either TTFB or image weight on content-heavy pages.