On this page
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP)
LCP measures the time from when a user initiates loading a page until the largest image or text block visible in the viewport is rendered. It is one of Google's three Core Web Vitals — alongside INP (Interaction to Next Paint) and Cumulative Layout Shift (CLS) — and has been a Google Search ranking signal since 2021.
Thresholds
| Rating | LCP |
|---|---|
| Good | ≤ 2.5 s |
| Needs Improvement | 2.5 – 4.0 s |
| Poor | > 4.0 s |
Measured at the 75th percentile of real-user page loads across mobile and desktop. Thresholds have not changed since Core Web Vitals launched and remain stable as of 2026. (Source: web.dev/articles/lcp, updated 2025-09-04)
What counts as the LCP element
Per the Chrome team (web.dev, 2025-09-04), eligible element types are:
<img>elements<image>inside<svg><video>elements (poster image or first rendered frame, whichever is earlier)- Elements with a CSS
url()background image - Block-level elements containing text nodes
As of the 2025 Web Almanac, 76% of mobile pages have an image as their LCP element (as-of 2025). (Source: HTTP Archive 2025 Web Almanac — Performance)
LCP subparts
LCP breaks into four sequential phases. The Chrome team (web.dev, updated 2025-03-31) gives the following optimisation targets:
| Subpart | What it measures | Target share of total LCP |
|---|---|---|
| Time to First Byte (TTFB) | Server response time | ~40% |
| Resource Load Delay | Delay between TTFB and when LCP image request starts | < 10% |
| Resource Load Duration | Time to download the LCP image | ~40% |
| Element Render Delay | Delay between image downloaded and rendered | < 10% |
The two delay subparts should be as close to zero as possible. Any time in those phases is waste. (Source: web.dev/articles/optimize-lcp, 2025-03-31)
From February 2025, the CrUX API exposes all four LCP image subpart timings at p75, at both origin and URL level — but only for image LCPs on full page loads (not text LCPs, BFCache, or prerender). (Source: developer.chrome.com/blog/crux-2025-02, 2025-02-11)
The common misconception: image download is not the bottleneck
A 2024 web.dev post (Common misconceptions about LCP, 2024-08-20) analysed field data from CrUX and found:
- For poor-LCP origins (p75 breakdown): TTFB = 2,270 ms · Load Delay = 1,290 ms · Load Duration = 350 ms · Render Delay = 360 ms
- The median poor-LCP site waits 4× longer to start downloading the LCP image than it takes to actually download it. (1,290 ms delay vs 350 ms download)
- A 2,270 ms TTFB alone nearly guarantees failure within the 2.5 s threshold
- Mobile vs desktop image load duration gap has narrowed: mobile is only ~20% slower than desktop for poor-LCP origins
Ecommerce context
In ecommerce, LCP is almost always the hero product image — on homepages, PDPs, and PLPs. This makes image optimisation the highest-ROI LCP intervention for retailers. (Source: BTNG.studio, Jan 2026)
Industry benchmarks (as-of 2025–2026)
| Segment | Mobile LCP (p75) | Rating |
|---|---|---|
| Ecommerce median | ~3.2 s | Needs Improvement |
| Fashion retail | ~4.1 s | Poor |
| Fashion retail (desktop) | ~1.1 s | Good |
| B2B industrial | ~5.8 s | Poor |
(Sources: 1Digital Agency ecommerce benchmarks 2026; BTNG.studio Jan 2026. Note: 1Digital Agency figures are secondary — not derived from HTTP Archive or CrUX directly.)
The fashion retail mobile LCP average of 4.1 s (1Digital Agency, 2026) is more pessimistic than the general ecommerce median of 3.2 s (BTNG/industry composite). The two figures use different sampling methodologies and site populations — they are not directly comparable.
As of the 2025 Web Almanac (HTTP Archive): only 62% of mobile pages pass the "Good" LCP threshold (≤2.5 s); desktop performs better at ~74%. LCP remains the weakest of the three Core Web Vitals on mobile. (as-of 2025)
Shopify-specific: the 2025 Web Almanac Ecommerce chapter reports Shopify merchants pass CWV at 57.36% of origins — above the global average. (as-of 2025)
Business impact
Multiple documented ecommerce case studies link LCP improvement to measurable revenue and engagement outcomes:
| Company | LCP improvement | Business outcome | Source |
|---|---|---|---|
| Rakuten 24 | Part of CWV fix | +33% CVR, +53% revenue/visitor, +15% AOV | web.dev case studies |
| Lazada | 3× faster LCP | +16.9% mobile CVR | web.dev case studies |
| Nuvemshop | 68% LCP improvement; pass rate 57% → 96% | +8.9% organic mobile CVR | web.dev/case-studies/nuvemshop |
| Vodafone Italy | 31% LCP improvement | +8% sales | web.dev case studies |
| Tokopedia | 55% LCP improvement (3.78s → 1.72s) | +23% avg session duration | web.dev case studies |
| Cdiscount | All three CWVs improved | +6% revenue (Black Friday) | web.dev case studies |
| Carpe (Shopify) | 52% faster LCP | Record-breaking sales period | Performance @ Shopify |
| Sunday Citizen (Shopify) | 25% LCP improvement | Improved conversions | Performance @ Shopify |
Widely cited industry figures (as-of January 2026):
- A 0.1-second improvement in mobile load time → +8.4% retail CVR, +9.2% AOV (Google/Deloitte 2020 "Milliseconds Make Millions"; widely cited but ~6 years old — treat as directional)
- 53% of mobile users abandon a site that takes >3 seconds to load (Google internal research)
- 4.42% CVR drop per additional second between 0–5 seconds (Portent research)
The Deloitte/Google "8.4% per 0.1s" figure originates from the 2020 "Milliseconds Make Millions" report on 37 retail websites. It continues to be widely cited in 2025–2026 sources but is six years old and may not reflect current user behaviour or device/network conditions.
How to optimise LCP
Recommendations from the Chrome team (web.dev/articles/optimize-lcp, updated 2025-03-31):
Reduce Resource Load Delay (highest impact):
- Never use
loading="lazy"on the LCP image - Always add
fetchpriority="high"on the LCP<img>element - The LCP resource must be discoverable by the browser preload scanner in the initial HTML — not dynamically injected by JS or hidden behind
data-src - For CSS background images: add
<link rel="preload" as="image" fetchpriority="high">in HTML
Reduce TTFB:
- Use a CDN geographically close to users
- Reduce server processing time (use edge functions, caching)
- For Shopify/WooCommerce: hosting quality is the primary TTFB lever — shared hosting TTFB of 800–2,000 ms makes achieving 2.5 s LCP "impossible regardless of what else you optimize" (BTNG Jan 2026)
Reduce Element Render Delay:
- Eliminate long JS tasks that block the main thread after image download
- Use SSR or static pre-rendering so the LCP element is in the HTML source (not rendered by JS)
Shopify-specific:
- Many default themes incorrectly apply
loading="lazy"to the hero image — remove it and addfetchpriority="high"(Source: BTNG Jan 2026; confirmed by Shopify + Google webinar, Oct 2023) - The October 2023 Shopify + Google webinar introduced the
section.indexLiquid property to allow themes to distinguish above-the-fold sections and suppress lazy-loading on the LCP image natively
Next.js / SPA context:
- Partial Prerendering (PPR) places the LCP element (product image) in a static HTML shell served instantly while dynamic content is fetched in parallel — demonstrated to reduce time-to-useful-content ~10× in ecommerce demos (Vercel/Next.js Conf, 2023–2024)
- The Soft Navigations API (Chrome 147–149 origin trial, 2026) will enable LCP measurement for client-side navigations on SPAs — currently LCP is only measurable on initial page load
Measurement
- CrUX (Chrome User Experience Report): field data at 75th percentile; available via Google Search Console, PageSpeed Insights, and CrUX API. As of Feb 2025, CrUX also exposes LCP image subpart timings.
- PageSpeed Insights: combines CrUX field data (real users) with Lighthouse lab data
web-vitalsJS library (onLCP()): handles BFCache, prerender, backgrounded tabs- Chrome DevTools Performance panel: shows both local and real-user LCP side by side; soft navigation markers visible from Chrome 145
Cross-browser measurement (new in 2025)
As of December 2025, the LCP API is Baseline Newly Available — Safari (26.2+) and Firefox now implement the Largest Contentful Paint API, part of Interop 2025. Key caveats (Source: web.dev blog, 2025-12-17):
- CrUX remains Chrome-only — Safari/Firefox data do NOT feed into CrUX, PageSpeed Insights, or Search Console
- RUM tools (including the
web-vitalslibrary) can now collect LCP from Safari/Firefox - Chrome measures to
presentationTime; Firefox/Safari stop atpaintTime(small ms difference); Chrome 145 exposespaintTimefor cross-browser comparison - CLS is NOT part of Interop 2025 and remains Chromium-only
Ecosystem timeline
| Date | Event |
|---|---|
| 2021 | Core Web Vitals become a Google Search ranking signal; LCP, FID, CLS form the set |
| March 2024 | INP replaces FID as the responsiveness Core Web Vital |
| Sept 2024 | FID fully deprecated from CrUX |
| Feb 2025 | CrUX API adds LCP image subpart timings and RTT tri-bins (replaces ECT) |
| Sept 2025 | 53% of origins pass all three CWVs (as-of 2025) |
| Dec 2025 | LCP API becomes Baseline Newly Available (Safari/Firefox support); global CWV pass rate 55.7% (as-of 2025) |
| 2026 | Soft Navigations API final origin trial (Chrome 147–149); SPA LCP measurement coming |
Key terms
| Term | Meaning |
|---|---|
| LCP | Largest Contentful Paint — the loading Core Web Vital |
| CrUX | Chrome User Experience Report — real-user field data |
| TTFB | Time to First Byte — server response time, first LCP subpart |
| fetchpriority="high" | HTML attribute telling the browser to fetch the LCP image at highest priority |
| Preload scanner | Browser mechanism that discovers resources in HTML before the parser reaches them |
| Soft navigation | Client-side navigation in an SPA (no full page reload); LCP currently unmeasurable after first interaction |
| Interop 2025 | Cross-browser initiative; LCP API shipped across all engines in 2025 |
Related concepts
Core Web Vitals · Cumulative Layout Shift (CLS) · INP (Interaction to Next Paint) · Performance Budget · TTFB · Server-Side Rendering · Partial Prerendering · Soft Navigations · CrUX · Shopify · Conversion Rate Optimisation · A/B Testing