Largest Contentful Paint

Largest Contentful Paint measures the time from when a page starts loading until the largest visible content element has finished rendering on screen. That element is usually the biggest thing in the initial viewport: a hero image, a large banner, a video poster frame, or a prominent block of text. Because the largest element is typically the main thing a visitor came to see, this metric approximates the moment the page's primary content is actually visible and the page feels loaded. It is one of the most important measures of perceived loading speed.

The mechanics work by tracking which element occupies the most space in the visible area as the page loads and recording when that element is painted. The browser watches the loading process, identifies the largest content element within the viewport, and timestamps when it appears. The measurement can update as loading progresses, since a bigger element may render later and take over as the largest, and it settles once the page stabilizes. Largest Contentful Paint sits later in the loading sequence than First Contentful Paint, which marks the very first content, because it waits for the main, most substantial content rather than the earliest fragment. Anything that delays that key element, such as a slow server response, render-blocking resources, or a large unoptimized image, pushes the score higher, and higher is worse.

The term comes from the browser painting content to the screen, applied specifically to the largest such element. Google introduced Largest Contentful Paint in 2020 as one of the three Core Web Vitals, the set of user-centered metrics it uses to quantify page experience. Google has publicly described target thresholds for a good experience, generally treating a Largest Contentful Paint at or under a couple of seconds as good, and it incorporated these vitals as a ranking consideration, which drew intense attention to the metric across the industry.

Largest Contentful Paint matters because it correlates closely with how loaded a page feels to a real person. A fast Largest Contentful Paint means visitors see the main content quickly and are more likely to stay, engage, and convert, while a slow one leaves them waiting on a page that appears unfinished. Since it is both a direct experience signal and a component of the Core Web Vitals that inform rankings, improving it serves users and search visibility at once. For content and commerce sites alike, the speed at which the main image or headline appears can materially affect bounce rates and revenue.

The common mistakes almost always trace back to the largest element itself. Serving a huge, uncompressed hero image, loading that image late in the process, blocking rendering with heavy CSS and JavaScript, and relying on slow hosting all delay the paint. The fixes include compressing and properly sizing the main image, preloading it, reducing render-blocking resources, and speeding up the server response. Largest Contentful Paint works alongside the other Core Web Vitals, Cumulative Layout Shift for visual stability and Interaction to Next Paint for responsiveness, and it builds on earlier loading metrics like First Contentful Paint. Optimizing it is one of the surest ways to make a page feel fast and to satisfy the experience standards search engines reward.