Largest Contentful Paint (LCP)
Slap yourself if
You think LCP is just ‘optimize images’ or the same thing as page load.
Why this exists
LCP exists because users judge speed by when the main content becomes visible, not when the page technically finishes loading. Traditional load events missed this perception gap.
Mental model
LCP measures when the browser paints what the user actually cares about most. It’s a race between networking, rendering, and main-thread availability — not a single optimization knob.
- The browser tracks candidate elements considered ‘largest’ in the viewport.
- As rendering progresses, the LCP candidate can change.
- When the page reaches a stable point, the final LCP timestamp is recorded.
- Late-loading or re-rendered elements can push LCP later.
- Optimizing load events instead of render timing.
- Delaying main content behind client-side rendering or hydration.
- Blocking the main thread during initial paint.
- Assuming faster networks automatically improve LCP.
Largest Contentful Paint measures when the main content element is rendered in the viewport, reflecting perceived load speed rather than technical completion.
- Hero content rendered only after async JS
- Large images without priority or hints
- Main-thread blocking during initial render
- LCP discussed without mentioning rendering
Deep dive
Requires Pro
Premium deep dives include more internals, more scars.