How to Improve LCP in Next.js Without a Performance Team

What controls LCP in Next.js

LCP is determined by: how fast your server responds (TTFB), how fast the browser downloads and renders the largest content element, and how much render-blocking work delays that rendering.

Fix 1: Use next/image for hero images

next/image automatically: serves WebP format, adds proper sizing attributes, lazy-loads below-fold images, and generates srcset for responsive sizes. This one change often improves LCP by 30-50%.

Fix 2: Preload your LCP element

Add a for your LCP image in the document head. This tells the browser to start fetching it immediately, before the CSS and JS are parsed.

Fix 3: Reduce Time to First Byte

For dynamic pages, TTFB is dominated by server processing time. Use Incremental Static Regeneration (ISR) or static generation where possible. Cache database queries for frequently-accessed data.

Fix 4: Minimize render-blocking resources

Third-party scripts (analytics, chat, marketing) loaded in block rendering. Move them to end or use next/script with strategy="afterInteractive".

Measuring real impact

After each fix, wait for new real user data in ProdFix performance monitoring. Lab scores (Lighthouse) don't always reflect real user impact. Base your optimizations on real user data.