Largest Contentful Paint (LCP)
How quickly the main content of your page loads. The first signal users have that your page is loading successfully.
What is Largest Contentful Paint?
LCP measures when the largest content element in the viewport becomes visible. This is when users perceive the page as primarily loaded.
How LCP is Measured
Timing
LCP is measured from when the page starts loading until the largest image or text block is rendered within the viewport.
Elements Counted
Images, video posters, background images, and text blocks. SVGs and CSS animations are not included.
Good Score
Good: Under 2.5 seconds
Needs Improvement: 2.5-4.0 seconds
Poor: Over 4.0 seconds
Why LCP Matters for SEO
- •Directly impacts Google's Core Web Vitals ranking factor
- •Better user experience leads to lower bounce rates
- •Faster content loading improves conversion rates
- •Users are more likely to engage with quickly loading content
Common LCP Issues
- •Slow server response times (TTFB)
- •Render-blocking JavaScript and CSS
- •Large, unoptimized images
- •Slow resource load times
- •Client-side rendering delays
How to Improve LCP
Four key areas to focus on for improving your Largest Contentful Paint score.
Optimize Images
Large images are the most common cause of poor LCP
- Use modern formats like WebP or AVIF
- Implement proper image sizing (responsive images)
- Add width and height attributes to prevent layout shifts
- Use lazy loading for below-fold images only
- Compress images without sacrificing quality
Optimize Web Fonts
Font loading can significantly delay LCP
- Preload critical fonts with <link rel='preload'>
- Use font-display: swap to prevent invisible text
- Self-host fonts when possible for better control
- Limit font variants to reduce HTTP requests
- Consider system fonts for fastest loading
Optimize Critical Resources
Reduce the time to load critical resources
- Inline critical CSS to reduce render-blocking requests
- Minify CSS and JavaScript files
- Remove unused CSS and JavaScript
- Defer non-critical JavaScript
- Use efficient caching strategies
Improve Server Response Time
Faster server responses lead to faster LCP
- Use a Content Delivery Network (CDN)
- Optimize server response times (TTFB < 200ms)
- Enable server-side caching
- Use efficient database queries
- Consider static site generation when possible
Tools to Measure LCP
Use these tools to measure your LCP and track improvements.
- Mobile and desktop analysis
- Specific optimisation suggestions
- Lab and field data
- Lighthouse audits
- Performance panel analysis
- Real-time metrics
Ready to Improve Your LCP?
Start with optimizing your largest images and improving server response times. These typically provide the biggest improvements to LCP.
Pro Tip: Focus on mobile LCP first, as mobile users often have slower connections. Improving mobile LCP usually improves desktop as well.