How we hit sub-second LCP on Next.js
The exact checklist we use to get Largest Contentful Paint under one second on real client sites.
Measure LCP on real devices first
Optimise what you can see. Use Lighthouse and real-user data (Core Web Vitals) on a mid-range mobile device — not your fast laptop. Identify the single element that is your LCP; usually a hero image or headline.
Ship less JavaScript
Use Server Components by default and add ‘use client’ only where you need interactivity. Lazy-load off-screen widgets, and keep third-party scripts async and minimal. Every KB of JS delays interactivity.
Serve images the right way
Use next/image (or properly sized, compressed images) with modern formats, correct dimensions and lazy loading for anything below the fold. Preload the LCP image so the browser fetches it immediately.
Cache aggressively at the edge
Static and incrementally-regenerated pages served from a CDN edge beat server round-trips every time. Set sensible cache headers and pre-render everything that isn’t user-specific.
Want us to handle this for you?
Book a free strategy call with our build team.
More BUILD guides