What Is Largest Contentful Paint (LCP) and Why It's Killing Your Ad ROI
LCP is the single most important Core Web Vital for landing pages. Learn what it measures, why Google penalizes slow LCP, and how to fix it in under an hour.
If you're spending money on Google Ads and sending traffic to a landing page that takes more than 2.5 seconds to show its main content, you're burning cash. That's not an opinion — it's what Google's own data tells us through a metric called Largest Contentful Paint (LCP).
What LCP Actually Measures
LCP measures the time it takes for the largest visible element in the viewport to fully render. This is usually:
- A hero image
- A large heading or text block
- A background video poster
It's not about when the page starts loading (that's TTFB) or when it becomes interactive (that's INP). LCP is about when the user sees the thing they came for.
The 2.5-Second Threshold
Google classifies LCP into three buckets:
| Rating | LCP Time |
|---|---|
| 🟢 Good | ≤ 2.5s |
| 🟡 Needs Improvement | 2.5s – 4.0s |
| 🔴 Poor | > 4.0s |
Pages with poor LCP don't just frustrate users — they get penalized in ad auctions. Google Ads uses landing page experience as a factor in Quality Score, and a slow LCP directly reduces your score, raising your cost-per-click.
Why LCP Matters More for Paid Traffic
When someone clicks an organic result and the page loads slowly, they hit the back button. Annoying, but free.
When someone clicks a paid ad and the page loads slowly, you've just paid $3–$50+ for a bounce. Multiply that across hundreds of clicks per day, and you're looking at thousands of dollars wasted per month on pages that never even rendered properly.
This is exactly the problem BadPageSpeed was built to solve — we track your LCP (and all Core Web Vitals) on every landing page, every few hours, and calculate the real dollar cost of underperformance.
Common Causes of Bad LCP
1. Unoptimized Hero Images
The #1 killer. A 2MB hero image served as a PNG instead of WebP or AVIF will blow your LCP budget instantly.
Fix: Use next/image or a CDN with automatic format negotiation. Serve images at the exact display size, not larger.
2. Render-Blocking CSS and JavaScript
If your <head> includes three CSS frameworks and five JavaScript bundles that must load before anything renders, your LCP will suffer.
Fix: Inline critical CSS, defer non-essential scripts, and use rel="preload" for key resources.
3. Slow Server Response (TTFB)
If your server takes 800ms to respond, LCP can't possibly be good. The browser can't render what it hasn't received.
Fix: Use a CDN, enable caching, consider static generation or edge rendering.
4. Client-Side Rendering
Single-page apps that render everything in JavaScript after the initial HTML arrives will always have worse LCP than server-rendered pages.
Fix: Use server-side rendering (SSR) or static site generation (SSG). Frameworks like Next.js make this trivial.
5. Third-Party Scripts
Analytics, chat widgets, A/B testing tools, and tag managers can block rendering or compete for bandwidth.
Fix: Load third-party scripts with async or defer. Use requestIdleCallback for non-essential initializations.
How to Measure LCP
In the Lab
- Chrome DevTools → Performance panel → look for the LCP marker
- Lighthouse → run an audit, check the LCP metric
- PageSpeed Insights → enter your URL, check both mobile and desktop
In the Field (Real Users)
- Chrome User Experience Report (CrUX) — 28-day rolling data from real Chrome users
- web-vitals library — instrument your pages to send LCP data to your analytics
- BadPageSpeed — automated monitoring every few hours with trend tracking and ad spend correlation
Quick Wins to Improve LCP Today
- Add
fetchpriority="high"to your hero image tag - Preload your LCP image with
<link rel="preload" as="image" href="..."> - Set explicit width/height on images to prevent layout shifts
- Remove unused CSS — tools like PurgeCSS can strip unused styles
- Enable compression — make sure your server sends Brotli or gzip
The Bottom Line
LCP is the metric that most directly correlates with whether a user actually sees your landing page before deciding to bounce. If you're running ads, a bad LCP score doesn't just hurt your user experience — it raises your ad costs and reduces your conversion rate simultaneously.
Stop guessing. Start measuring. Track your LCP with BadPageSpeed →
Ready to stop wasting ad spend?
Track your landing page performance, monitor Core Web Vitals, and calculate exactly how much slow pages cost you.
Start Free — No Credit Card