Largest Contentful Paint (LCP) measures the time from when a page starts loading to when the largest visible content element — typically a hero image, headline, or product photo — finishes rendering in the viewport. Google treats LCP under 2.5 seconds as "good," 2.5–4.0 seconds as "needs improvement," and over 4.0 seconds as "poor." 53% of mobile users abandon pages that take longer than 3 seconds to load.
LCP is the metric that determines whether users perceive your page as fast or slow. It directly feeds into Google's Page Experience ranking signal — and slow LCP costs you conversions before visitors even engage with your content.
What is LCP (Largest Contentful Paint)?
LCP tracks how long visitors wait before seeing the main content — typically a hero image, headline, or product photo. Google designated LCP as a Core Web Vital because it correlates with perceived load speed more accurately than older metrics like First Meaningful Paint.
Unlike total page load time, LCP answers a user-centric question: "When can I actually see and use this page?" The browser updates the LCP candidate continuously as new elements render, locking in the final score at the moment of first user interaction (click, scroll, keypress).
Vodafone improved LCP by 31% and saw an 8% increase in sales. Shopify data shows every 100ms of LCP improvement increases conversion by 1.3%. A law firm reduced LCP from 6.2 to 1.8 seconds using WebP and CDN delivery and reported a 40% drop in bounce rate.
Why does LCP matter for SEO and revenue?
Slow LCP creates a double problem: Google penalises you in rankings, and users leave before they convert. Three reasons every site owner should care:
- Direct ranking signal. LCP is one of three Core Web Vitals inside Google's Page Experience update. Poor LCP is a tiebreaker that costs rankings when content quality is equal between competing pages.
- Mobile abandonment. 53% of mobile visitors abandon pages that take longer than 3 seconds to load (Google Think). Most LCP problems are worst on mobile, where CPU and network speeds are slower.
- Compounding conversion impact. Shopify's analysis of 10,000 stores found every 100ms of LCP improvement correlated with a 1.3% increase in conversion rate. Across a year's traffic, that compounds significantly.
How LCP works
The browser tracks LCP candidates throughout the loading process. Four common causes account for the majority of poor LCP scores:
- Slow server response (TTFB). If the first byte takes 2 seconds, LCP cannot be under 2.5 seconds regardless of subsequent optimisations.
- Render-blocking resources. CSS and JavaScript in the document head that the browser must fully download before rendering any HTML.
- Slow resource loading. Large uncompressed images or slow-loading web fonts delay when the LCP element appears.
- Client-side rendering. Pages built with JavaScript frameworks that wait for JS execution before displaying content.
Types of LCP elements
These are the element types the browser considers as LCP candidates:
- Hero images — the most common LCP element on marketing and ecommerce pages
- CSS background images — loaded via
url()and large enough to dominate the viewport - Video poster images — the static thumbnail before the video plays
- Large text blocks — h1, h2, large paragraphs; text-only pages often score excellently
- Carousel first slides — the initial visible image in a hero slider
Real LCP examples
Concrete wins from real sites, each following a repeatable pattern:
Fix: WebP compression + CDN delivery
Result: -40% bounce rate
Fix: All images under 100KB, no JS in critical path
Result: Consistent "Good" field data
Fix: Image delivery CDN + deferred JavaScript
Result: Moved from "Poor" to "Good"
LCP vs. First Contentful Paint — which to fix first
| Aspect | LCP | FCP |
|---|---|---|
| Measures | Largest visible element renders | Any content appears on screen |
| Reflects | Perceived page readiness | Initial visual response |
| Good threshold | Under 2.5 seconds | Under 1.8 seconds |
| Core Web Vital | Yes | No (diagnostic) |
| Ranking signal | Yes | No |
Fix LCP first when your main content element is an image. Fix FCP first when the page feels blank for 1–2 seconds before anything appears.
5 best practices to improve LCP
- Preload the LCP image. Add
<link rel="preload" as="image" href="/hero-poster.webp">in the document<head>. This moves the hero image to the front of the browser's fetch queue before the HTML parser even reaches the<img>tag. - Use WebP or AVIF for all images. WebP saves 25–35% versus JPEG at equal quality. AVIF saves up to 50%. Smaller files render faster.
- Never lazy-load the LCP image. Adding
loading="lazy"to a hero image is one of the fastest ways to score "Poor." Only lazy-load below-the-fold images. - Serve assets from a CDN. A CDN reduces latency from hundreds of milliseconds to single digits by serving files from the nearest geographic node.
- Set explicit image dimensions. Always include
widthandheightattributes. Without them, the browser can't reserve space, which can also trigger CLS penalties.
Lighthouse runs in a simulated environment on a mid-tier mobile device. Your ranking depends on real-user field data in Google Search Console. A site can score 95 in Lighthouse but have "Poor" field LCP because real users on slow connections experience different conditions. Always check Search Console's Core Web Vitals report first.
Common LCP mistakes to avoid
- Lazy loading hero images — deliberately delays the LCP element from loading.
- Skipping the preload hint — browser discovers the LCP image late in parsing; a preload tag fixes this in minutes.
- PNG hero images — PNG is 3–5x larger than WebP for photographs; convert every hero.
- Render-blocking third-party scripts — analytics and chat widgets loaded synchronously in
<head>block all rendering; useasyncordefer. - Ignoring mobile field data — Google uses mobile-first indexing; mobile LCP almost always scores worse than desktop and is what matters for rankings.
What LCP means for a small business site
For most small business sites the LCP element is one image: the hero photo on the homepage, or the first product shot on a category page. Fix that single asset and the score usually moves more than every other optimisation combined.
- Find the element before changing anything. PageSpeed Insights names the LCP element outright. Optimising a different image is the most common wasted afternoon in small-site performance work.
- Serve it as WebP or AVIF at the size it is displayed. A 3000px hero scaled down in CSS still downloads at 3000px.
- Never lazy load it. Page builders and themes often apply lazy loading to every image by default, including the one you need first.
- Check the mobile number, not the desktop one. Mobile is what Google uses, and it is almost always the worse score.
A booking or quote page is worth checking separately from the homepage. That is the page where a slow load costs a conversion rather than a visit.
Frequently asked questions
Under 2.5 seconds is "good"; 2.5–4.0 seconds "needs improvement"; over 4.0 seconds is "poor." Google assesses this using real Chrome user data, not lab tests.
Yes. LCP is one of three Core Web Vitals feeding into Google's Page Experience ranking signal. Poor LCP creates disadvantage against equally relevant competitors.
Google Search Console's Core Web Vitals report shows site-wide data. PageSpeed Insights provides per-page scores. Chrome DevTools Performance panel identifies the exact LCP element and timing.
Yes. Text-only LCP pages typically score well since text renders nearly instantly once CSS loads. The LCP element is simply the largest visible content, regardless of type.
Shopify data shows every 100ms of LCP improvement increases conversion by 1.3%. Vodafone achieved an 8% increase in sales from a 31% LCP improvement.
Related glossary terms
Sources
