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?
What elements count as LCP?
-
<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
- 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.
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.
Page caching eliminates server-side rendering overhead on repeat visits. A CDN moves the cached response physically closer to the user. Note: ad redirect chains inflate TTFB — lab tests won't show this.
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.
Make the LCP resource discoverable early. Add fetchpriority="high" to inline <img> tags. Add <link rel="preload"> for background images or fonts used to render the LCP element.
Load time
The time to download the LCP resource itself. Zero if no external resource is needed.
Compress and convert images to AVIF or WebP. Serve from a CDN edge node closest to the user.
Render delay
Time from the LCP resource finishing its load to the element actually appearing on screen.
Reduce unused CSS, inline critical styles, and minimise JavaScript that blocks the main thread before first paint.
Root cause analysis, not plugin guessing. Baseline from field data or lab — wherever you are.