What counts as the LCP element#
Usually the hero image, a large featured image, a video poster, or the main headline/paragraph block — whichever is largest in the visible area during load. Chrome DevTools’ Performance panel and PageSpeed Insights show which element it is.
The four parts of LCP#
| Phase | What slows it | Fix |
|---|---|---|
| Time to First Byte | Slow server, no caching | Better hosting, page caching, CDN — see TTFB |
| Resource load delay | Image discovered late (CSS background, JS slider, lazy-loaded) | Put the image in HTML, add fetchpriority="high", never lazy-load it |
| Resource load time | Huge file | Correct size, WebP/AVIF, srcset |
| Element render delay | Render-blocking CSS/JS, web fonts | Inline critical CSS, defer JS, font-display: swap |
Thresholds#
Good ≤ 2.5 s · Needs improvement 2.5–4 s · Poor > 4 s, measured on real users at the 75th percentile, separately for mobile and desktop.
Related: Core Web Vitals, FCP, Core Web Vitals on WordPress.