What Is LCP and Why 2.5s Is the Threshold
Largest Contentful Paint (LCP) measures when the largest visible element — almost always a hero image or above-the-fold heading — finishes rendering in the viewport. Google classifies LCP under 2.5s as “Good,” 2.5–4.0s as “Needs Improvement,” and above 4.0s as “Poor.” A 1-second LCP delay reduces conversions by 8–12% across e-commerce and publishing verticals.
Step 1: Identify Your LCP Element
Open Chrome DevTools → Performance tab → record a page load → find the LCP marker in the Timings row. DevTools highlights the LCP element in the DOM. Alternatively use WebPageTest which annotates the filmstrip and names the element in the Web Vitals section. Never optimize without knowing what your LCP element actually is.
Step 2: Eliminate Resource Discovery Delay
The browser cannot download your LCP image until it discovers the URL. If the URL is in CSS or JavaScript, discovery is delayed by hundreds of milliseconds. Fix: put LCP images in HTML with a visible src attribute, and add fetchpriority=”high”.
<img src="hero.webp" fetchpriority="high" loading="eager" width="1200" height="630" alt="Hero" />For CSS background images, add a preload link in the head: <link rel="preload" as="image" href="hero.webp" fetchpriority="high" />
Step 3: Fix Time to First Byte
LCP cannot complete until the HTML arrives. Target TTFB under 600ms. Every millisecond of TTFB directly consumes your LCP budget. The fastest fix: enable full-page caching. Cached WordPress pages serve in under 50ms. Uncached pages can take 300ms–2s depending on hosting and plugin load.
| TTFB | LCP Budget Remaining | Action |
|---|---|---|
| Under 200ms | 2.3s remaining | Excellent — focus on resource loading |
| 200–600ms | 1.9–2.3s remaining | Good — standard caching applies |
| 600ms–1s | 1.5–1.9s remaining | Requires hosting upgrade or full-page cache |
| Over 1s | Under 1.5s remaining | Critical — fix hosting before anything else |
Step 4: Optimize the LCP Image
If your LCP element is an image — true for roughly 70% of pages — format and size matter enormously. Switch JPEG hero images to AVIF (62% smaller) or WebP (38% smaller). On Slow 4G, an AVIF hero image can reduce LCP by 50% compared to JPEG. Always implement responsive srcset so mobile visitors receive appropriately sized images.
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" fetchpriority="high" loading="eager" width="1200" height="630" alt="Hero" />
</picture>Step 5: Remove Render-Blocking Resources
Defer all non-critical JavaScript. Inline critical CSS for above-the-fold rendering. Eliminate or defer Google Fonts. Every render-blocking resource in the head delays your LCP by its full download and parse time. Use Chrome DevTools Coverage panel to identify unused CSS and JS that can be deferred or eliminated.
LCP Optimization Checklist
- LCP element identified with DevTools or WebPageTest
- LCP image in HTML with fetchpriority=”high” and loading=”eager”
- Image served in AVIF or WebP format with JPEG fallback
- Responsive srcset implemented for mobile
- TTFB under 600ms verified with WebPageTest
- No render-blocking CSS or JS on critical path
- Full-page cache enabled (WP Rocket, LiteSpeed Cache, or Nginx FastCGI)
- CDN configured with edge caching
FAQ
What is a good LCP score?
Google classifies LCP under 2.5s as “Good.” Target sub-2.5s across all device and connection profiles for a passing Core Web Vitals assessment in Google Search Console.
Why is my LCP good in Lighthouse but bad in Search Console?
Lighthouse runs a simulated lab test. Search Console shows real user data across all devices and connections — including slow mobile. Always verify with CrUX field data, not just Lighthouse lab scores.