What is Largest Contentful Paint (LCP), And How To Optimize It

What is Largest Contentful Paint? Hero Image

quick summary

Studies show that the most important element on a web page – the one users want to see as fast as possible – is typically the largest one. Think news sites, weather.com, blog articles…

If you ever visited a page like that and then clicked back because it took ages to see the content you were hoping to see, you know the pain.

Largest Contentful Paint (LCP) is a web performance metric that measures how long it takes to load that largest element.

Keep reading to learn how to measure it on your website and optimize it.

Load is not a single moment in time — it’s an experience that no one metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as ‘fast’ or ‘slow.’
source: W3C

The time it takes to render a page’s content is an essential factor of User Experience. But while it’s great to build pages that load fast overall, users don’t generally expect all of the content to load quickly and simultaneously.

For most websites, the largest element in the viewport is the one that users should see first to initiate their journey through the page.

Because of that, Largest Contentful Paint is currently considered to be one of the essential rendering metrics, and Google made it one of the Page Experience factors.

This article will guide you through what LCP is and how to optimize it.

What is Largest Contentful Paint?

Largest Contentful Paint (LCP) is a Core Web Vitals metric. It measures when the largest element of a given web page becomes visible in the user’s browser.

LCP is a user-centric metric because the largest element in the viewport is usually the most important, and rendering it as soon as possible improves your visitors’ user experience.

LCP looks for the largest element loaded in the viewport throughout the process of loading the page and reports the time it took to render that element since the page started loading.

The LCP element is usually the hero image or a large text paragraph.

What’s a good LCP score?

Because LCP measures time to render, the lower your score is, the better, because your users will see the essential content sooner.

That being said, these are the thresholds that Google specified for LCP values:

  • Good – LCP of 2.5s or less,
  • Needs improvement – LCP between 2.5s and 4s,
  • Poor – LCP of 4s or more.

So if you want to “pass” the Core Web Vitals, you need an LCP score of 2.5s or less for 75% of all your page views.

Does your LCP score affect your SEO?

Yes. With the Page Experience update going live in June 2021, LCP, together with Cumulative Layout Shift and First Input Delay, will be used as a minor ranking factor in mobile search.

Perhaps more importantly, meeting the recommended thresholds for these three metrics will determine whether or not a badge is displayed next to your site in search results, which will likely have a significant impact on your clickthrough rate!

Google will use the field data for your website that is collected from Google Chrome users. These usage data are stored in the Chrome User Experience Report, which means you can optimize your site based on the very same data Google is using for ranking.

Why you should worry about Largest Contentful Paint

Even if you’re not worried about Core Web Vitals becoming a ranking factor, I still recommend focusing on LCP when improving your web performance.

Google chose this metric for a reason – it correlates well with user behavior metrics.

If you’re stuck improving your conversion rates, time spent on-page, or any other behavior metrics that have a direct impact on your business, improving your render performance is bound to help.

Other rendering metrics

Largest Contentful Paint is one of the rendering metrics. It means that it captures the moment in time when a particular portion of a web page is rendered in the user’s browser.

While Google chose LCP to include it in the ranking algorithm, there are many other rendering metrics you can consider improving:

  • Load Event fires when the whole page has been loaded,
  • First Paint marks the point when the browser renders anything different from what was previously on the screen,
  • First Contentful Paint marks the point when the first bit of content is rendered,
  • First Meaningful Paint shows when the essential content is rendered (chosen based on different heuristics when compared to LCP),
  • DOMContentLoaded fires when the initial HTML has been fully loaded and parsed. The difference between DCL and load is that for the DCL to occur, external resources like pictures don’t need to be loaded.

While all these metrics can prove useful when you’re optimizing your site, Largest Contentful Paint comes with some advantages and improvements that are described in the document defining the LCP API:

Developers today don’t have a reliable metric that correlates with their user’s visual rendering experience. Existing metrics such as First Paint and First Contentful Paint focus on initial rendering, but don’t take into account the importance of the painted content, and therefore may indicate times in which the user still does not consider the page useful.

Largest Contentful Paint (LCP) aims to be a new page-load metric that:

  • better correlates with user experience than the existing page-load metrics
  • is easy to understand and reason about
  • reduces the chance of gaming

The largest paint during the loading process of the page is likely to signify a meaningful event from the user’s perspective, and is, therefore, something we want to expose by default to developers, enabling performance teams, analytics providers, and lab-based measurement tools to collect those metrics without requiring extra annotation work by the folks creating the content itself.

source: W3C

How LCP is calculated

To measure when the largest content element was rendered, we need to:

  • determine which element was the largest by looking at the entire load process, and
  • record the timestamp when it is rendered.

Tracking the largest element

The algorithm choosing the largest element is looking at all content elements that are rendered in the viewport throughout the load cycle.

When the first frame is loaded, the browser dispatches the largest-contentful-paint PerformanceEntry.

As new elements are being loaded and the algorithm finds new, larger elements in the viewport, new entries are dispatched.

 

Measurement stops as soon as the user interacts with the page that’s being loaded.

Determining which element is the largest

The process of choosing the largest element to report by the algorithm is complicated, and there are some caveats you should know about:

  • For elements that extend outside of the viewport, only the portion visible in the viewport is considered,
  • For images that are resized, the size that’s considered is either their intrinsic size or the visible size – whichever is smaller.
  • CSS margin, padding, or border doesn’t affect the element size,
  • For text elements, the smallest rectangle that fits all text nodes is considered.

For most pages, the LCP element is the hero image or a text paragraph.

Element Timing

