Largest Contentful Paint

The Largest Contentful Paint (LCP) measures when the main page content is displayed on the screen. This is the time when the largest page element is rendered.

LCP is a paint timing metric, like First Paint and First Contentful Paint. Contentful means that content like text or an image were rendered, rather than just showing empty boxes.

Filmstrip explaining Largest Contentful Paint

Note that the Largest Contentful Paint can update later on in the page load process, if a large part of the UI is updated. For example, this might happen when a low-resolution image is replaced with a high-resolution one, or when a slider advances to the next slide.

In this example the full page renders, but then parallax is enabled for the background image, leading to a higher LCP value.

Largest Contentful Paint updating during page load

The Largest Contentful Paint is one of the three Core Web Vitals Google uses as part of its search rankings.

How to improve Largest Contentful Paint

To optimize the LCP, first identify the element that's causing it. You can use the tools discussed below to do this.

General load time improvements

The Largest Contentful Paint happens relatively late in the page load process, so it will also be affected by improvements that target the initial rendering. You can read more about that in the First Contentful Paint article.

Here are some key ways to improve the initial load:

Reduce server response time for the initial document request. Server response time is often a problem for heavy Content Management Systems with a lot of plugins.

Reduce render-blocking JavaScript files or CSS stylesheets. These files are loaded after the initial document request, but still prevent the page from rendering. Move scripts to the end of your <body> tag or add the async attribute to the script tag. Avoid sequential requests made by CSS files, for example when using @import.

Handling slow-loading images

Image files can be large and take a long time to download. Because of that, they are often the cause of a slow Largest Contentful Paint.

The easiest way to speed up image downloads is to use a modern compressed image format like WebP. Also check if the image has the correct size – you won't need to load a 2000x3000 pixel image on a small phone.

Look at the request chart in the Chrome DevTools network tab to see when the image starts and finishes downloading. Is there JavaScript code that needs to run before the image starts loading? Consider speeding up that code or using a preload tag to load the image.

Are other images downloading at the same time? Maybe lazy load images further down on the page so that the image that's affecting LCP is prioritized.

How does LCP affect Lighthouse scores?

The Largest Contentful Paint determines 25% percent of the overall Lighthouse score. This table shows the maximum LCP you'd need to achieve a certain LCP subscore.

LCP subscore Max LCP (Mobile) Max LCP (Desktop)
100 1.6s 0.6s
90 2.5s 1.2s
50 4.0s 2.4s
10 6.5s 4.9s

Measuring Largest Contentful Paint

PageSpeed Insights

The easiest way to measure the Largest Contentful Paint of you website is to use Google's PageSpeed Insights tool. It will report real user data Google has already collected and also trigger a lab-based test of your website. These results are reported under Field Data and Lab Data, respectively.

Google uses a fairly slow network connection in the lab test, so your metrics will usually be slower in the lab than they are for real users. For example, for you Youtube the field LCP is 3.1s, while the lab test returns a value of 7.8s.

If you speed up your website the lab data will improve immediately. However, it will take a while for up-to-date real-user data to be collected.

PageSpeed Insights report for Youtube

The lab test is run using Lighthouse, so PageSpeed Insights also provides a deeper page analysis that highlights opportunities for improvement.

You can also find the element that caused the Largest Contentful Paint in the Diagnostics section.

Largest Contentful Paint element in Lighthouse report

Chrome DevTools

If you run a Performance recording in Chrome's developer tools, you can find the Largest Contentful Paint in the Timings Section.

If you click on the LCP marker it will highlight the element causing that paint on the page.

Largest Contentful Paint timing and element in DevTools

DevTools also has a Lighthouse tab that generates a report similar to the PageSpeed Insights one.

Using the Largest Contentful Paint API

You can use a PerformanceObserver to access the LCP of a page that's open in your browser. Paste the following script in the console of your browser's developer tools:

let lastLcp;
const po = new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  for (const entry of entries) {
    if (entry.startTime !== lastLcp) {
      console.log(
        `New LCP: ${entry.startTime}ms
Size: ${entry.size} px^2
HTML: ${entry.element.outerHTML.slice(0, 80)}`
      );
      lastLcp = entry.startTime;
    }
  }
});
po.observe({ type: "largest-contentful-paint", buffered: true });

Every time the Largest Contentful Paint is updated you'll get a message in the console showing the element HTML and the size of the element.

Largest Contentful Paint API

DebugBear

If you're continuously monitoring web performance using DebugBear, you can find the LCP on the Overview tab for each page.

Largest Contentful Paint timing and element in DevTools


Still need help? Contact matt@debugbear.com for support.
DebugBear is a website monitoring tool built for front-end teams. Track performance metrics and Lighthouse scores in CI and production. Learn more.
© 2021 DebugBear Ltd