How to Fix a Slow LCP Score — 9 Proven Fixes (2026)
Google's threshold for a "Good" LCP is under 2.5 seconds. If yours is higher, you're losing rankings and conversions. Here are 9 fixes — ordered by impact — that will move the needle.
What is LCP and why does it matter?
Largest Contentful Paint (LCP) measures how long it takes for the largest visible element on your page — usually a hero image or headline — to finish rendering. Google uses it as a direct ranking signal in its Core Web Vitals assessment.
< 2.5s
Good
2.5–4s
Needs Improvement
> 4s
Poor
9 fixes for a slow LCP
Optimise your LCP image
High ImpactThe LCP element is almost always a hero image. Convert it to WebP or AVIF (30–50% smaller), add fetchpriority="high" and loading="eager", and use <link rel="preload"> in your <head> so the browser fetches it immediately.
Reduce server response time (TTFB)
High ImpactEvery millisecond of Time to First Byte adds to LCP. Use a CDN (Cloudflare, Vercel Edge), enable server-side caching, and upgrade to a faster hosting tier. Aim for TTFB < 200ms.
Remove render-blocking resources
High ImpactJavaScript and CSS that block parsing delay when your browser can paint the LCP element. Add defer or async to non-critical scripts. Inline critical CSS (above-the-fold styles) directly in <head>.
Use a CDN for static assets
High ImpactServing images, fonts, and JS from a CDN reduces the physical distance between your server and your users. Cloudflare's free tier alone can cut LCP by 200–500ms for international users.
Enable server-side or static rendering
High ImpactReact SPAs and CSR frameworks delay LCP because the browser must download JS, parse it, and run it before painting anything. Use SSR (Next.js, Nuxt) or SSG. The LCP element needs to be in the HTML, not injected by JS.
Preload key fonts
Medium ImpactFont swaps cause layout shifts and can delay LCP if your heading is the LCP element. Add <link rel="preload" as="font"> for your primary font and use font-display: optional or swap.
Compress and resize images server-side
Medium ImpactUse Next.js Image component, Cloudinary, or imgix to serve correctly-sized images. A 4000×3000px image served to a 400px container wastes bandwidth and delays LCP. Always serve the smallest size needed.
Lazy-load below-the-fold content
Medium ImpactAdd loading="lazy" to all images below the fold. This tells the browser to prioritise your LCP image instead of downloading images the user can't see yet.
Check third-party scripts
Medium ImpactAnalytics, chat widgets, and ad scripts can block the main thread and delay LCP. Audit every third-party script with Lighthouse and defer or remove anything that scores poorly.
LCP fix checklist
- Hero image converted to WebP/AVIF
- fetchpriority="high" on LCP image
- <link rel="preload"> for LCP image in <head>
- TTFB under 200ms (use GTmetrix or PageSpeed Insights to check)
- No render-blocking scripts in <head>
- Critical CSS inlined
- CDN serving static assets
- All below-fold images have loading="lazy"
- Third-party scripts deferred
Check your LCP score free
AuditAI checks LCP, CLS, and INP alongside SEO and security — no login required.
Run Free Audit →Free · No signup · Results in 30 seconds