The Largest Contentful Paint API is built upon the Element Timing API to

The Element Timing API serves the purpose of tracking the rendering timestamps of image and text elements. It can be used to measure and monitor the loading performance of:

  • <img> elements,
  • <image> elements inside SVG documents,
  • poster images for <video> (placeholders shown when the video is loading or before the user hits “Play”)
  • <background-image> elements,
  • text nodes.

Because the LCP API depends on Element Timing to track the rendering of the largest element, any content types that aren’t listed above won’t be considered as candidates for LCP.

Other things you should know about measuring LCP

  • For images, render time is the time of the paint that immediately follows the image’s onload. This means progressive loading of images doesn’t help with reducing LCP.
  • Changes to an element’s size or position do not generate new LCP candidates. Only the element’s initial size and position in the viewport are considered.
  • If LCP is a text element, the earliest font load is considered. So the font can update, and LCP render time stays the same.
  • If you’re using CSS font-display: block; the measurement waits until the text is visible.

How to measure Largest Contentful Paint?

You can use both lab and field data to measure your site’s LCP, and both types of data have their uses.

LCP – Lab Data

The following tools can help you track your LCP measured in a lab:

LCP – Real User Data

I recommend looking into the Real User Data recorded by Google because that’s the data that is used to impact your rankings.

The Real User Data collected from Chrome users is stored in Chrome User Experience Report (CrUX).

CrUX data can be accessed via:

JavaScript API

As with other Core Web Vitals, you can use the LCP API if you have some experience with JavaScript. This allows for more granular control over what is being measured, but also has some drawbacks:

  • The API will dispatch largest-contentful-paint entries for pages loaded in a background tab, but those pages should be ignored when calculating LCP.
  • The API will continue to dispatch largest-contentful-paint entries after a page has been backgrounded, but those entries should be ignored when calculating LCP (elements may only be considered if the page was in the foreground the entire time).
  • The API does not report largest-contentful-paint entries when the page is restored from the back/forward cache, but LCP should be measured in these cases since users experience them as distinct page visits.
  • The API does not consider elements within iframes, but to properly measure LCP you should consider them. Sub-frames can use the API to report their largest-contentful-paint entries to the parent frame for aggregation.
source: Philip Walton

How to optimize your Largest Contentful Paint

Optimizing LCP comes down to finding out which element is your LCP element, and making it render faster in the user’s browser.

Your LCP score can be negatively affected during the entire process of loading your page, starting from your server, going through a Content Delivery Network, to the order in which assets are being rendered by the browser and the size of those assets.

The first step you need to take is to determine which LCP candidate triggers the final largest-contentful-paint entry and decides your LCP score – then you’ll know what it is that you need to make load faster!

Here’s how to do it using Google Chrome:

  1. Open the page you want to find the largest element for.
  2. Open Chrome DevTools (Ctrl+Shift+I on Windows, Command+Option+I on Mac).
  3. Navigate to the Performance tab.
  4. Click Record (or Ctrl+E- this will start profiling the performance of the page you have open.
  5. Reload the page using Ctrl+Shift+R (always use this instead of F5 when working on web performance – this method makes the page reload without using the cached assets).
  6. Stop recording in DevTools and look for LCP in the Timings section.
  7. Hovering or clicking on LCP will show you the largest element that determined your LCP score.

Now, the LCP element is usually a text node or an image. Below, you’ll find some techniques you can consider that should get you started working on delivering the LCP element quicker.

If it’s an image and your server isn’t to blame, proper compression should put you in the “good” LCP bracket already.

With text, if it’s placed in the initial HTML response the browser gets from your server, there’s not much else you can do, although some techniques can also be found below.

Server optimization

If your server reacts slowly to the requests sent by the browser, your LCP will be affected.

A slow server response may be caused by having to run complex computations before responding to the browser, dynamically generating the page server-side as opposed to serving a static page, or simply by the fact that your server is overloaded with requests and can’t timely handle them all

CDN

A CDN (Content Delivery Network) can help deliver your assets faster to users located in different parts of the world.

If you’re using a single server, a user on the other side of the world will have to wait longer until their browser can render your content. Using a CDN, you host your assets on multiple servers across the globe, and you’re able to deliver content sooner to users anywhere in the world.

Caching

Caching is a technique of storing copies of assets after they were downloaded once so that they don’t have to be downloaded each time they’re required by the browser. It is vital if you want a performant site, and taking advantage of caching will be beneficial to your performance way beyond just improving LCP.

Render-blocking resources

The process of loading a web page begins when the browser starts parsing the initial HTML downloaded from the server.

Parsing the HTML, generating the DOM tree based on it, and finally rendering the page is paused whenever the browser needs to load external CSS or JavaScript assets.

That’s why these assets are known as render-blocking.

Optimizing render-blocking resources is a complex process that involves only loading the essential resources at first and deferring the loading of non-critical assets until they’re needed.

Compressing images

Image compression is the art of maintaining a balance between the image quality and the size of the asset.

Since for most sites, the LCP element is an image, optimizing your images is critical to achieving good LCP.

Compressing text assets

Any text files needed to render your page (HTML, CSS, and JavaScript) can be compressed using Gzip, Brotli, or other compression methods to minimize their delivery size and lower your LCP score.

Wrapping up

The Largest Contentful Paint metric is a deceptively simple but effective way to measure when key content is displayed in the user’s viewport. With all the other metrics available, we are getting closer to a consistent, universal way of accurately measuring web performance with the user experience in mind.

For more insight into Largest Contentful Paint, you can watch what Onely’s Bartosz Goralewicz has to say about LCP: