Vatsal Mavani
Performance6 min read

Core Web Vitals for Next.js: A Practical Checklist

Practical steps to improve LCP, CLS, and INP on Next.js apps—without waiting until launch week to care about performance.

·Vatsal Mavani

Google uses Core Web Vitals as a ranking signal. Users use them as a "does this app feel broken?" signal. For most Next.js apps, they are worth getting right early.

Here's the checklist I run on Next.js projects before launch.

LCP: make the hero fast

Largest Contentful Paint is usually your hero image, headline block, or a large card.

Fixes that actually move the needle:

  • Use next/image with explicit width/height and priority on above-the-fold images
  • Load fonts with next/font—never chain a Google Fonts @import in CSS
  • Avoid rendering huge client bundles before the hero paints—keep the top of the page server-rendered when possible

If LCP is slow, no amount of backend optimization will save first impressions.

CLS: stop the layout jump

Cumulative Layout Shift kills trust—buttons move under your cursor, text reflows, ads push content.

Common culprits on marketing and product pages:

  • Images without reserved space
  • Web fonts swapping late without size-adjust
  • Banners or toasts injected above existing content

Reserve space. Test on slow 3G in Chrome DevTools. If something moves after load, fix it.

INP: keep interactions snappy

Interaction to Next Paint measures how fast the UI responds to taps and clicks.

Practical improvements:

  • Split heavy client components—don't mount everything on first interaction
  • Debounce expensive handlers on search and filters
  • Use useTransition for non-urgent state updates on complex dashboards

For SaaS dashboards, INP often matters more than raw Lighthouse scores because users live in the UI all day.

SEO and performance go together

Fast pages rank better. So does good metadata:

  • Unique titles and descriptions per route
  • Canonical URLs and Open Graph images
  • Semantic heading hierarchy (one h1, logical h2s)

One news platform project combined performance work with metadata and saw meaningful organic traffic growth—not from tricks, but from pages that were fast and crawlable.

Ship performance as a feature

Don't treat Core Web Vitals as a post-launch audit. Build them into component standards:

  • Image rules in your design system
  • Font loading policy in layout
  • Performance budget on key templates

I help startups ship Next.js products that look great and score well.

Get in touch if you want a performance pass on your app.