Largest Contentful Paint is Google's primary user-experience signal for search ranking and a direct measure of ISO-25010 time-behaviour. When LCP exceeds 2.5s, Google's data shows bounce rates climb sharply — 53% of mobile visitors abandon a page that takes more than 3s to load. For a marketing page, that abandoned visit represents lost acquisition revenue. An unoptimised hero image served over full SSR with no CDN is the most common culprit: it stacks TTFB latency on top of image download time, guaranteeing a failing score on both real-user monitoring and Lighthouse CI. Failing LCP also signals poor Core Web Vitals to the Google Search Console, which feeds directly into ranking demotion in the Page Experience system.
Critical because a failing LCP score simultaneously harms Google search rankings and increases visitor bounce rates, making it the highest-leverage performance metric for marketing ROI.
Add priority loading to the hero image and switch marketing pages to static generation so TTFB is served from CDN edge. In Next.js, the priority prop generates both fetchpriority="high" and a <link rel="preload"> automatically:
import Image from 'next/image'
// app/(marketing)/_components/hero.tsx
<Image
src="/hero.webp"
alt="Hero"
width={1200}
height={630}
priority
fetchPriority="high"
/>
Remove any export const dynamic = 'force-dynamic' from marketing page routes — static generation is the default and serves HTML from CDN edge in <50ms. Convert hero images to WebP with npx sharp-cli --input public/hero.jpg --output public/hero.webp --format webp if you haven't already.
ID: marketing-page-speed.core-web-vitals.lcp-threshold
Severity: critical
What to look for: Examine whether the codebase is set up to achieve LCP ≤ 2.5s. Look for: (1) The largest above-fold element (usually the hero image or headline) — is it preloaded with <link rel="preload"> or fetchpriority="high"? (2) Is the hero image using an optimized format and served from a CDN? (3) Are there any server-side rendering delays that would push the first byte past 800ms? (4) Is there a Lighthouse CI config (lighthouserc.*, .lighthouserc.json) that asserts CWV thresholds? (5) If a Next.js <Image priority /> prop is present on the hero, that is a positive signal. Count every candidate LCP element on the page (hero images, background images, heading text blocks, video posters) and enumerate each with its estimated load time. Before evaluating, extract and quote the HTML of the LCP candidate element and its associated resource loading tags to assess optimization.
Pass criteria: The largest above-fold element (hero image or primary heading) has explicit loading priority set (priority prop, fetchpriority="high", or <link rel="preload">), is served from a CDN or fast origin, and the page uses SSG or ISR (not full SSR on every request) so TTFB is minimized. OR a Lighthouse CI configuration asserts largest-contentful-paint ≤ 2500ms. Report even on pass: "LCP element identified as [element]. Estimated LCP time: X ms. Element size: Y KB." Threshold: under 2500ms for Largest Contentful Paint.
Fail criteria: The hero image or largest above-fold element has no priority loading hint, is served as a large unoptimized file from the origin server, and the page uses SSR with no caching — all factors that predictably push LCP past 2.5s. Do NOT pass if the LCP element is an unoptimized image (no srcset, no modern format, no explicit width/height) — even if the measured time happens to be under 2.5s on fast connections.
Skip (N/A) when: Project has no marketing pages (authenticated-only tool with no public landing pages). Signal: no public routes detected in the page/route structure.
Cross-reference: The image-optimization check in Resource Optimization verifies that the LCP element — often an image — is properly optimized for fast loading.
Detail on fail: "Hero image in hero.tsx has no priority loading — LCP element will load after JS parses. No CDN detected. SSR page with no cache — combined risk pushes LCP well past 2.5s threshold."
Remediation: Achieving LCP ≤ 2.5s requires stacking multiple optimizations:
// Next.js — add priority to hero image (tells browser to preload)
import Image from 'next/image'
<Image
src="/hero.webp"
alt="Hero"
width={1200}
height={630}
priority // generates <link rel="preload"> automatically
fetchPriority="high"
/>
Additionally:
For a deeper analysis of SEO ranking impact from LCP scores, the Advanced SEO Audit in the Marketing Site Pack covers Core Web Vitals as ranking signals in detail.