Largest Contentful Paint
A Core Web Vital measuring how long it takes for the largest visible content element — typically a hero image or main heading — to render in the viewport after page load begins.
Simple Explanation
Largest Contentful Paint (LCP) measures how quickly the biggest thing on your webpage becomes visible — typically your hero image, banner photo, or main headline. It answers: 'How long does a user stare at a loading screen before seeing the main content?' Google considers under 2.5 seconds as Good, 2.5–4 seconds as Needs Improvement, and over 4 seconds as Poor. LCP is the most important Core Web Vital for most websites because it directly reflects users' first impression of your page speed.
Advanced SEO Explanation
LCP is measured from navigation start to when the largest contentful element renders in the visible viewport. LCP candidates: <img> elements, <image> within SVG, <video> poster images, elements with CSS background-image, and block-level text containers. Root causes of poor LCP: slow server TTFB (>600ms makes good LCP nearly impossible), render-blocking CSS/JS delaying browser paint, unoptimized large images (most common cause), lazy loading applied to the LCP element (a critical mistake), and client-side rendering (JS must execute before LCP appears). Key fixes: preload the LCP image with <link rel='preload' fetchpriority='high'>, convert to WebP, use CDN, eliminate render-blocking resources, improve TTFB with caching.
Why Largest Contentful Paint Matters for Rankings
Primary 'loading speed' perception metric
LCP correlates most directly with users' perception of page speed. Fast LCP means users see meaningful content quickly, reducing abandonment.
Most commonly failing Core Web Vital
LCP failures are more common than CLS or INP issues. Unoptimized images are the #1 root cause, making LCP the first priority in most CWV projects.
Revenue impact at scale
Walmart found each 1-second LCP improvement correlated with 2% more conversions. For high-traffic sites, LCP optimization has direct, measurable revenue impact.
Real-World SEO Examples
LCP optimization: hero image
The complete fix for the most common LCP scenario.
<!-- Unoptimized: no preload, 2.5MB JPEG, no dimensions --> <img src="hero.jpg" alt="Hero"> → LCP: 5.8 seconds (Poor)
<!-- Optimized for fast LCP -->
<!-- Step 1: Preload in <head> -->
<link rel="preload" as="image" href="hero.webp"
fetchpriority="high" />
<!-- Step 2: Proper img element -->
<img src="hero.webp"
alt="Hero image"
width="1200" height="630"
fetchpriority="high" />
<!-- Result: WebP format, explicit dimensions,
preloaded, fetchpriority=high -->
→ LCP: 1.6 seconds (Good)Common Largest Contentful Paint Mistakes
✗ Mistake
Applying lazy loading to the LCP element
✓ The Fix
Never use loading='lazy' on your LCP image. Lazy loading delays it. Use fetchpriority='high' instead to prioritize it.
✗ Mistake
Hero image as CSS background-image
✓ The Fix
CSS background images load late and can't be preloaded effectively. Use HTML <img> for your LCP element.
✗ Mistake
Large JPEG hero images without compression
✓ The Fix
Convert to WebP (25–35% smaller). Target under 150KB for hero images. Use ToolsNest Image Compressor.
✗ Mistake
Ignoring TTFB as LCP root cause
✓ The Fix
If server response time (TTFB) exceeds 600ms, LCP will be poor regardless of image optimization. Fix TTFB first with caching and CDN.
Free Tools for Largest Contentful Paint
Related Articles
Largest Contentful Paint SEO Workflow
Identify your LCP element
Use Chrome DevTools Performance panel to find which element is your LCP.
Website Speed CheckerCompress and convert to WebP
Target under 150KB for LCP images. Convert to WebP format.
Image CompressorPreload the LCP resource
Add <link rel='preload' as='image' href='hero.webp' fetchpriority='high'> to the <head>.
Eliminate render-blocking resources
Defer CSS and JavaScript that blocks the browser from painting the LCP element.
Verify with field data
Check Search Console Core Web Vitals report after 28 days to confirm improvement.
Largest Contentful Paint FAQs
Frequently Asked Questions
People Also Search For
Continue Learning: Next Terms
Core Web Vitals
Google's standardized page experience metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — used as ranking signals and user experience benchmarks.
Intermediate⚙️Cumulative Layout Shift
A Core Web Vital measuring visual stability — the total amount of unexpected content movement that occurs during a page's lifetime as resources load and the layout reflows.
Intermediate⚙️Render-Blocking Resources
CSS and JavaScript files that prevent the browser from rendering visible page content until they are fully downloaded and processed — a primary cause of poor LCP and slow perceived page speed.
Advanced⚙️Lazy Loading
A performance technique that defers loading of non-critical resources — images, iframes, and components below the fold — until they're actually needed as the user scrolls toward them.
Intermediate