To fix poor LCP, identify the LCP element (usually a hero image or large text block), then reduce its load time: improve TTFB with caching/CDN, compress and resize the image, preload it with <link rel="preload">, remove render-blocking CSS/JS, and do not lazy-load the LCP image. Target ≤ 2.5 seconds.
LCP measures when the largest visible content paints. A slow LCP means users wait too long to see what matters. Almost always the fix is faster server response plus a leaner, prioritised LCP resource.
Check your website
See how your site handles how to fix poor largest contentful paint (lcp) — free, no account needed.
Business impact
LCP is the "did the page load yet?" moment. Slow LCP is strongly correlated with bounce rate — especially on mobile. Fixing it is often the single biggest perceived speed improvement you can make.
Why this happens
LCP element is usually the hero image, banner, or large heading. Slow LCP from: high TTFB; huge unoptimised image; render-blocking CSS/JS delaying paint; lazy-loading the hero image (wrong); slow web fonts blocking text LCP. Use PageSpeed "LCP element" diagnostic to identify the exact node.
How to confirm the issue
Manually: PageSpeed Insights shows the LCP element and time. DevTools → Performance → record load.
With Plexa Trust: poor PageSpeed findings often include LCP opportunities; re-scan after fixes.
Step-by-step fix
Identify the LCP element in PageSpeed Insights.
Improve TTFB (caching, CDN, hosting) — LCP cannot beat slow server.
Compress, resize, and convert the LCP image to WebP/AVIF.
Preload the LCP image:
<link rel="preload" as="image" href="...">.Do not lazy-load the LCP image.
Eliminate render-blocking resources in the critical path.
Re-test LCP in PageSpeed Insights.
Platform-specific fixes
WordPress
Set a properly sized featured/hero image — not full-resolution upload.
Use an image optimisation plugin; enable WebP.
Preload hero via theme or plugin; avoid lazy-load on above-fold images.
Next.js / React
Use next/image with priority prop on the LCP image.
Server-side render hero content so it is in initial HTML.
Cloudflare
Polish/image optimisation for images served through Cloudflare.
Early Hints (103) can help browsers start loading LCP resources sooner.
How to verify the fix
Preload only the one LCP resource — not every image.
Match image dimensions to display size.
Fix TTFB before micro-optimising the image.
Common mistakes
Lazy-loading the hero image.
Preloading ten images instead of just the LCP element.
Ignoring TTFB and only compressing images.
Frequently asked questions
What is a good LCP score?
2.5 seconds or less at the 75th percentile of real users.
Can text be the LCP element?
Yes. Slow web fonts can delay text LCP — use font-display: swap and preload critical fonts.
Should I preload the LCP image?
Yes, when the LCP element is an image — it tells the browser to fetch it early.
Does lazy loading hurt LCP?
Only if applied to above-the-fold/LCP images. Never lazy-load the hero.
How does CDN help LCP?
Faster image delivery and lower TTFB both reduce LCP time.
What image format is best?
WebP or AVIF at appropriate dimensions — often 50–80% smaller than JPEG.
Is LCP the same as load event?
No. LCP is when the largest content paints, usually before full page load.
How do I confirm it worked?
PageSpeed LCP in the green zone; field data improves over subsequent weeks.
Think you've fixed it?
Run a free scan to verify the issue is resolved. Upgrade to Pro on Plexa Trust for the full audit, monitoring alerts, and score history.
Verify with a free scan