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, and 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: The specific Core Web Vitals metric being evaluated.
- Pillar: The aspect of user experience the metric measures.
- Good Threshold: The target value for optimal user experience.
- Poor Threshold: The value below which user experience is significantly degraded.
- Impact on UX: A brief description of what the metric measures.
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 aim for the following LCP measurement ratings:
- 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
To improve LCP scores, consider the following 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.
