How to Improve Site LCP
LCP (Largest Contentful Paint) — when the main visible element (usually hero image or H1+paragraph) paints. "Good" threshold ≤ 2.5s. Typical LCP killers: heavy hero images without preload, render-blocking CSS/JS, slow origin TTFB. Fixes: preload hero, inline critical CSS, defer non-critical JS, image srcset, Cloudflare cache.
Below: step-by-step, working examples, common pitfalls, FAQ.
Step-by-Step Setup
- Identify the LCP element: DevTools → Performance → record → "Largest Contentful Paint" section
- Preload hero image:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high"> - Trim images <= 100KB:
cwebp -q 80 hero.jpg -o hero.webp - Inline critical CSS in
<head>(or via Next.js inline-stylesheets) - Defer non-critical JS:
<script defer src="..."> - Lower TTFB: CDN (Cloudflare/Fastly), origin RPC time
- Verify via Enterno Speed — LCP field data (CrUX) + lab
Working Examples
| Scenario | Config |
|---|---|
| Preload hero | <link rel="preload" as="image" href="/hero-desktop.webp" media="(min-width: 1024px)" fetchpriority="high"> |
| Responsive srcset | <img src="hero.webp" srcset="hero-sm.webp 640w, hero-md.webp 1024w, hero-lg.webp 1920w" sizes="100vw" fetchpriority="high"> |
| Critical CSS in head | <style>
/* Above-fold styles — 14KB max */
body { margin: 0; font-family: system-ui; }
.hero { min-height: 50vh; ... }
</style> |
| Defer analytics | <script defer src="https://analytics.example.com/tag.js"></script> |
| nginx Cache-Control immutable | location ~* \.(webp|jpg|css)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
} |
Common Pitfalls
- Preloading more than 1-2 resources — congestion hurts LCP
- Lazy-loading the hero image (loading="lazy") — browser waits on intersection observer → slow
- Hero as CSS background — browser can't preload (not in DOM)
- Font from Google Fonts without font-display: swap — FOIT blocks text LCP
- TTFB > 600ms — no optimisation can make LCP < 2.5s
Why teams trust us
How it works
Enter page URL
Lighthouse analyzes
Get CWV scores & tips
Why Does Site Speed Matter?
Page load speed directly impacts conversion, SEO rankings, and user satisfaction. Google uses Core Web Vitals as a ranking factor. Every extra second of load time cancost up to 7% in conversions.
Lighthouse Analysis
Google Lighthouse-based analysis: Performance, Accessibility, Best Practices, SEO.
Core Web Vitals
LCP (rendering), FID (interactivity), CLS (visual stability) — key Google metrics.
Resource Analysis
Breakdown by type: HTML, CSS, JavaScript, images, fonts. Size, request count, blocking resources.
Actionable Advice
Specific recommendations with savings estimates: image compression, caching, minification, etc.
Mobile vs Desktop
- Tested on Moto G Power emulation (slow CPU)
- Network: 4G (1.6 Mbps, 150ms RTT)
- Stricter speed scoring
- Google indexes mobile-first
- Priority for SEO optimization
- High CPU performance
- Fast connection without throttling
- Scores typically 20-40 points higher
- Important for B2B and corporate sites
- Use for baseline comparisons
Who uses this
SEO
Core Web Vitals for rankings
Developers
performance optimization
Marketers
speed = conversions
DevOps
performance regression
Common Mistakes
async/defer block rendering. Move to end or add attribute.Cache-Control, the browser reloads CSS/JS on every visit.Best Practices
loading="lazy" for images below the fold.brotli on;Cache-Control: max-age=31536000, immutable. HTML: max-age=0, s-maxage=60.<link rel="preload"> for fonts and CSS. Reduces LCP by 200-500ms.Get more with a free account
Speed check history, competitor comparison and PageSpeed monitoring.
Sign up freeLearn more
Frequently Asked Questions
What is usually the LCP element?
Stats: hero image (55%), H1+intro paragraph (30%), hero video (10%), other (5%). Identify via DevTools.
Why is mobile LCP 2× worse than desktop?
Slow mobile networks (LTE-4G), weaker CPU (JS parse), smaller batch sizes. Fix: mobile-first + responsive images + lazy non-critical.
INP vs LCP — which matters more?
Both are Core Web Vitals. LCP — render, INP — responsiveness. Google factors both into ranking.
How to test LCP?
<a href="/en/speed">Enterno Speed</a> shows field data from CrUX (real users) + lab data. Plus <a href="/en/s/research-core-web-vitals-runet-2026">our CWV benchmark</a>.