Largest Contentful Paint
Understand LCP, the Core Web Vital that measures loading performance by tracking when the largest visible element renders on screen.
Largest Contentful Paint (LCP) measures the time from when the user initiates a page load to when the largest image, text block, or video visible in the viewport finishes rendering. It is one of the three Core Web Vitals and directly impacts search rankings.
Thresholds
| Rating | Value |
|---|---|
| Good | ≤ 2,500ms |
| Needs Improvement | 2,500ms – 4,000ms |
| Poor | > 4,000ms |
FastStats reports your LCP at the 75th percentile (p75) — meaning 75% of your page loads complete the largest paint within the reported time.
What Gets Measured
The browser identifies the largest content element in the viewport at the moment it finishes rendering. The following element types are considered:
<img>elements (including images inside<picture>)<video>elements with a poster image- Elements with a background image loaded via
url() - Block-level elements containing text nodes (paragraphs, headings, etc.)
<svg>elements
The LCP element can change during the page load. For example, a hero image that loads after an initial text heading will replace the text as the LCP candidate if it is larger. The final LCP value is the render time of the last largest element reported before the user first interacts with the page.
Understanding the Breakdown
When attribution is enabled, FastStats decomposes LCP into four sequential phases. This helps you identify exactly where time is being spent:
Time to First Byte (TTFB)
The time from the navigation start until the browser receives the first byte of the HTML response. This reflects server processing time, network latency, and redirect overhead.
Resource Load Delay
The time between TTFB completing and the browser starting to load the LCP resource (e.g., image). This delay occurs when the resource isn't discoverable in the initial HTML — for example, a background image referenced in CSS that hasn't been parsed yet, or an image rendered by client-side JavaScript.
Resource Load Duration
The time the browser spends actually downloading the LCP resource. For text-based LCP elements, this is zero because text doesn't require a separate network fetch.
Element Render Delay
The time from when the resource finishes loading to when the element is actually painted on screen. This can be caused by render-blocking stylesheets, synchronous scripts in the <head>, or heavy main-thread work that delays painting.
These four phases always add up to the total LCP time: TTFB + Resource Load Delay + Resource Load Duration + Element Render Delay = LCP.
Common Causes of Poor LCP
Slow Server Response
A high TTFB directly delays everything downstream. If your TTFB exceeds 800ms, the page is already fighting an uphill battle to achieve good LCP.
Fix: Use a CDN, enable server-side caching, optimize database queries, and consider edge rendering or static generation.
Late-Discovered Resources
If the LCP image isn't referenced directly in the HTML (e.g., it's injected via JavaScript or loaded from CSS), the browser can't start fetching it until the blocking resource is parsed.
Fix: Add a <link rel="preload"> hint for the LCP image so the browser can start downloading it immediately:
<link rel="preload" as="image" href="/hero.webp" />Unoptimized Images
Large, uncompressed images take longer to download, especially on slower connections.
Fix:
- Serve modern formats like WebP or AVIF
- Resize images to the actual display dimensions
- Use responsive images with
srcset - Apply appropriate compression levels
Render-Blocking Resources
CSS and synchronous JavaScript in the <head> block rendering until they're fully downloaded and parsed.
Fix:
- Inline critical CSS and defer the rest
- Add
asyncordeferto scripts - Remove unused CSS and JavaScript
Client-Side Rendering
If your LCP element depends on JavaScript to render (e.g., a React component that fetches data), the browser must download, parse, and execute the JavaScript before it can even begin painting.
Fix: Use server-side rendering (SSR) or static site generation (SSG) so the LCP element is in the initial HTML.
Interpreting LCP in FastStats
The metric detail page shows:
- p75 timeline — how your LCP score evolves over time
- Distribution chart — the spread of LCP values across good, needs improvement, and poor buckets
- Breakdown by page — which routes have the worst LCP
- Device comparison — mobile vs. desktop LCP (mobile is typically higher due to slower networks and CPUs)
- Attribution waterfall — the four-phase breakdown for diagnosing where time is spent
Interaction to Next Paint
Understand INP, the Core Web Vital that measures responsiveness by tracking the latency of user interactions from input to the next visual update.
Time to First Byte
Understand TTFB, the performance metric that measures server responsiveness by tracking the time from the request to the first byte of the response.