Why Core Web Vitals Matter in 2025
Google's Core Web Vitals have evolved beyond simple ranking signals — they're now 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.
At Tem Craft Tech, we've optimized 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 Optimization
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 — not just the first one. 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 — 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
widthandheightprops onnext/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-ratiofor 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
The result? A 58% increase in mobile conversions within the first month.
Key Takeaways
Performance optimization isn't a one-time task — it's a continuous discipline. With Next.js App Router, the framework gives you the right primitives. The key is using them intentionally:
- Server Components by default, Client Components only when needed
- Optimize images and fonts from day one
- Monitor metrics continuously with tools like Vercel Analytics
- Test on real devices, not just desktop Lighthouse
Need help optimizing your Next.js application? We deliver measurable performance improvements for businesses who take their digital presence seriously.