Largest Contentful PaintLCP

Largest Contentful Paint measures when the largest content element in the viewport finishes rendering, which is a good proxy for when the user perceives the page as loaded. The largest element is usually a hero image, a video poster, or a large block of text. The good threshold is 2.5 seconds or less, measured at the 75th percentile of real loads.

LCP is driven by four things: time to first byte, resource load delay, resource load time, and element render delay. The common culprits are slow servers, render-blocking CSS and JavaScript, unoptimized hero images, and fonts that delay text paint. The highest-leverage fixes are compressing and correctly sizing the LCP image, preloading it, serving it from a CDN, eliminating render-blocking resources, and reducing time to first byte.

Because the LCP element is often an image, image discipline matters: explicit width and height to prevent layout shift, modern formats, responsive sizes, and lazy-loading everything except the LCP element itself, which should load eagerly. We report LCP from both Lighthouse, which gives a controlled lab number, and CrUX, which gives the field number Google actually uses.