About Largest Contentful Paint
What is Largest Contentful Paint?
Largest Contentful Paint measures how long it takes for the biggest visible element to finish rendering - usually a hero image, a video poster or a block of headline text. It is the closest any single number gets to answering "when did the page appear?".
It deliberately ignores everything below the fold and everything invisible. A page can still be loading scripts and fonts long after its LCP, and as far as this measurement is concerned that is fine, because the visitor already has something to read.
That is what separates it from total load time. Load time describes the browser finishing its work; LCP describes the moment the page became useful, which is the moment the visitor actually experiences.
What counts as a good LCP?
Google treats 2.5 seconds or less as good, 2.5 to 4 seconds as needing improvement, and anything beyond 4 seconds as poor. The threshold applies to the 75th percentile of real page loads, so it has to be met for three visitors in four rather than on average.
That percentile matters more than it first appears. An average is easily rescued by fast visits on fast connections, while the 75th percentile keeps the slower quarter of your audience in view, which is usually the mobile quarter.
A page can therefore fail on LCP while feeling perfectly quick on the machine it was built on. That gap is the normal case rather than the exception.
What usually causes a slow LCP
The element itself is rarely the problem. What delays it is almost always something happening before it, and there are four usual culprits:
- A slow server response, which delays everything downstream before a byte is rendered.
- Render-blocking CSS and JavaScript in the head, which the browser must finish before painting.
- The hero image being large, unoptimised, or lazy-loaded when it should not be.
- The image being discovered late, because it is set by CSS or injected by a script rather than being in the HTML.
That last one catches people out most often. A browser can only start fetching what it can see in the markup, so an image the HTML never mentions cannot begin loading until the stylesheet or script that mentions it has been fetched and parsed.
How to improve it
- Put the hero image in the HTML as an img tag so the browser finds it immediately.
- Never lazy-load the LCP element - lazy loading is for what is below the fold.
- Serve it in a modern format at the size it is actually displayed at.
- Preload it if it is genuinely the most important thing on the page.
- Move non-critical CSS and JavaScript out of the render path.
- Reduce server response time, since every millisecond there is spent before anything else starts.
What this tool checks
The LCP test reads Google's field data for the page - measurements collected from real visitors in Chrome - and shows where it falls against the thresholds above.
If no result is shown, there is not enough traffic to the page for Google to report on, which is common for new or quiet pages. That is not a failure, and the sensible response is to fix the obvious causes rather than wait for a score to appear.
Where to go next