A web performance metric that measures the render time of the largest contentful element visible in the viewport.
Largest Contentful Paint (LCP) is a web performance metric that measures the render time of the largest contentful element (such as an image, text block, or video poster) visible in the viewport during page load. It is designed to better correlate with user-perceived page load experience than earlier metrics like First Paint or First Contentful Paint by focusing on when the main content becomes visible. The metric provides a single, interpretable value that helps developers assess how quickly a page delivers its primary content.
Web developers, performance engineers, and site reliability engineers who need to measure and optimize real-world user experience for page load performance, particularly those working on content-heavy websites or applications where visual rendering speed is critical.
Developers choose LCP over alternatives because it offers a simpler, more reliable heuristic than complex metrics like First Meaningful Paint (FMP), avoiding outlier results while focusing on the largest visible element as a proxy for main content. It is standardized, implemented consistently across browsers via the PerformanceObserver API, and handles edge cases like removed elements (e.g., in carousels) and user interactions to provide a more accurate reflection of perceived load speed.
Specification for the LargestContentfulPaint API
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
LCP avoids complex heuristics like those in First Meaningful Paint, using a straightforward largest-element approach that reduces outliers and is easier for developers to reason about, as stated in the 'Why largest and contentful' section.
It correctly accounts for elements removed from the DOM, such as in image carousels, ensuring accurate measurement without being skewed by relayouts, as explained in the 'Removed elements' section.
LCP stops after the first user input to avoid capturing post-interaction content, aligning the metric with actual user experience during initial page load, detailed in the 'Interaction with user input' section.
It calculates element size based on visible area within the viewport, considering clipping and visibility, which makes the metric more reflective of what users actually see, as per the 'Visual size' section.
The heuristics to exclude background images aren't comprehensive, so LCP may sometimes include unimportant background images as the largest element, skewing results, as admitted in the 'Limitations' section.
LCP stops measuring after first input or navigation, leading to 'abort bias' where slow-loading content isn't captured, potentially misrepresenting performance for pages with delayed main content, discussed in 'The last candidate'.
Due to implementation efficiency concerns, LCP doesn't account for element occlusion, which might affect accuracy in complex layouts where elements overlap, as mentioned in the 'Visual size' section.