LCP (Largest Contentful Paint) is often the most impactful Core Web Vital to optimize. It measures the time from when the page starts loading to when the largest element in the viewport is fully rendered. If your LCP is above 2.5 seconds, users perceive your site as slow—and Google may rank it lower.
What Does LCP Actually Measure?
LCP measures when the "main content" of a page becomes visible. The browser identifies the largest element in the viewport at the moment of render—this could be:
- A hero image or banner
- A large heading or text block
- A video poster image
- A background image loaded via CSS
The key insight is that LCP approximates what users actually care about: when does the page look "loaded"? Fast technical metrics mean nothing if users are staring at a blank screen.
LCP Thresholds: What's Good?
Google defines three performance tiers for LCP:
- Good: 2.5 seconds or less — Users perceive the page as fast
- Needs Improvement: 2.5 to 4.0 seconds — Noticeable delay, some users bounce
- Poor: Over 4.0 seconds — Significant user frustration, high bounce rates
These thresholds are measured at the 75th percentile of real user experiences. This means 75% of your visitors should experience an LCP of 2.5s or better for your page to be considered "good."
The Four Root Causes of Poor LCP
According to web.dev and years of performance research, slow LCP typically comes from four sources:
1. Slow Server Response Time (TTFB)
Before the browser can even start rendering, it needs to receive HTML from your server. If your Time to First Byte (TTFB) is slow, everything else is delayed.
Causes:
- Slow database queries
- Unoptimized server-side code
- No caching strategy
- Distant server location (no CDN)
Fixes:
- Use a CDN to serve content from edge locations close to users
- Implement server-side caching (Redis, Varnish, or built-in framework caching)
- Optimize database queries and consider read replicas
- Use static generation where possible (Jamstack approaches)
2. Render-Blocking Resources
CSS and JavaScript in the <head> can block the browser from rendering anything until they're fully loaded and processed.
Causes:
- Large CSS files blocking first paint
- Synchronous JavaScript in the head
- Too many render-blocking requests
Fixes:
- Inline critical CSS directly in the HTML
- Use
asyncordeferfor non-critical JavaScript - Remove unused CSS and JavaScript (tree-shaking)
- Consider loading non-critical CSS asynchronously
3. Resource Load Time
If the LCP element itself (usually an image) takes a long time to load, LCP will be slow regardless of how fast everything else is.
Causes:
- Large, unoptimized images
- Slow third-party resources
- No preloading of critical assets
- Images loaded lazily when they shouldn't be
Fixes:
- Optimize images: use WebP/AVIF format (30-50% smaller)
- Serve correctly sized images using
srcset - Preload the LCP image:
<link rel="preload" as="image" href="/hero.webp"> - Don't lazy-load above-the-fold images
4. Client-Side Rendering Delays
If your page content is rendered by JavaScript (React, Vue, Angular), the LCP element won't appear until the JavaScript bundle loads, parses, and executes.
Causes:
- Single-page applications with no server-side rendering
- Large JavaScript bundles
- Slow hydration in frameworks
Fixes:
- Use Server-Side Rendering (SSR) or Static Site Generation (SSG)
- Reduce JavaScript bundle size through code splitting
- Consider frameworks optimized for performance (Next.js, Astro, Remix)
A Practical LCP Optimization Checklist
Here's a step-by-step checklist you can follow to systematically improve LCP:
Quick Wins (Do First)
- ☐ Convert images to WebP or AVIF format
- ☐ Compress all images (aim for under 200KB for hero images)
- ☐ Add explicit width and height attributes to images
- ☐ Remove
loading="lazy"from above-the-fold images - ☐ Add preload hint for LCP image
Medium Effort
- ☐ Inline critical CSS
- ☐ Defer non-critical JavaScript
- ☐ Set up a CDN if you don't have one
- ☐ Enable gzip/brotli compression on your server
- ☐ Review and remove unused CSS/JS
Larger Improvements
- ☐ Implement server-side caching
- ☐ Switch to server-side rendering if using a SPA
- ☐ Optimize database queries affecting page generation
- ☐ Consider a faster hosting provider
Measuring and Monitoring LCP
You can measure LCP using several tools:
- Free Website Speed Test: Check your LCP and other Core Web Vitals instanty.
- PageSpeed Insights: Shows both lab and real-user (field) data
- Chrome DevTools: Performance panel shows LCP timing in real-time
- Web Vitals JavaScript library: Measure real users in production
- Search Console: Shows site-wide Core Web Vitals from real users
For ongoing monitoring, consider automated tools like isMyWebOk that track your LCP over time and alert you when it degrades.
Common Mistakes to Avoid
- Lazy loading the LCP image: This delays it unnecessarily
- Using placeholder images: The actual image, not a placeholder, determines LCP
- Ignoring mobile: LCP is often worse on mobile due to slower networks
- Optimizing only once: New content or third-party scripts can regress your score
Conclusion
LCP is the Core Web Vital that most directly affects perceived performance. By focusing on server response time, eliminating render-blocking resources, optimizing images, and ensuring fast delivery of the LCP element, you can dramatically improve how fast your site feels to users.
Start with the quick wins—image optimization and preloading—then work through the checklist systematically. Monitor continuously, and you'll maintain good LCP even as your site evolves.
Take care of your site's performance