LCP (Largest Contentful Paint)
Core Web Vital measuring when the largest visible element finishes loading.
What is LCP (Largest Contentful Paint)?
Largest Contentful Paint (LCP) measures perceived load speed by marking the point when the page's main content has likely loaded. It identifies when the largest image or text block becomes visible within the viewport.
LCP typically involves hero images, large text blocks, or video poster images. A good LCP score is under 2.5 seconds; anything over 4 seconds is considered poor.
Why LCP (Largest Contentful Paint) matters
LCP directly reflects how quickly users see meaningful content. Slow LCP frustrates users and increases bounce rates. As a Core Web Vital, it's a direct ranking factor. Improving LCP often provides the biggest user experience improvement.
How to implement
Identify the LCP element for key pages
Optimize server response time (TTFB)
Use next-gen image formats (WebP, AVIF)
Preload critical resources
Remove render-blocking resources
Use a CDN for static assets
Code example
<!-- Preload LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- Responsive images with modern formats -->
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="Hero" fetchpriority="high">
</picture>Common mistakes to avoid
- Not knowing which element is the LCP
- Lazy loading the LCP image
- Using unoptimized images
- Too many render-blocking scripts
Examples
Hero image preloaded with fetchpriority='high'
WebP images reduce load time 30%
CDN reduces TTFB from 800ms to 200ms
Frequently asked questions
Images, video poster images, background images (via url()), and block-level text elements. The largest visible element in the viewport at load time.
Yes, preloading the LCP image with fetchpriority='high' can significantly improve LCP, especially if the image URL isn't in the initial HTML.