How to fix cwv lcp on Next.js (Headless)

Steps for Next.js (Headless)

1. Replace any raw <img> tag used for the hero/banner with Next.js's built-in <Image> component (next/image). Set the `priority` prop so Next.js automatically emits a <link rel='preload'> for the image and skips lazy-loading — this is the single highest-impact LCP fix.
2. Set the `sizes` prop to match the image's rendered CSS width at every breakpoint (e.g. `sizes='100vw'` for a full-width hero). This lets the browser download the smallest adequate srcset candidate instead of the full-resolution file.
3. Enable modern format delivery: next/image serves WebP/AVIF automatically via its built-in Image Optimization API. Confirm `images.formats` in next.config.js includes `['image/avif', 'image/webp']` (this is the default but worth verifying). For remote CDN images also add the domain/remotePattern to `images.remotePatterns`.
4. Eliminate render-blocking CSS/JS: audit `_app.tsx` / `app/layout.tsx` for synchronous third-party scripts and move them to next/script with `strategy='lazyOnload'` or `strategy='afterInteractive'`. Never use the default (blocking) strategy for non-critical scripts.
5. Use `next/font` for any custom web font used in the LCP area instead of a <link> stylesheet. `next/font` inlines the @font-face and removes the render-blocking font request entirely.
6. Run Lighthouse or `next build && next start` with `NEXT_TELEMETRY_DISABLED=1` to verify LCP drops below 2.5 s. Use the built-in `/_next/image` response headers (Cache-Control: public, max-age=31536000) to confirm the optimized image is being served.

What is cwv lcp?

Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element on your page — almost always the hero image or banner — to fully appear in a visitor's browser. Google considers a "good" LCP anything under 2.5 seconds. An LCP of 9+ seconds means shoppers are staring at a blank or partially loaded page for nearly ten seconds before they see your main content. LCP is one of Google's three Core Web Vitals, which are direct ranking signals used in Google Search.

A slow LCP directly hurts your Google rankings because Core Web Vitals are an official page-experience ranking factor — pages with poor LCP can lose positions to faster competitors even with identical content. More critically, research consistently shows that every additional second of load time reduces conversion rates by 2–7%; an LCP of 9 seconds can cost you the majority of mobile visitors who leave before the page even finishes loading. Mobile shoppers are disproportionately affected because mobile connections are slower, and Google indexes the mobile version of your site first. Fixing LCP is one of the highest-ROI technical improvements an ecommerce store can make: faster pages rank higher, bounce less, and convert better.

See the complete Cwv lcp guide for every platform and the full background.