LCP
Largest Contentful Paint
Time for the largest visible image or text block to render.
- Good: ≤ 2.5s
- Needs improvement: ≤ 4s
- Poor: > 4s
Navigation startsHeader rendersHero image loadsLargest element painted: that's LCPThe rest of the page fills in
What is LCP?
The Largest Contentful Paint (LCP), expressed in seconds, measures the time it takes for the largest image or text block within the viewport to become visible. It is Google’s primary measure of perceived load speed — the moment the user considers the page “loaded”.
What problem does it solve?
Browser events like load or DOMContentLoaded fail to reflect what users actually see. Earlier metrics like First Contentful Paint (FCP) only capture the first pixel — often a spinner or placeholder. LCP targets what actually matters: the main content.
What is a good LCP score?
s
Good
Exceptional — your LCP is elite.
What elements count as LCP?
Considered
<img>elements (first frame for animated content like GIFs)<image>inside<svg><video>elements — poster image or first frame, whichever is earlier- Background images loaded via
url()— not CSS gradients - Block-level elements containing text or inline text nodes
Excluded
- Fully transparent elements (opacity: 0)
- Full-viewport elements — likely background
- Low-entropy placeholder images
How to improve LCP
The key is to tackle issues related to each contributing phase.
01
Time to First Byte (TTFB)
The duration between the user triggering the page load and the moment the browser receives the first byte of the HTML response.
Fix Page caching eliminates server-side rendering overhead on repeat visits. A CDN moves the cached response physically closer to the user.
02
Load delay
Time from TTFB to when the browser starts loading the LCP resource. Zero if the LCP element is a text node using a system font.
Fix Make the LCP resource discoverable early. Add fetchpriority=high to inline img tags. Add preload links for background images or fonts used to render the LCP element.
03
Load time
The time to download the LCP resource itself. Zero if no external resource is needed.
Fix Compress and convert images to AVIF or WebP. Serve from a CDN edge node closest to the user.
04
Render delay
Time from the LCP resource finishing its load to the element actually appearing on screen.
Fix Reduce unused CSS, inline critical styles, and minimise JavaScript that blocks the main thread before first paint.
Need help fixing your LCP?
Root cause analysis, not plugin guessing. Baseline from field data or lab — wherever you are.
Start an Engagement