LCP > 2.5s high
Largest Contentful Paint (LCP) too slow
The biggest element above the fold paints later than 2.5s, so the page feels slow to load and rankings suffer.
What you see
Largest Contentful Paint element 4.1 s Largest Contentful Paint (LCP) — Poor
What’s actually happening
Your hero image, video poster, or headline block is the largest thing in the first viewport, and it shows up too late. PageSpeed flags anything over 2.5s as needs-improvement and over 4s as poor, measured at the 75th percentile of real visits. The screen often looks blank or shows a spinner while the browser waits on that one element. Users on phones and slower connections feel it worst, and that field data is exactly what Google scores.
Common causes
- Slow server response (high TTFB) so the HTML arrives late and everything downstream waits
- The LCP image is lazy-loaded (loading="lazy") or discovered late because it's set via CSS background or JS
- Render-blocking CSS/JS in the <head> delays the first paint of the LCP element
- The LCP image is huge and unoptimized — full-res JPEG/PNG with no WebP/AVIF and no responsive srcset
- No preload or fetchpriority hint, so the browser fetches the hero late in the queue
How to fix it
- Find which element is actually the LCPRun Lighthouse in Chrome DevTools (or PageSpeed Insights) — the LCP audit names the exact node and shows its timing breakdown: TTFB, load delay, load time, render delay. Fix the largest slice first.
- Cut server response time (TTFB)If TTFB is the big slice, add full-page caching, a CDN edge cache, or fix the slow query/plugin generating the page. Aim for TTFB under ~600ms before optimizing anything else.
- Make the LCP image load eagerly and with priorityRemove loading="lazy" from the hero, add fetchpriority="high" to the <img>, and add <link rel="preload" as="image" href="hero.webp" fetchpriority="high"> in the head so it's requested immediately. Never lazy-load anything in the first viewport.
- Shrink and modernize the imageServe AVIF or WebP, size it to the actual displayed dimensions, and ship a responsive srcset so phones don't pull the desktop-width file. A 1.5MB hero dropping to 120KB moves LCP by seconds.
- Unblock the first paintInline the critical CSS the hero needs and defer the rest. A render-blocking stylesheet or synchronous script in the head holds back the LCP paint even after the image has downloaded — see the render-blocking entry.
Stop it recurring
Set an LCP budget in CI (Lighthouse CI fails the build over 2.5s) and treat the hero image's loading attributes as load-bearing config that reviews must check.
Related errors