A user-centric Core Web Vitals (CWV) metric used to measure perceived load speed. It is one of the three pillars of Google’s performance signals, sitting alongside:
- Interaction to Next Paint (INP), which measures responsiveness
- Cumulative Layout Shift (CLS), which measures visual stability
Specifically, LCP marks the point in the page load timeline when the largest text block or image element visible within the viewport has finished rendering, indicating to the user that the page is becoming functionally useful.
Unlike older metrics (such as First Paint or DOMContentLoaded), LCP focuses on what the user actually sees as the main content, making it a highly accurate reflection of when a page becomes useful to a visitor.
Core Web Vitals Comparison
To pass the Core Web Vitals assessment, a page must meet the “Good” threshold for all three metrics at the 75th percentile of real-user visits.
| Metric | Pillar | “Good” Threshold | “Poor” Threshold | Impact on UX |
| LCP | Loading | ≤ 2.5s | > 4.0s | How fast does the main content appear? |
| INP | Interactivity | ≤ 200ms | > 500ms | How fast does the page react to clicks/taps? |
| CLS | Visual Stability | ≤ 0.1 | > 0.25 | Does the content jump around while loading? |
Weighting in Performance Scores
While Google uses these three metrics for search ranking, they are weighted differently in diagnostic tools like Lighthouse to calculate an overall Performance Score (0–100). As of 2026, the current weighting for the primary performance score typically looks like this:
- LCP (Largest Contentful Paint): ~25%
- CLS (Cumulative Layout Shift): ~25%
- TBT (Total Blocking Time): ~30% (Used as a lab-data proxy for INP)
- FCP (First Contentful Paint): ~10%
- Speed Index: ~10%
Key Technical Standards
To provide a good user experience, sites should 1.
| Rating | LCP Measurement |
| Good | ≤ 2.5 seconds |
| Needs Improvement | > 2.5s and ≤ 4.0s |
| Poor | > 4.0 seconds |
Elements Eligible for LCP
The browser’s LCP API currently considers the following elements:
<img>elements.<image>elements inside an<svg>.- Video poster images.
- Elements with a background image loaded via the
url()function. - Block-level elements containing text nodes or other inline-level text elements.
Common Factors Affecting LCP
A poor LCP score is typically caused by one of four issues:
- Slow Server Response Times: High Time to First Byte (TTFB) due to unoptimized databases or server-side routing.
- Render-Blocking JavaScript and CSS: Scripts or styles in the
<head>that prevent the browser from painting pixels until they are downloaded and parsed. - Slow Resource Load Times: Large, unoptimized images or videos that take several seconds to download.
- Client-Side Rendering: If the main content is generated via JavaScript, the browser must fetch, parse, and execute the script before the LCP element can be displayed.
Optimization Strategies
- Apply LCP Image Prioritization: Use
fetchpriority="high"on the LCP image tag to tell the browser to download it immediately. - Optimize Images: Use modern formats like WebP or AVIF and ensure images are properly sized for the user’s screen.
- Implement a CDN: Distribute content closer to the user to reduce latency.
- Critical CSS: Inline the essential CSS required for above-the-fold content and defer the rest.
Note: LCP is a dynamic metric. If a larger element (like a hero banner) finishes loading after a smaller one (like a headline), the LCP “candidate” will update to the larger element. The final LCP score is recorded once the user interacts with the page or it finishes loading.
