Largest Contentful Paint

Largest Contentful Paint Explained

Largest Contentful Paint is the amount of time it takes a page to render the largest content block visible in the viewport. It measures how long users have to wait to see the most important content on the page.

LCP is a user experience metric that answers the question "how long until a page shows users what they’re here for?"

When measuring and tracking Largest Contentful Paint, the clock starts as soon as the user’s browser requests the URL from your server.

It’s important to note that Largest Contentful Paint is fundamentally different from the concept of page load time. Load time, as measured by Google, simply looks at how quickly your server starts sending information to a browser (known as "time to first byte").

But a real person doesn’t care about when a website’s server starts sending the first piece of data. They care how long they’ll have to wait until they can start consuming the content on the page.

What is a good Largest Contentful Paint Score?

According to Google, in order to provide the best user experience your site should have an LCP of 2.5 seconds or less.

‍Like the other Core Web Vitals metrics, LCP is scored on a spectrum from "good" to “poor”:

• Good: Any LCP of 2.5 seconds or less is considered good.
• Needs Improvement: Scores between 2.5 seconds and 4.0 seconds need improvement.
• Poor: An LCP longer than 4.0 seconds is poor and as a result, your users are having a bad experience when visiting your website.

How LCP works

In very simple terms, scoring LCP works by recording how long elements on the page take to load and render once the user (or tool if it’s a lab test) requests the page from their browser. Google looks at the sizes of the various content elements that will render within the user’s device viewport, figures out which is the biggest one, and starts counting how much time until that element has rendered.

Currently, Google tracks the following elements when calculating First Contentful Paint:

• <img> or <image> elements: As you probably guessed, these are tags for images. This includes an <img> tag appearing in an <svg>.
• <video> elements: For videos, LCP looks at what is known as the "poster image". This is the image specified using the controls poster=”” attribute within the <video> tag.
• Background images: Elements that use the url() CSS function to load an image as a background. Images loaded using a gradient CSS function will not be tracked for LCP purposes.
• Text elements: To measure text content, LCP looks for block-level elements that specify text, such as paragraphs, headers and lists.

Shifting layouts and LCP

Many websites load in stages, resulting in layout shifts and new elements appearing on users’ screens. In these instances, a few things happen in the Largest Contentful Paint calculation.

• The browser identifies and records the largest element on the screen after the first frame has been rendered. With a blog post, for example, this would likely be the header text with the article’s title.
• When the second frame has been rendered and a new element appears, the browser makes a second record identifying the new largest element (if there is one). This is how the browser would handle a header image loading in the second frame for a blog post.
• As new elements are loaded and rendered, the browser will make a record of any that appear in the viewport that are bigger than the previous largest element. These bigger elements will then become the element that is tracked for Largest Contentful Paint.
• As the layout shifts and elements are pushed off the viewport, that doesn’t change what’s recorded as the largest element. So if the blog post loads a large block of text that is pushed off the page by smaller elements, such as a table of contents block, that initial text remains the largest content even though it’s now out of the viewport.
• The browser stops tracking for LCP once the user interacts with the page since user interaction often changes what’s visible in the viewport (by scrolling down the page, for example).

In the example below we see the first several frames of a page rendering various elements:

So as this page loads, it renders some text elements of various sizes and then some images.

So here’s how LCP would work for this page:

• In the first frame, the small text is the first element loaded and rendered (this is what’s known as First Contentful Paint).
• In the second frame, a large element containing some header text loads along with some smaller text elements below. This text element with the header becomes the largest element on the page.
• More text elements load. However, they are all smaller than the header element so they aren’t counted toward LCP.
• A large image loads at the very bottom of the page but only a small part of it is visible in the viewport. Since this visible part of the image is smaller than the header text element, this image doesn’t count for Largest Contentful Paint for the page.
• An image is rendered on the page. This image is larger than the header text block, so it becomes the largest element on the page.

The time it takes the page to load the large image, from the time the user requests the URL from the site’s server, is the LCP score. So if the image loads after 1 second, the LCP would be "good" while if the image rendered in 3 seconds the LCP would be “poor”.

Why Largest Contentful Paint matters

Largest Contentful Paint is a measurable and accurate way to measure how long it takes a page to be useful when it loads for real-life users. This makes it a fundamental parameter for evaluating and scoring a website’s user experience. Plus it’s an easy metric to track and optimize around, which always helps.

Beyond user experience, and at a very practical level, Largest Contentful Paint is important because Google uses LCP scores as part of its Core Web Vitals metric when ranking websites in search results.

Having a poor LCP for your site doesn’t just mean that your users are waiting longer than they should for the content to load. It could also be negatively impacting SEO, preventing your site from appearing at the top of search results.