Largest Contentful Paint
The Largest Contentful Paint (LCP) measures when the main page content is displayed on the screen. This is the time during the loading process of a website when the largest page element is rendered.
The Largest Contentful Paint is one of the three Core Web Vitals Google uses as part of its search rankings, along with Cumulative Layout Shift and First Input Delay.
This article explains how LCP works as well as how to measure and optimize it.
What is Largest Contentful Paint?
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.
What is a good Largest Contentful Paint?
Websites should have an LCP of 2.5 seconds or less.
Largest Contentful Paint is one of Google's Core Web Vitals metrics that impact search result rankings.
| LCP range | Rating |
|---|---|
| < 2.5 seconds | Good |
| < 4.0 seconds | Needs Improvement |
| > 4.0 seconds | Poor |
How to improve Largest Contentful Paint
To optimize the LCP metric, first identify the element that's causing it. You can use the tools further down in this article 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. Slow server response time is often a problem for heavy Content Management Systems with a lot of plugins.
Reduce render-blocking resources like JavaScript or CSS files. These files are loaded after the initial document request, but still prevent the web 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.
Ensure the LCP image is referenced in the document HTML. For example, if you have a React app you should pre-render the page on the server, so the browser can start downloading the image right away.
Slow-loading images and preloading the Largest Contentful Paint image
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? Lazy loading images further down on the page may fix LCP issues by ensuring that the LCP-blocking image is prioritized.
How does LCP affect Lighthouse scores?
As of version 9, the Largest Contentful Paint determines 25% percent of the overall Lighthouse Performance score.
This table shows the maximum LCP you'd need to achieve a certain Largest Contentful Paint score.
| LCP subscore | Max LCP (Mobile) | Max LCP (Desktop) |
|---|---|---|
| 100 | 1.5s | 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 pField Data and Lab Data](https://www.debugbear.com/blog/web-performance-metrics-lab-vs-rum), 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.
How to identify the Largest Contentful Paint element
You can also find the element that caused the Largest Contentful Paint in the Diagnostics section under Largest Contentful Paint Element.
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 ? entry.element .outerHTML.slice(0, 80): "(no element)"}`
);
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.
The Web Vitals tab also shows a detailed Core Web Vitals report including LCP data from the Google's Chrome User Experience Report (CrUX).
You can also see the UI element responsible for the Largest Contentful Paint in the Web Vitals tab.
The LCP is highlighted in the filmstrip using a red border.
Largest Contentful Paint in Google Search Console
Google uses the LCP metric as a ranking factor, so reducing it improves your site's SEO.
Search Console can help you identify pages with a poor LCP. Select Core Web Vitals in the sidebar, then Open Report for either the mobile or desktop data.
You can click on each reported issue to see example URLs where LCP needs improvement. Note that Search Console groups pages together into different groups – the data you see doesn't always apply to that specific page URL.
Changes to how Largest Contentful Paint is defined
Different versions of Chrome measure LCP slightly differently. Google keeps track of changes to the LCP definition here. These changes aim to reduce cases where the LCP is identified incorrectly, resulting in a metric value does not match real user experience.