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.
Free online tool — page speed test: instant results, no signup.
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
TL;DR: How to Optimize LCP
To optimize Largest Contentful Paint (LCP) in 2026, ensure your server responds quickly, optimize image sizes, and utilize efficient caching strategies. Aim for an LCP of under 2.5 seconds to enhance user experience and meet Google's Core Web Vitals standards. Consider using a Content Delivery Network (CDN) and lazy loading for images and videos to improve loading times significantly.
Understanding LCP: What It Is and Why It Matters
Largest Contentful Paint (LCP) measures the time it takes for the largest visible content element on a webpage to load. This metric is crucial because it directly influences user experience and search engine rankings. An optimal LCP time is under 2.5 seconds, as recommended by Google. If your site's LCP exceeds this threshold, users may perceive it as slow, leading to increased bounce rates and reduced engagement.
The LCP element can be an image, video, or block-level text element that occupies a significant portion of the viewport. Understanding what contributes to your LCP can help you prioritize optimizations effectively. Factors affecting LCP include:
- Server response times
- Resource load times (images, fonts, etc.)
- Client-side rendering performance
- Third-party scripts impact
By addressing these factors, you can improve LCP scores, which is critical for maintaining competitive search visibility and user satisfaction.
Practical Steps to Optimize LCP
Here are several practical strategies to enhance LCP on your website:
- Optimize Images: Ensure images are in next-gen formats (like WebP) and are appropriately sized for different devices. Use the following command to convert images to WebP:
cwebp -q 80 input.jpg -o output.webp- Implement Lazy Loading: Use the loading attribute in your
<img>tags to defer offscreen images:
<img src="image.jpg" loading="lazy" alt="Description">- Improve Server Response Times: Utilize server-side optimizations such as caching and using a CDN. For example, if you're using Nginx, you can enable caching with the following configuration:
location / {
expires 30d;
add_header Cache-Control "public, no-transform";
}- Minimize Critical CSS and JavaScript: Inline critical CSS and defer non-essential JS to reduce render-blocking resources. Use tools like Lighthouse for analysis.
- Reduce Third-Party Script Impact: Audit and optimize third-party scripts that may delay LCP. Use async or defer attributes on script tags:
<script src="script.js" async></script>By implementing these strategies, you can significantly lower your LCP and enhance the overall performance of your website, leading to better user engagement and improved SEO rankings.
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
How-to
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>.
Try the live tool that powered this guide
Free plan — 10 monitors, checks every 5 min, no card required. Upgrade for 1-minute interval and multi-region monitoring.