Performance
Largest Contentful Paint
Also called LCP.
Largest Contentful Paint is the render time of the largest image or text block in the viewport. It approximates when the main content has loaded.
How it is measured
The browser reports `largest-contentful-paint` entries in ms as larger elements appear. The last one before user input is the value. Good is 2,500 ms or less at p75.
It breaks down into four parts: time to first byte, resource load delay, resource load time, and element render delay. Looking at each part tells you where to act.
Worked example
A blog's hero image is the LCP element. TTFB is 420 ms, the image request starts at 1,350 ms because it is found late in a CSS background, it downloads in 900 ms, and renders at 2,380 ms for a total of 2,380 ms. After preloading and moving it to an img tag, the image starts at 450 ms and LCP is 1,520 ms.
On the article template the LCP element is a headline, so the same fix does nothing and only a font change helps.
How it differs
Largest Contentful Paint is about the main content. First Contentful Paint is about the first content of any kind. Time to first byte is only the server part. All three are separate, and LCP is the one in Core Web Vitals.
Common errors
Lazy loading the LCP image. Using a CSS background so the browser finds it late. Not knowing which element is the LCP. Optimizing the server when the delay is render. Checking only desktop.
In practice
Find the LCP element on each key template in DevTools. Preload it, set high priority, size it properly, and look at all four parts of the time.