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

What is Largest Contentful Paint? Hero Image

Largest Contentful Paint (LCP) is a Core Web Vitals metric that 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 but also one that matters the most for page load speed. 

The LCP element is located above the fold, so it’s visible for a user without scrolling.

Examples of what might be considered an LCP element include:

  • the hero image, 
  • a text paragraph,
  • an image carousel,
  • video thumbnail, etc.

Since 2021, Largest Contentful Paint has been a Google ranking factor, introduced as part of the Page Experience update.

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.
score range for LCP metric

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.

Is Largest Contentful Paint important for SEO?

As the Page Experience update went live in June 2021, LCP, together with Cumulative Layout Shift and First Input Delay, is now used as a ranking factor in desktop and mobile search.

The reason Google chose LCP as a relevant SEO metric is that it directly influences user experience. The loading of the biggest element on a page determines how quickly the user will be able to view its contents and interact with it.

Additionally, LCP 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 through reducing your LCP score is bound to help.

How is Largest Contentful Paint calculated?

Details about the largest image or text paint visible before a user interacts with a page are retrieved through the Largest Contentful Paint API

The API gives webmasters the opportunity to look into how their pages are loaded and rendered.

Let’s analyze how it works to determine and calculate the largest contentful element.

Elements considered for LCP

Only some content types can be considered as candidates for Largest Contentful Paint, namely:

  • <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, such as <p>.

This is because the LCP API depends on the Element Timing API to track the rendering timestamps of the largest elements, and Element Timing only supports the above-mentioned formats.

Determining an element’s size

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.

Tracking the largest element

As a page loads, the largest element on it may change as the load progresses through its stages.

The algorithm choosing the largest element looks at all content elements 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 PerformanceEntry objects are dispatched.

Crucially, an element has to be rendered and visible to the user to be viewed as the largest contentful element.

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

Other things you should know about calculating 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:

  • Lab data is collected using predefined settings (device, location, etc.) and it works best for debugging and in test environments,
  • Field data is gathered from real users accessing your website and shows you their actual experience.

Lab data tools

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

Field data tools

Google uses your website’s field data collected from Google Chrome users to determine an LCP score, which is why I recommend focusing on these tools to measure it.

Field data is stored in Chrome User Experience Report (CrUX), which means you can optimize your site based on the very same data Google is using for ranking.

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. 

Here is how the data that the API reports differ from how LCP is calculated:

  • 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

You can also use the web-vitals JavaScript library which may help you work around those inconsistencies.

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.

Let’s go through the process of LCP optimization step-by-step.

Finding the Largest Contentful Paint element

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.

Here’s how to find the LCP element 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.

How you should proceed with optimizing your LCP depends on the type of element it is.

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

With text, ensure it’s placed in the initial HTML response the browser gets from your server.

Below, you will find specific guidelines on how you can deliver your LCP quicker.

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, 
  • the server being overloaded with requests and unable to 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 the browser requires them. 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.

LCP vs. other rendering metrics measuring performance

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

Though Google chose to include LCP in the ranking algorithm, there are other rendering metrics that you can optimize for your website:

  • 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 external resources like pictures don’t need to be loaded for the DCL to occur.

While all these metrics can prove useful when you’re optimizing your site, they aren’t the best options to specifically measure how fast the main content of a page loads and becomes visible to users.

Older metrics like load or DOMContentLoaded are not good because they don’t necessarily correspond to what the user sees on their screen. And newer, user-centric performance metrics like First Contentful Paint (FCP) only capture the very beginning of the loading experience. If a page shows a splash screen or displays a loading indicator, this moment is not very relevant to the user.

Largest Contentful Paint comes with some advantages and improvements – here is how they are explained in the document defining the Largest Contentful Paint 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. It 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

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: