What is the Largest Contentful Paint (LCP)?

Summary: The Largest Contentful Paint (LCP) metric helps to determine the loading speed of the largest visible element on a website. It is an important factor in providing a positive user experience and is considered a key component of the Core Web Vitals. The LCP measures the loading time of the largest visual element on a site, helping to ensure that users can access and interact with the content as quickly as possible.

What is the Largest Contentful Paint (LCP)?

The Largest Contentful Paint (LCP) is an important factor to consider when optimizing a website for search engines. Google's Largest Contentful Paint metric measures the user experience on a website, including performance and presentation.

A slow-loading website may lead to visitors leaving the page, which can negatively impact the website's ranking on Google. Websites need to prioritize fast loading times and LCP to provide the user with a good experience.

What is the Largest Contentful Paint?

The Largest Contentful Paint metric measures the time it takes for a website to display the largest, most important content on the screen in a ready-to-interact-with state. Google only considers content above the fold or content that is visible without scrolling, when calculating the LCP.

Examples of your Largest Contentful Paint could be:

  • Image
  • Background image
  • Video
  • Background image with CSS
  • Text elements
  • Cookie banner

The Largest Contentful Paint on nike.com

How to measure the Largest Contentful Paint?

There are two different methods for measuring what your LCP is:

  • Simulations of visitors under certain conditions (location, network, device). This is called lab data.
  • Experiences of real visitors, this is called field data.

In both cases, free tools can often be used. When you want to use lab data, it is useful to know who your target audience is, so you can adjust the settings accordingly. Think for example from which country they come. Some great lab data tools are:

If you want to know the exact experiences of your actual visitors, then you need to use field data. This is the most accurate and automatically incorporates the circumstance of your visitors. For field data there are the following tools that we recommend:

What is a good LCP score?

With each Core Web Vitals, Google has values you must meet to pass your Core Web Vitals assessment and thus get your SEO boost. You must achieve this score at the 75th percentile, meaning that at least 75% of your visitors must fall within these values.

To meet the LCP (Largest Contentful Paint) metric, it's crucial to ensure that 75% of your website's visitors experience a load time of 2.5 seconds or less. If the LCP takes longer to load, it may be necessary to make improvements to your website. A load time of more than 4 seconds can negatively impact the user experience for your visitors.

  • Good = between 0 and 2,5 seconds
  • Needs improvement = between 2,5 and 4 seconds
  • Poor = above 4 seconds

Largest Contentful Paint Score threshholds

If you regularly make changes to your website or frequently replace your hero images, it can be useful to constantly monitor your Core Web Vitals. There are many steps you can take yourself to optimize your LCP and perhaps even stay under 2 seconds.

How Renault improved its bounce and conversion rates by measuring and optimizing the Largest Contentful Paint: a 1-second improvement in LCP can result in a 14 percentage point decrease in bounce rate and a 13% increase in conversions.

What is the Largest Contentful Paint time?

Largest Contentful Paint is a metric that measures how long it takes a website to display the user its most extensive and interactive content. According to Google, this metric only takes into account the content that is visible without having to scroll, or "content above the fold."

Does LCP affect SEO?

Core Web Vitals are a set of metrics that measure the performance and user experience of a website. These metrics, including the Largest Contentful Paint (LCP), are considered by search engines like Google for SEO. While improving the LCP and other Core Web Vitals can help improve your website's ranking, it is important to note that they are just one of many factors that influence your ranking.

Improving the LCP can be seen as improving the user experience on your website. Where this in turn can lead to positive improvements.

What causes a poor LCP?

There are a lot of things that might be the cause for a poor Largest Contentful Paint. In general, 4 main groups might be the cause.

  1. Slow server response times
  2. Render-blocking JavaScript and CSS
  3. Slow resource load times
  4. Client-side rendering

Within those four main groups are different solutions on how to improve the LCP.

How to improve the LCP?

There are many different ways to improve your LCP. Constant monitoring is also important here. Below I list a few ways that can lead to a great improvement in your Largest Contentful Paint.

Optimize your image sizes

Almost everyone uses images on a website. It is important to keep in mind a few best practices. Always save your images in the correct dimensions (this also helps reduce Cumulative Layout Shift), and keep your images under 500kb.

Add priority hints to your LCP

"Hey browser, I know you're busy rendering all the other parts of the page, but when you have a moment, can you please make sure to load me too? I'm just an image, but I'm important for the overall look and feel of the page."

In other words, images are given a lower priority than stylesheets because CSS is necessary for rendering larger parts of the page, but the image is still important for the overall appearance of the page and should be loaded as soon as possible.

By adding a fetchpriority=highyou will make sure your LCP gets a higher priority, which will result in it loading faster.

Fetchpriority high to boost the LCP

Use efficient loading patterns

There are several ways to optimize the loading of resources, such as using lazy loading to only load resources when they are needed, using server-side rendering to deliver the initial content faster, and using resource hints (e.g., preconnect, prefetch) to improve the loading of resources.

Minimize render-blocking resources

Avoid including too many CSS and JavaScript files, and minimize their sizes. Use techniques like code splitting, lazy loading, and critical CSS to improve the loading performance.

Implement lazy loading (below the fold)

Load images, videos, and other heavy content only when they are needed, instead of loading them all at once. This helps improve the loading performance and reduce the Largest Contentful Paint (LCP) time.

lazyloading largest contentful paint

Optimizing your images won't always work

If your largest contentful paint is already an image of 250kb, it is fairly optimized. While there are ways to reduce its size further, the difference between 250kb and 150kb may not be noticeable for most visitors in the Netherlands due to their fast 4G or 5G internet connection. However, in areas with slower internet connections, such as rural Germany, optimizing that extra 100kb could make a noticeable difference in load times.

If you find that resizing your images is not working it may be an idea to look at other ways to improve your LCP.

Share blog post