What is LCP? Complete Guide to Largest Contentful Paint

What is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) is one of Google's three Core Web Vitals metrics. It measures how long it takes for the largest content element visible in the viewport to fully render. This is typically a hero image, large text block, or video thumbnail.

LCP is crucial because it reflects the user's perception of when the main content of a page has loaded. A fast LCP tells users that the page is useful and they can start consuming content.

Google considers LCP a direct ranking factor. Pages with poor LCP scores may rank lower in search results, making LCP optimization essential for SEO.

• LCP measures when the largest above-the-fold element becomes visible
• Good LCP: under 2.5 seconds | Needs improvement: 2.5-4s | Poor: over 4 seconds
• Common LCP elements: hero images, header text blocks, video thumbnails
• LCP is reported at the 75th percentile of page loads in Google's data

Why LCP matters for SEO and user experience

Since June 2021, Core Web Vitals including LCP have been official Google ranking factors. This means your LCP score directly impacts where your pages appear in search results.

Beyond SEO, LCP significantly affects user behavior. Studies show that pages loading in under 2 seconds have 9% higher conversion rates compared to pages loading in 5+ seconds. Amazon found that every 100ms of latency cost them 1% in sales.

Mobile users are especially sensitive to LCP. With slower networks and less powerful devices, mobile LCP scores are typically 2-3x worse than desktop. Since Google uses mobile-first indexing, your mobile LCP is what counts for rankings. Learn more about mobile vs desktop performance.

How to measure your LCP score

There are several tools to measure LCP, each with different use cases. Lab tools like Lighthouse and MakeWebsite.fast provide controlled testing environments, while field data from Chrome User Experience Report (CrUX) shows real-world performance.

For the most accurate picture, combine both lab and field data. Lab tests help you iterate quickly during development, while field data confirms your optimizations work for real users. See our complete speed test guide for more details.

Google Search Console's Core Web Vitals report shows your site-wide LCP performance and identifies pages that need improvement. This should be your first stop for SEO-focused LCP analysis.

• MakeWebsite.fast: Free instant LCP testing with mobile and desktop options
• Google PageSpeed Insights: Lab + field data with optimization suggestions
• Chrome DevTools: Detailed performance timeline for debugging
• Search Console: Site-wide Core Web Vitals monitoring and alerts

Common causes of poor LCP

Slow server response time (TTFB) is the most common LCP killer. If your server takes 2 seconds to respond, your LCP can't possibly be under 2.5 seconds. Upgrade hosting, implement caching, or use a CDN. Test your TTFB with our TTFB checker tool.

Render-blocking resources like CSS and JavaScript in the head prevent the browser from painting content until they download and execute. Critical CSS should be inlined, and non-critical resources should be deferred.

Unoptimized images are another major culprit. Large hero images without proper sizing, modern formats, or lazy loading can add seconds to your LCP. Always use WebP/AVIF formats and specify width/height attributes.

• Slow TTFB (server response time over 600ms)
• Render-blocking CSS and JavaScript
• Unoptimized images (wrong size, old formats, no lazy loading)
• Client-side rendering without server-side rendering or streaming
• Third-party scripts blocking the main thread

How to improve LCP: Optimization techniques

Start by optimizing your server response time. Use a CDN to serve content from edge locations closer to users. Implement server-side caching and consider static site generation for content that doesn't change frequently. Check our guide on how to make your website faster for more techniques.

Optimize your LCP element specifically. If it's an image, use fetchpriority='high' and preload it with link rel='preload'. Ensure the image is properly sized for the viewport and uses modern formats like WebP.

Eliminate render-blocking resources by inlining critical CSS and deferring non-critical JavaScript. Use async or defer attributes on script tags, and consider removing unused CSS entirely.

LCP optimization checklist

Follow this checklist to systematically improve your LCP score. Address issues in order of impact, starting with server response time and working down to fine-tuning.

Monitor your changes using MakeWebsite.fast before and after each optimization. Track both lab scores and field data over time to confirm improvements reach real users.

• Ensure TTFB is under 600ms (use CDN, caching, faster hosting)
• Preload the LCP image with link rel='preload' as='image'
• Use fetchpriority='high' on the LCP element
• Inline critical CSS (above-the-fold styles)
• Defer non-critical JavaScript with async or defer
• Compress images and use WebP/AVIF formats
• Set explicit width and height on images to prevent layout shifts
• Remove unused CSS and JavaScript
• Consider server-side rendering for dynamic content