What is LCP (Largest Contentful Paint)?
LCP measures the time it takes for the largest visible content element (image, video, or text block) to fully render on screen. It's one of Google's three Core Web Vitals and a direct ranking factor. Target: under 2.5 seconds.
What counts as the 'largest' element: - Images (<img>, <image> inside <svg>, video poster images) - Background images loaded via CSS - Block-level text elements (<h1>, <p>, etc.)
Common causes of poor LCP: 1. Slow server response time (TTFB > 800ms) 2. Render-blocking JavaScript and CSS 3. Large, unoptimized images (no WebP, no lazy loading, no priority hints) 4. Client-side rendering delaying content display
Optimization strategies: - Use next/image or similar for automatic optimization - Serve WebP/AVIF formats - Set priority/fetchpriority='high' on hero images - Preload critical fonts - Use a CDN for faster global delivery - Minimize server-side processing time - Remove unused JavaScript and CSS
Example
A landing page with a 2MB hero image takes 4.5 seconds for LCP. Converting to WebP (400KB), adding width/height attributes, and setting fetchpriority='high' brings LCP to 1.8 seconds — passing the threshold.