Test setup
Test data
Notifications
API
Integrations
Team Access
Other
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.
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.
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.
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.
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.
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.
DebugBear
If you're continuously monitoring web performance using DebugBear, you can find the LCP on the Overview tab for each page.
