Largest Contentful Paint

screenshot of Largest Contentful Paint

Specification for the LargestContentfulPaint API

Overview

The Largest Contentful Paint (LCP) metric aims to provide developers with a reliable measure of their user's visual rendering experience. Unlike existing metrics such as First Paint and First Contentful Paint, LCP takes into account the importance of the painted content on the page. By focusing on the largest contentful element, LCP provides a more accurate representation of the main content that users find useful. This metric is easy to understand and reason about, making it valuable for developers looking to optimize their page load speed and improve user experience.

Features

  • Correlates with user experience: LCP is designed to better correlate with the user's perception of page load speed and visual rendering experience.
  • Describes speed of delivering largest contentful element: LCP measures the time it takes for the largest contentful element to be delivered to the screen.
  • Easy to understand and reason about: LCP provides a simple and practical approach to estimating a time that represents a meaningful paint for users, without relying on complex heuristics.
  • Combines high-level metric with low-level primitive: LCP is the high-level metric, while Element Timing serves as its low-level primitive, providing developers with more detailed insights if needed.

Summary

Largest Contentful Paint (LCP) is a new page load metric that aims to provide developers with a more accurate measure of their user's visual rendering experience. By focusing on the largest contentful element, LCP takes into account the importance of the main content on the page. This metric correlates better with user experience compared to existing metrics and is easy for developers to understand and reason about. With LCP, developers can optimize their page load speed and improve overall user experience.