Largest Contentful Paint (LCP) is Google's most important Core Web Vitals metric and a direct search ranking signal. It measures how long it takes for the largest visible content element to render in the viewport — typically your hero image, a featured video, or a large text block. Getting LCP below 2.5 seconds is essential for both SEO and user experience.
What LCP Measures
LCP measures the render time of the largest image, video, or text block visible within the user's viewport. "Largest" is measured by element size (area in pixels), and "contentful" means the element contains meaningful content.
Elements that can be the LCP element:
<img>elements (including in picture elements)<image>elements inside SVGs<video>elements (poster image)- Block-level elements with background images (via CSS
background-image) - Text blocks (the largest block of text on the page)
Elements that are NOT candidates for LCP:
<svg>elements (without contained images)<video>elements (the video itself, not the poster)- Elements with
opacity: 0 - Elements with
visibility: hidden
LCP Thresholds and Their Meaning
| Score | LCP Value | Impact | |-------|-----------|--------| | Good | ≤ 2.5 seconds | Google's "Good" threshold; 75th percentile target | | Needs Improvement | 2.5 – 4.0 seconds | Noticeable to users; moderate ranking penalty | | Poor | > 4.0 seconds | Significant user frustration; major ranking factor |
The 75th percentile rule: for a URL to get a "Good" designation in Google Search Console, 75% of real user LCP measurements must be ≤ 2.5 seconds.
How to Find Your LCP Element
Use Chrome DevTools Performance tab or the web-vitals JavaScript library to identify exactly which element is your LCP:
import { onLCP } from 'web-vitals/attribution';
onLCP(({ value, attribution }) => {
console.log('LCP element:', attribution.lcpEntry.element);
console.log('LCP value:', value);
console.log('LCP breakdown:', {
ttfb: attribution.timeToFirstByte,
loadDelay: attribution.resourceLoadDelay,
loadTime: attribution.resourceLoadTime,
renderDelay: attribution.elementRenderDelay,
});
});
The LCP breakdown tells you exactly where the time is spent — critical for knowing which optimization to apply.
The Four Sub-Parts of LCP
Google provides a useful breakdown of LCP into four phases:
TTFB + Resource Load Delay + Resource Load Time + Element Render Delay = LCP
TTFB (Time to First Byte)
→ Time from navigation start to server first byte
→ Fix: Server optimization, CDN
Resource Load Delay
→ Time from TTFB to when LCP resource starts loading
→ Fix: Preload LCP resource, eliminate blocking resources
Resource Load Time
→ Time to download the LCP resource
→ Fix: Reduce image size, CDN, fast hosting
Element Render Delay
→ Time from resource download to rendering on screen
→ Fix: Reduce main thread blocking, defer JavaScript
LCP Optimization Techniques
Preload Your LCP Image
The #1 LCP optimization for image-heavy pages:
<!-- Add this in your <head>, before other resources -->
<link rel="preload" as="image" href="/hero-image.webp" fetchpriority="high">
This tells the browser to start fetching the LCP image as soon as possible, before it discovers it in the HTML body.
Don't Use Lazy Loading on LCP Elements
Lazy loading (loading="lazy") delays image loading until the image is near the viewport. Never apply lazy loading to your LCP image:
<!-- WRONG: Never lazy load your LCP image -->
<img src="hero.webp" loading="lazy" alt="Hero image">
<!-- CORRECT: Let LCP image load immediately -->
<img src="hero.webp" alt="Hero image" fetchpriority="high">
Optimize LCP Image Format and Size
<!-- Serve modern formats with appropriate fallback -->
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero image" fetchpriority="high"
width="1200" height="600">
</picture>
Always specify width and height attributes on images to prevent CLS and help the browser allocate space before the image loads.
Use a CDN for Your LCP Image
The physical distance between your image server and your user directly impacts LCP. A CDN serves images from the nearest edge node, reducing image delivery time from 300ms+ to under 50ms for most users.
Eliminate Render-Blocking Resources
Resources that block rendering delay when the browser can paint any content, including your LCP element:
<!-- Move non-critical CSS to async loading -->
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
<!-- Defer non-critical JavaScript -->
<script src="analytics.js" defer></script>
Monitoring LCP in Production
Lab Monitoring with AzMonitor
Configure continuous LCP measurement from multiple global locations:
monitor:
type: performance
url: https://yoursite.com
metrics: [lcp, fcp, cls, inp, ttfb]
frequency: every_6_hours
alert_thresholds:
lcp_ms: 2500
regression_alert: 20% # Alert if LCP worsens by 20%+
locations: [us-east, eu-west, ap-southeast]
This catches LCP regressions from deployments within hours — before they accumulate in your CrUX data and affect search rankings.
Field Data Monitoring
Use the web-vitals library to capture real user LCP and send it to your analytics:
import { onLCP } from 'web-vitals';
onLCP(({ value, id, attribution }) => {
// Track LCP by page, device type, connection speed
analytics.track('lcp', {
value,
page: window.location.pathname,
connection: navigator.connection?.effectiveType,
deviceMemory: navigator.deviceMemory,
lcpElement: attribution.lcpEntry?.element?.tagName,
});
});
Segment your LCP data by device type and connection speed — your desktop LCP might be excellent while mobile LCP is poor.
LCP and Business Metrics
Deloitte's research found that improving mobile page speed by 0.1 seconds increased retail consumer spending by 9.2%. LCP is one of the strongest performance-to-revenue correlators available.
Google's own research found that pages in the "Good" LCP range have 24% lower abandonment rates than pages with "Poor" LCP.
Monitoring LCP continuously and maintaining it below 2.5 seconds is one of the highest-ROI technical investments a web business can make.
Start LCP monitoring with AzMonitor and track your Core Web Vitals baseline across global locations. See also Core Web Vitals monitoring guide for the complete picture.
3 monitors free forever · No credit card needed · Set up in 2 minutes
Start monitoring free →