Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures the time it takes for the largest visible content element within the viewport to finish rendering. It's Google's proxy for 'when does the main content load?' — one of the most intuitive and user-relevant page speed measurements. LCP is a confirmed Google ranking signal and a direct indicator of perceived loading performance.
What Counts as the LCP Element
The LCP element is the largest image or text block visible in the user's viewport without scrolling. Eligible elements include:
- Images (<img> tags) — the most common LCP element on marketing sites
- Image elements inside CSS background-image (via the url() function)
- Video poster images
- Block-level text elements (large <p>, <h1>, <div> blocks with substantial text)
- SVG elements (less commonly)
The browser continuously updates the LCP candidate as the page loads. If a larger element appears later (e.g., a late-loading hero image), the LCP timestamp updates to reflect that element's load time.
LCP Thresholds
- Good: LCP under 2.5 seconds
- Needs Improvement: LCP between 2.5 and 4.0 seconds
- Poor: LCP above 4.0 seconds
These thresholds are measured at the 75th percentile of page loads — meaning 75% of real users should experience the threshold or better. This is important: you can't just optimize for fast connections and ignore mobile users on slower networks.
What Causes Slow LCP
- Unoptimized hero images: Large, uncompressed images (5MB+ JPEGs) are the single biggest LCP killer
- Server response time (TTFB): A slow server means the browser can't start rendering at all
- Render-blocking resources: CSS and JavaScript in the <head> that delay rendering
- Client-side rendering: JavaScript-heavy pages where the LCP element is rendered by JS after page load
- No preloading: Critical resources not preloaded, discovered late in the loading process
- Poor CDN setup: Static assets served from origin servers far from the user
How to Improve LCP
Image Optimization (Most Impactful):
- Serve hero images in WebP or AVIF format (30-50% smaller than JPEG/PNG at equal quality)
- Use Next.js <Image> component with priority={true} for above-fold images — auto-generates srcset + preloads
- Set explicit width and height to avoid layout recalculation
- Preload the LCP image: <link rel='preload' as='image' href='/hero.webp'>
Server & Network:
- Improve Time to First Byte (TTFB): Target under 800ms using CDN edge caching
- Enable HTTP/2 or HTTP/3 for parallel resource loading
- Use a CDN (Vercel Edge Network, Cloudflare) to serve static assets from nodes close to users
Rendering Strategy:
- Use Static Site Generation (SSG) or Server-Side Rendering (SSR) instead of client-side rendering
- Eliminate render-blocking stylesheets — inline critical CSS, defer non-critical
- Minimize JavaScript in the critical rendering path
Measuring LCP
Use Google's PageSpeed Insights (pagespeed.web.dev) for both lab data and field data. Chrome DevTools > Performance tab shows LCP timing in the filmstrip view. Google Search Console's Core Web Vitals report shows real-user LCP percentiles across your entire site, segmented by page group — invaluable for identifying which page types need the most attention.
Sagara designs and develops all client websites with LCP as a primary performance constraint. Our standard Next.js setup — with Image component priority loading, Vercel Edge CDN, WebP delivery, and SSG — consistently achieves LCP under 2.0 seconds for above-fold content, comfortably within Google's 'Good' threshold.