Skip to content
UXAtomSpeed

Core Web Vital

Largest Contentful Paint (LCP)

When the main content, usually the hero image or headline, finishes loading.

Good
2.5 s or less
Poor
over 4 s

What it measures

LCP marks when the largest image, video or text block in the viewport renders. It is the best single answer to “when does the page look ready?”

Common causes of a poor LCP

  • Slow server response delays everything after it.
  • The hero image is lazy-loaded, set in CSS or injected by JavaScript.
  • Render-blocking CSS and fonts.
  • Large images in old formats.

How to improve it

  1. Cache HTML at the edge or behind a CDN.
  2. Never lazy-load the hero image. Add fetchpriority="high".
  3. Serve AVIF or WebP at display size.
  4. Inline critical CSS and preload the main font.