What is Largest Contentful Paint (LCP)?
Definition Largest Contentful Paint (LCP) is a Core Web Vitals metric: the time from when a page starts loading until the largest image, video poster or block of text visible in the viewport is rendered. It is good at 2.5 seconds or less and poor above 4 seconds, measured at the 75th percentile of visits. On phones the LCP element is usually the hero image or the main heading.
How to fix it: Largest Contentful Paint: How to Improve LCP on Mobile
How is LCP measured?
While a page loads, the browser reports each new "largest" content element it paints. The last one reported before the user first taps, clicks, scrolls or presses a key is the LCP element, and its render time is the LCP value. Elements that count:
<img>elements and images inside<svg>;- the poster image or first frame of a
<video>; - elements with a CSS
background-imageloaded withurl(); - block-level elements containing text.
Only the part visible in the viewport counts, which is why the LCP element on a phone is often different from the one on desktop. Low-content images such as solid placeholders are ignored.
What makes LCP slow?
web.dev splits LCP into four parts: time to first byte from the server, the delay before the LCP resource starts loading, the time to download it, and the delay before it is rendered. Common causes on mobile:
- a hero image that's far too large for a phone screen (use srcset);
- the hero image discovered late, for example set from JavaScript or lazy-loaded;
- render-blocking CSS, fonts and scripts;
- a slow server response.
Example
<!-- The LCP image: discoverable in HTML, high priority, never lazy -->
<img src="hero-800.jpg"
srcset="hero-800.jpg 800w, hero-1200.jpg 1200w"
sizes="100vw" width="1200" height="675"
fetchpriority="high" alt="…">On iPhone vs Android
Google's field data for LCP (the Chrome UX Report) comes only from Chrome users, so iPhone visitors aren't reflected in your Core Web Vitals. Lab tools still help on both platforms, because most LCP causes, like heavy images and slow servers, affect every browser.
How MobileCheck checks it
MobileCheck records LCP in the lab while it loads the page on each device, in browsers that report the metric, and flags pages where LCP is over 2.5 s; over 4 s is marked poor. A single lab load differs from the 75th-percentile field value, so use it to find causes, and confirm improvements with field data.