What Largest Contentful Paint Measures
Largest Contentful Paint (LCP) measures how long it takes for the largest visible element on your page to finish rendering. That element is usually a hero image, a large heading, or a prominent block of text — whatever takes up the most visual space above the fold. LCP is one of the three Core Web Vitals that Google uses to evaluate real-world user experience.
Google considers an LCP of 2.5 seconds or less to be good. Between 2.5 and 4.0 seconds needs improvement. Anything over 4.0 seconds is poor. These thresholds apply to the 75th percentile of page loads — meaning at least 75% of your visitors need to experience the page loading within 2.5 seconds for Google to consider your LCP passing.
Why LCP Matters
LCP captures what visitors actually care about: how long they wait before the page looks ready. A fast LCP tells the visitor “your content is here” and reduces the likelihood they’ll hit the back button. Unlike technical metrics that measure invisible processes, LCP directly reflects the perceived speed of your site.
For search rankings, LCP is part of Google’s page experience signals. Google measures LCP using field data from real Chrome users — not lab tests — so optimizing for a synthetic tool alone will not necessarily fix your LCP in search.
What Causes Slow LCP
LCP problems generally fall into four categories:
Slow server response. If your server takes a long time to start sending HTML, everything else is delayed. A high Time to First Byte (TTFB) pushes LCP later because the browser cannot begin rendering until it receives the HTML document.
Render-blocking resources. CSS and synchronous JavaScript in the document head prevent the browser from painting anything until they finish downloading and executing. Large stylesheets or undeferred scripts delay the moment the LCP element appears.
Slow resource loading. When the LCP element is an image, how quickly that image downloads is often the bottleneck. Unoptimized images, missing CDN distribution, or late-discovered image URLs all contribute. If the browser does not know about the image until after JavaScript runs or CSS is parsed, LCP suffers.
Client-side rendering. Sites that rely heavily on JavaScript to build the page content force the browser to download, parse, and execute scripts before the LCP element even exists in the DOM. This adds significant delay compared to server-rendered HTML.
How to Recognize an LCP Problem
The most reliable signal is your field data. Check the Core Web Vitals report in Google Search Console, or look at the field data section at the top of a PageSpeed Insights report. If your LCP is flagged there, that reflects what real visitors are experiencing.
In lab testing, PageSpeed Insights and Chrome DevTools will identify the specific LCP element and show a filmstrip of how the page loaded. This helps you pinpoint whether the delay is server-side, resource-related, or caused by render-blocking assets.
Further Reading
- Largest Contentful Paint (web.dev) — Google’s comprehensive guide to understanding and optimizing LCP.
- CrUX Methodology: LCP (Chrome for Developers) — Technical details on how Chrome measures and reports LCP in the field.