Skip to content
Published Authored byBilly Reiner

Glossary · Defined term

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) measures "the render time of the largest image, text block, or video visible in the viewport, relative to when the user first navigated to the page"1. The Core Web Vital threshold for "good" is 2.5 seconds or less, measured at the 75th percentile of page loads — mobile and desktop scored separately.

On a Shopify product page, the LCP element is almost always the hero product image. On a collection page, it's typically the first product card image. On a blog post, it's the lead article image. The job is to make that one element render in under 2.5 seconds at the 75th percentile of real-user loads — not on a fibre connection in a Chrome dev tools simulation.

Definition

Largest Contentful Paint (LCP) is the time from page navigation to the render of the largest visible image, text block, or video. The Core Web Vital threshold for 'good' is 2.5 seconds or less, measured at the 75th percentile of page loads (mobile and desktop separately).

Per the web.dev canonical reference1: LCP "reports the render time of the largest image, text block, or video visible in the viewport, relative to when the user first navigated to the page." The metric updates as the page renders — the "largest" element can change during load — and reports the final largest contentful element after user interaction ceases. The measurement is in seconds, with the threshold expressed at the 75th percentile to reflect the experience of slower users, not just the median.

Thresholds and how the measurement works

Three buckets, verbatim from web.dev: 'good' is 2.5 seconds or less; 'needs improvement' is between 2.5 and 4.0 seconds; 'poor' is greater than 4.0 seconds. The bucket your site sits in is determined by the 75th percentile of page loads — meaning 25% of your real users had a slower experience than the reported number.

The 75th-percentile rule matters because averages and medians hide tail latency. A site whose median LCP is 1.8s but whose 75th-percentile LCP is 3.4s is "needs improvement" by Google's framework — the median is irrelevant to the bucket assignment. This is the reason Lighthouse simulated scores often don't match Chrome User Experience Report (CrUX) real-user scores; Lighthouse measures one device on one connection; CrUX measures the distribution.

LCP elements are restricted to: <img> elements, <image> elements inside <svg>, <video> poster images, elements with a background image loaded via CSS url(), and block-level text elements containing text nodes. CSS gradients and inline-block elements without text don't count.

Where LCP comes from

LCP was introduced by the Google Chrome team and standardised through web.dev on 8 August 2019 as a replacement for older paint-timing metrics (First Meaningful Paint, Speed Index) that proved unreliable in real-world measurement. It became a Core Web Vital in May 2020 and a Google Search ranking signal as part of the Page Experience update in 2021.

The motivation was the gap between when a page first painted anything (frequently a meaningless header or splash colour) and when the user could see the main content. LCP's deliberate focus on the largest visible element correlates closely with what users perceive as "the page loaded" — which is why it's load-bearing in the Core Web Vitals framework.

Adoption status in 2026

Universal as a Google Search ranking signal. CrUX (Chrome User Experience Report) measures LCP for every site Chrome users visit; PageSpeed Insights, Search Console's Core Web Vitals report, and Lighthouse all expose the metric. The 2.5-second threshold has been stable since 2019 — no quiet redefinitions, no per-vertical exemptions.

The 2026 wrinkle for Shopify: AI engines aren't directly scoring sites on Core Web Vitals, but slow sites still suffer indirectly — users abandon slow pages, AI engines see lower engagement signals on slow sites, and Google's own AI Overviews tend to surface faster sites first when other signals are equivalent. LCP is no longer just an SEO ranking signal; it's a tax on every customer interaction with the site.

LCP on Shopify specifically

On Shopify, LCP problems concentrate in four places: (1) the hero/product image isn't preloaded or is too large; (2) too many apps are running synchronous scripts in the head; (3) font-display behaviour blocks text rendering; (4) third-party tracking scripts (Klaviyo, Facebook Pixel, Google Tag Manager) push render-blocking work into the critical path.

The install order: (1) audit the LCP element on each template (use Chrome dev tools' Performance Insights panel); (2) preload the LCP image via a <link rel="preload" as="image"> in theme.liquid; (3) verify the theme's image-rendering pipeline uses Shopify's image_url filter with appropriate sizing (no full-resolution 4MB hero images); (4) audit installed apps for synchronous scripts in the head and either defer or remove; (5) measure real-user LCP via CrUX and re-iterate.

The full install lives in LCP on Shopify, which covers hero-image preload, font-display, app-bloat triage, and image-format choice. If you'd rather we audit and fix LCP, ShopifyRanked does it in 7 days for $499.

LCP is one of three Core Web Vitals.

Keep reading