New Performance Metric: What is Largest Contentful Paint?

Photo by Hal Gatewood on Unsplash

How fast do your customers see the content of your site that matters to them? If you’re into pagespeed optimization you’ll probably know the metrics First Contentful Paint (FCP) and First Meaningful Paint (FMP). But do they really measure when your most important content gets rendered? Well, there’s a new metric in town that wants to settle this question once and for all: the Largest Contentful Paint (LCP)!

It’s not easy to tell if the content registered by FCP and FMP is really that important to your users. First Contentful Paint gets triggered when the first element of your site gets rendered above the fold. That could be a brand logo, your navbar or — in the worst case — a loading spinner.

First Meaningful Paint has some guiding principles to look for specific elements like headlines on a blog or images when you shop online. But there’s no guarantee that this content is the one you or your visitors consider important.

Even relying on technical metrics like DOMContentLoaded doesn't do the trick as it only tells you that an object was loaded from the DOM, not if it is visible to the user. So how do you find out when and how fast your most relevant content is rendered above the fold?

Members of the World Wide Web Consortium (W3C) and Google got together to tackle this question for you. The result is Largest Contentful Paint, a new metric that recently found its way into Google Chrome and Lighthouse as a hidden metric.

What is Largest Contentful Paint?

In a nutshell, LCP assumes that the largest object visible in the viewport is the one you consider to be your primary content. Largest Contentful Paint then measures the time it takes to load that element from the Document Object Model.

However, it only takes objects into account that are rendered above the fold like images, headings or videos. If you clutter that area with eye candy and useful information gets loaded outside the viewport, LCP won’t be much of use to you.

Because Largest Contentful Paint is a brand-new metric it is restricted to a handful of HTML-Elements to test its field usability. According to Google Developers these are the elements the LCP considers relevant:

• Image elements (<img>)
• Image tags within SVG code (<image>). <svg> elements are currently not covered by LCP.
• Thumbnail graphics of video elements (<video>)
• Background images with CSS (background: url('example.png'))
• Text-heavy block level elements like paragraphs (<p>), headings (<h1>, <h2>) or lists (<ol>, <ul>)

The Call to Action gets rendered as First Contentful Paint. A few seconds later, a slider showing various car models appears. It becomes the Largest Contentful Paint.

What does the ‘Large” in LCP mean?

Just because images and videos are a factor doesn’t mean that the “Large” in Largest Contentful Paint stands for download size. Instead of measuring elements by Kilobytes and Megabytes the API determines how much space they use within the user's viewport — and only the viewport. If elements are rendered both above and below the fold, only the visible part is considered relevant.

Same goes for scaled elements. An 800×800 pixel brand icon in your nav that gets scaled down to 50×50 pixel only counts for 50 pixels. If you scale images up, only the size of the original image is relevant.

The tricky part comes with texts as it is very difficult for LCP to draw a semantic connection between different paragraphs or headings. It is of utmost importance that you keep your HTML code clean and group block elements together with <div> or <article> tags to show that this is your main content. CSS styling like padding and margin does not affect the measured size of an element.

How does the Browser measure Largest Contentful Paint?

Your content doesn’t magically appear on screen. It gets loaded by the DOM in different phases. But what happens if your main content loads too late? Will it still be considered by LCP?

Let’s pretend you’re using two images in your sites header, image one is smaller than image two. Your browser renders image no. 1 first, it appears after a second and is considered as Largest Contentful Paint. Half a second later image no. 2 pops up. Is it too late to the party?

Fear not, a PerformanceEntry of type largest-contentful-paint saves the day. Within it, the browser references the largest element determined in the first frame of rendering. Frame by frame, object by object LCP compares rendered elements with the one referenced. If a new element is larger than the previous one, the browser updates the PerformanceEntry and therefore the Largest Contentful Paint.

This update cycle ends with first user interactions like clicks, taps, key presses or scrolling. Those interactions could change the content within the viewport (the effect of scrolling is obvious here) or turn hidden objects visible (think of tabs or content folding) so it is only logical to stop the evaluation process there.

LCP doesn’t have to be the longest loading element as Kicker.de shows in this example

How does Largest Contentful Paint handle repositioning?

If only content above the fold is considered for LCP, it is important to know what happens when content gets repositioned or resized while the metric is evaluated.

This is relatively straight forward: your browser only compares the initial position and the initial size when elements are rendered by the DOM. Scaling images up on page load won’t make them LCP candidates (and why would you trick yourself?) Same goes for a video that gets rendered below the fold and is then pushed up.

Even if a large element naturally renders first within the viewport and then gets pushed below the fold by other content, it is not considered as LCP because of its position within the DOM hierarchy.

An element is only considered as LCP if it stays above the fold. Here the red image and teaser get pushed below the fold by the green element.

How can I improve Largest Contentful Paint?

The paint time for Largest Contentful Paint consists of…

• … the server response time.
• … the time it takes to load resources like images and videos.
• … the time caused by render-blocking resources.
• … the JavaScript bootup time using Client-side Rendering.

You should work on these four topics if you want to improve Largest Contentful Paint. Take a look at your critical rendering path, reduce the amount and size of resources or compress images with tools like TinyPNG.

Largest Contentful Paint — the key to measure important content?

The new LCP metric can help you determine how long it takes for your most important content to appear on your users screen. However, this only gives you vital information if Google’s assumption is correct and your main content covers the largest part above the fold. You should therefore analyze your site carefully instead of blindly following that metric. Everyone loves cat pictures — but not if they’re your LCP.

Please be aware that Largest Contentful Paint is still a work in progress. Lighthouse uses it as a hidden metric at the moment and will carefully monitor if the metric’s results turn out valuable. If LCP becomes an official part of the Lighthouse report, our performance tool Speedrank will feature it as well.

So what are your thoughts on Largest Contentful Paint? Will it be the holy grail of pagespeed metrics or as cryptic for you as First Contentful Paint and First Meaningful Paint? Just drop your two cents in the comments below or follow us on Twitter. You can also write us an email. Thank you for reading this article and for sharing your opinion with us!