Definition
This is the metric to use when you want to quantify the moment a user feels "the screen has now shown up" upon opening a page. Largest Contentful Paint (LCP, "the time until the largest content is painted") is the time it takes for the largest content element within the viewport (the region actually visible on screen right now) to be painted. It is one of the Core Web Vitals (Google's bundle of user-perceived performance metrics).
Why it matters
Even if the first byte arrives quickly, if the large image or heading the user actually wanted to see appears late, the page feels "slow." Server response time (TTFB) or the moment the first pixel is drawn (FCP) alone cannot capture this perception. LCP measures "when did the largest chunk of the body become visible," giving a value closest to the moment the user actually perceives the content.
How it works
Images, video posters (the preview frame before playback), background images, block-level text blocks, and so on become LCP candidates. As it renders, the browser keeps updating "the largest element painted so far," then stops updating when user input (scroll·click) comes in and finalizes the last value. The element must go through the critical-rendering-path (the browser's processing order from parsing HTML·CSS to painting the screen) and reach a paintable state to be measured.
Practical application
For elements likely to become the LCP, such as a hero image, raise the priority to fetch them early. Apply Next.js Image's priority attribute, the sizes attribute that lets responsive images pick the correct size, and CDN caching. For adjusting resource priority, refer to the resource-priority document.
Trade-offs
Excessive preload (instructing the browser to "fetch this resource ahead of time") can take up bandwidth first and actually delay other resources. Applying it to just one true LCP candidate is the default.
When not to use it
- When the LCP element is in a folded region (off-viewport) so the user effectively does not see it at first — raising priority yields no perceived improvement.
- A light, text-only page — font loading is the bottleneck, not image priority adjustment.
Common mistakes
- Lazy-loading the LCP element (such as the first-view hero image) with
loading="lazy", so the most important element appears late. - Overusing
priorityeven on images that are not LCP candidates, diluting the priority signal.
Related concepts
- critical-rendering-path — the render order until an element becomes paintable
- resource-priority — priority adjustment to fetch the LCP resource first