Core Web Vitals with Next.js: 2026 Guide

Why Core Web Vitals Matter in 2026

Google's Core Web Vitals affect rankings and are also a critical business metric. Research shows that a 100ms improvement in LCP can increase conversions by up to 8%. For e-commerce sites, every millisecond counts. We also explain why a fast website is business-critical in our article Why Every Business Needs a Website.

At Tem Craft Tech, we've optimised dozens of Next.js applications and consistently achieve 90+ Lighthouse scores. Here's our proven approach.

1. LCP (Largest Contentful Paint)

LCP measures when the largest visible element loads. The target is under 2.5 seconds. With Next.js App Router, you have powerful tools at your disposal:

Image Optimisation

Use next/image with the priority attribute for above-the-fold images. This triggers preloading and prevents lazy-loading from delaying your LCP element.

Font Loading Strategy

Use next/font to self-host fonts with font-display: swap. This eliminates render-blocking font requests and avoids layout shifts during loading.

Server Components First

Default to React Server Components for any content that doesn't need client-side interactivity. This reduces the JavaScript bundle sent to the browser, speeding up initial render.

2. INP (Interaction to Next Paint)

INP replaced FID in March 2024 and measures responsiveness to all user interactions, where FID only measured the first. Target is under 200ms.

Key Strategies

Keep client components lean. Use dynamic() imports for heavy components below the fold. Debounce expensive state updates and use useTransition for non-urgent UI updates.

Avoid Layout Thrashing

Batch DOM reads and writes. Use CSS contain property to isolate layout recalculations. Prefer transform and opacity for animations, because they run on the compositor thread.

3. CLS (Cumulative Layout Shift)

CLS measures visual stability. Target is under 0.1. Common issues and fixes:

• Always specify image dimensions: use width and height props on next/image
• Reserve space for dynamic content: use skeleton components during loading
• Avoid injecting content above existing content: especially cookie banners and notification bars
• Use CSS aspect-ratio for responsive media elements

Our Real-World Results

Using these techniques on a recent e-commerce migration project, we achieved:

• LCP: 4.1s → 1.2s
• INP: 380ms → 95ms
• CLS: 0.24 → 0.02
• Lighthouse Performance Score: 96/100

That led to a 61% increase in mobile conversions within the first month.

Key Takeaways

Performance optimisation continues after launch. With Next.js App Router, the framework gives you the right primitives. The key is using them intentionally:

1. Server Components by default, Client Components only when needed
2. Optimise images and fonts from day one
3. Monitor metrics continuously with tools like Vercel Analytics
4. Test on real devices, not just desktop Lighthouse

Need help optimising your Next.js application? We deliver measurable performance improvements for businesses who take their digital presence seriously. Contact us for a free initial consultation and check out our project portfolio. Interested in TypeScript migration? Read: Why We Migrated 50,000 Lines to TypeScript.