LCP
Learn what Largest Contentful Paint is, how it measures perceived load speed, and how to optimize LCP for better Core Web Vitals scores.
Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures how long it takes for the largest visible content element to render within the viewport. The LCP element is typically a hero image, featured video thumbnail, or large text block — whatever occupies the most visual space when the page first loads. A good LCP score is 2.5 seconds or less, measured at the 75th percentile of real user experiences.
Why It Matters for SEO
LCP is the Core Web Vital that most directly reflects perceived loading speed — it measures when users feel the page has “loaded” because the main content is visible. It is one of three Core Web Vitals metrics that Google uses as a ranking signal. Pages with LCP over 4 seconds are categorized as having “poor” performance, which can negatively impact SERP position.
LCP also has the strongest correlation with user engagement among the Core Web Vitals. Slow LCP directly increases bounce rate because users abandon pages that appear to load slowly. Research consistently shows that each additional second of load time increases bounce probability by 20-30%.
How to Optimize LCP
First, identify your LCP element using Chrome DevTools or PageSpeed Insights. For image LCP elements, optimize file size using modern formats like AVIF or WebP, add fetchpriority="high" and loading="eager" attributes, and preload the image with <link rel="preload">. Ensure the image URL is discoverable in the initial HTML rather than requiring JavaScript to load.
Reduce server response time (TTFB) to under 800ms by using a CDN, optimizing database queries, and implementing server-side caching. Eliminate render-blocking resources — defer non-critical CSS and JavaScript that prevents the browser from rendering the LCP element. Use <link rel="preconnect"> for third-party origins that serve critical resources.
For text-based LCP elements, ensure fonts load quickly with font-display: swap and preload critical font files. Inline critical CSS that styles above-the-fold content so it renders without waiting for external stylesheet downloads.
Common Mistakes
- Lazy loading the LCP image: The
loading="lazy"attribute delays image loading until it enters the viewport. The LCP image is already in the viewport on page load, so lazy loading it only adds delay. - Not preloading the LCP resource: If the LCP image URL is only discovered after CSS or JavaScript loads, the browser wastes time on the discovery chain. Preload it in the
<head>. - Render-blocking third-party scripts: Analytics, chat widgets, and A/B testing scripts in the
<head>block rendering of all page content. Load them asynchronously or defer them. - Oversized images without responsive sizing: Serving a 3000px-wide image to a mobile device wastes bandwidth and slows LCP. Use
srcsetandsizesfor responsive image optimization. - Ignoring server response time: No amount of front-end optimization can compensate for a server that takes 3 seconds to respond. Optimize TTFB as the foundation for good LCP.
LCP is often the most impactful Core Web Vital to optimize because it directly represents the moment users perceive your page as loaded and usable.