LCP phases
The four clocks inside LCP: server response, waiting to start the key resource, downloading it, and waiting for it to render.
See it
What it is
The LCP phases split one Largest Contentful Paint result into four buckets: TTFB, until the first byte of HTML arrives; resource load delay, from that byte until the LCP resource starts loading; resource load duration, while that resource downloads; and element render delay, from the download finishing until the browser paints the element. For a resource-backed candidate, those four times add up to LCP.
Reach for the breakdown when an LCP score is red but the fix is not obvious. A slow server needs caching or streaming, a long load delay needs earlier discovery or higher priority, a long download needs a smaller asset, and render delay points at CSS, JavaScript, fonts, or work that kept the pixels off screen.
Gotcha: not every LCP candidate has a file to download. If the winner is headline text, the resource delay and download buckets are zero and the time after TTFB belongs to render delay. Do not force every page into an image-shaped diagnosis or optimize the smallest bucket because its fix sounds familiar.
Ask AI for it
Break this page's Largest Contentful Paint into LCP phases before changing code. The quickest route is the web-vitals attribution build: onLCP with attribution reports ttfb, resourceLoadDelay, resourceLoadDuration, and elementRenderDelay directly. To derive them by hand instead, use a PerformanceObserver for 'largest-contentful-paint', PerformanceNavigationTiming.responseStart for TTFB, and the matching PerformanceResourceTiming.requestStart and responseEnd for the LCP resource. Calculate TTFB, resource load delay, resource load duration, and element render delay, and make them add back up to the measured LCP. If the asset is cross-origin, configure the CDN's Timing-Allow-Origin response header so the resource timings are visible. Fix only the largest phase, then report the before and after breakdown on the same mobile viewport and throttling profile. For a text LCP candidate, record both resource phases as zero and attribute the remaining post-TTFB time to render delay.