Largest Contentful Paint (LCP)
LCP measures how long users wait to see the main content of your page. It's Google's most important Core Web Vital and a direct search ranking signal.
Google's LCP Thresholds
What LCP measures
Largest Contentful Paint measures the render time of the largest image or text block visible in the viewport. It captures loading performance from the user's perspective — the moment they can see the main content of the page.
The LCP element is identified dynamically at render time. On a marketing homepage it's typically the hero image. On a product page it's usually the main product photo. On a blog post it might be the hero image or the large post title.
LCP directly impacts both SEO and conversion. Google confirmed LCP as a ranking signal in 2021. Research shows each additional second of LCP reduces conversions by approximately 7% for ecommerce sites.
Common causes of poor LCP
The browser discovers the hero image late in the waterfall — after parsing HTML, CSS, and JS. Without a preload hint, the image download starts hundreds of milliseconds later than necessary.
Every millisecond of TTFB adds directly to LCP. If the server takes 1.5s to respond, LCP cannot be under 1.5s regardless of frontend optimisation.
Synchronous scripts and stylesheets in the <head> prevent the browser from rendering any content until they fully parse, directly delaying when the LCP element can paint.
Large JPEG hero images take longer to download than equivalent WebP or AVIF files. Oversized images not matching their display dimensions waste bandwidth.
If the LCP element is a text heading, font loading latency directly delays when that text renders. Font-display: optional or preloading fonts eliminates this delay.
SPAs that render content in JavaScript mean the browser must download, parse, and execute JS before the LCP element appears — inherently slower than SSR.
How to improve LCP
Add <link rel="preload" as="image" href="hero.webp"> in the HTML head, or use fetchpriority="high" on the hero <img> tag. This tells the browser to fetch the image immediately, reducing LCP by 200–500ms on many sites.
WebP is 25–35% smaller than equivalent JPEG. AVIF is 40–50% smaller. Smaller files download faster, reducing LCP. All major browsers support both formats.
Deploy to a CDN with edge caching for static and semi-static pages. Each millisecond saved in TTFB reduces LCP by the same amount. Target under 200ms TTFB.
Add async or defer to non-critical scripts. Inline critical CSS above the fold. Use preconnect for critical third-party origins.
SSR and SSG deliver complete HTML to the browser without waiting for JavaScript execution — LCP elements are available to render as soon as TTFB completes.
Add width and height attributes to all images so the browser reserves space before they load. This also helps CLS.
LCP fixes by platform
Use Shopify's native image CDN and set loading='eager' fetchpriority='high' on product hero images.
Use a caching plugin with CDN integration. Set fetchpriority='high' on hero images via your page builder.
Use next/image with priority={true} on hero images. This injects a preload link and sets high fetch priority.
Enable Webflow's lazy loading selectively — never lazy load above-the-fold hero images.
LCP — FAQ
What is a good LCP score?
Google considers LCP of 2.5 seconds or less as 'Good'. Between 2.5s and 4.0s is 'Needs Improvement'. Above 4.0s is 'Poor'. For competitive performance, target under 1.8s on mobile.
What element does Google use to calculate LCP?
The LCP element is the largest image or text block visible in the viewport at the time of measurement. It's typically a hero image, featured product image, or large above-the-fold heading. The element can change between visits depending on viewport size.
Does LCP affect Google rankings?
Yes. LCP is one of Google's three Core Web Vitals and has been a search ranking signal since the Page Experience update in June 2021. Pages with 'Good' LCP may rank higher than equivalent pages with 'Poor' LCP.
How do I find my LCP element?
Use Chrome DevTools Performance tab, Google PageSpeed Insights, or AuditJet — all identify the specific element causing LCP. The element is highlighted in the Lighthouse LCP audit and shown with its render time.
Why is my LCP good in lab data but poor in field data?
Lab data uses controlled conditions (mid-range Android, 4G). Field data reflects your real users on diverse devices and networks. If field LCP is worse, your real users have slower devices or connections than the test conditions, or your site serves personalised content that delays the LCP element.
More Core Web Vitals guides
Monitor LCP continuously
AuditJet tracks LCP on a schedule and alerts you when it regresses — with revenue impact in dollars and AI-generated fix suggestions.
Start LCP Monitoring Free