LCP Debugger

About the LCP Debugger

The LCP Debugger measures the Largest Contentful Paint of any web page and shows you exactly which element it is and why it is slow. Largest Contentful Paint is one of Google's Core Web Vitals. It records how long the largest image or block of text in the viewport takes to appear while the page loads.

The tool loads your page in a real Chromium browser on a throttled mobile and desktop connection, finds the LCP element the same way Chrome does, and breaks the time into its four parts so you know where the delay comes from. It also pulls real user data from the Chrome User Experience Report, so you can compare the lab result with what your visitors actually experience.

A good LCP is 2.5 seconds or less. Between 2.5 and 4 seconds needs improvement. Above 4 seconds is poor. Reports are shareable and stay available for 14 days.

How to fix the Largest Contentful Paint

LCP is made of four parts that add up to the total: Time to First Byte, Resource Load Delay, Resource Load Duration, and Element Render Delay. The fastest way to improve LCP is to find the biggest part and work on that first. This report highlights it for you.

Time to First Byte (the server). If most of the time goes to waiting for the server, no image change will help. Add caching or a CDN, speed up slow database queries, and remove redirects that run before the HTML arrives.

Resource Load Delay (the image starts late). The browser found the LCP image too late. Put a real image tag in the HTML the server sends, add fetchpriority="high", preload it, and remove loading="lazy" from it. Avoid using a CSS background image for the most important visual, because the browser only finds it after downloading the CSS.

Resource Load Duration (the image is slow to download). The image is too heavy. Serve it as AVIF or WebP, size it for the space it fills, use responsive srcset, and compress it properly.

Element Render Delay (it paints late). The element loaded but could not paint yet. Remove or defer render-blocking CSS and JavaScript, render content on the server, and for text set font-display to swap and preload the web font.

Known Issues

Some results depend on how the site responds to an automated visit.

• The LCP element can differ from what you expect. The tool reports the element Chrome actually measures, which may be a background block or a piece of text rather than your hero image.
• Cross-origin images need a Timing-Allow-Origin header, or the browser cannot read their load timing. When that header is missing, the load parts of the breakdown may read as zero and the tool marks the result as approximate.
• The LCP element depends on the viewport, so the mobile and desktop results can point to different elements.
• Sites that block data-center traffic, are very slow, or need a cookie click may fail to load. Try again, or test a URL that does not require interaction.

Frequently Asked Questions

What is a good LCP score?

Google considers an LCP of 2.5 seconds or less to be good. Between 2.5 and 4 seconds needs improvement. Above 4 seconds is poor. The score is measured at the 75th percentile of real visits.

Why is my LCP element not the one I expected?

Chrome picks the largest image or text block in the viewport as the page loads. That is not always your hero image. It can be a headline, a background image, or a large paragraph. The report shows the exact element so you can see what Chrome measured.

What are the four parts of LCP?

Time to First Byte is how long the server takes to respond. Resource Load Delay is the gap before the LCP image starts downloading. Resource Load Duration is the download itself. Element Render Delay is the time between the image finishing and the element painting. Together they add up to the total LCP.

Does the tool support a text LCP?

Yes. When the largest element is text there is no image to download, so the two resource parts are zero and the time sits in the server and render parts.

How is this different from the field data?

The lab result is a single controlled load from our servers. The Chrome UX Report data is aggregated from real Chrome users over the last 28 days. Use the lab result to reproduce and fix issues, and the field data to confirm what real users experience.

Disclaimer

This is a lab tool. It loads your page once per device from our servers under throttled conditions, so the result is a controlled measurement and not a guarantee of what every visitor sees. Real user experience varies with device, network, and location, which is why we show the Chrome UX Report field data alongside the lab result. Use this tool to find and fix issues, then confirm the improvement in the field data over time.