How to Fix Core Web Vitals in Next.js / Nuxt
Next.js and Nuxt are CWV-optimised by default — but you can still ship slow apps via wrong rendering choices, heavy client components, unoptimised images, or third-party script bloat. This guide covers framework-specific CWV. Pair with CWV guide.
Step-by-step: How to fix Core Web Vitals in Next.js / Nuxt
- Baseline measurement. Vercel Analytics or Sentry Performance for real field data. PageSpeed Insights for lab. Map current LCP, INP, CLS against thresholds (2.5s / 200ms / 0.1).
- Choose right rendering strategy. Static pages: getStaticProps / SSG (Next.js) or asyncData with static mode (Nuxt). Dynamic pages: SSR. Mixed: Next.js ISR or on-demand revalidation. CSR (client-only) only for authenticated dashboards — never for marketing/content pages.
- Use next/image (Next.js) or NuxtImage (Nuxt). Both handle: format conversion (WebP, AVIF), responsive sizing, lazy loading, dimensions for CLS protection. Never use raw <img>.
- Use next/font or @nuxtjs/google-fonts. Eliminates font-swap CLS. next/font also self-hosts Google Fonts removing third-party connection.
- Reduce client component scope. Next.js App Router: most components should be Server Components (no 'use client'). Only mark client when you need useState, useEffect, event handlers. Reduces client JS bundle dramatically.
- Code split aggressively. Dynamic imports for heavy components used conditionally: const Chart = dynamic(() => import('./Chart'), { ssr: false }). Reduces initial bundle, improves INP.
- Audit third-party scripts. Use next/script with appropriate strategy (afterInteractive, lazyOnload, beforeInteractive). Move analytics, chat, marketing scripts to lazyOnload. Each third-party can cost 100+ms INP.
Frequently Asked Questions
Why does my Next.js app score poor INP despite SSR?
INP measures interaction responsiveness — depends on client JS execution time, not server rendering. Common causes: too much client JavaScript (most components are 'use client'), heavy event handlers, third-party scripts blocking main thread. Audit with Performance tab; reduce client component scope; defer third-party.
Does Vercel hosting improve CWV automatically?
Edge functions (faster TTFB globally), Image Optimization API (faster images), automatic CDN (faster static assets). Yes — Vercel deployments typically score 10-20% better CWV than identical Next.js on self-hosted. But underlying app code still dominates.
What's React Server Components' CWV impact?
Large positive. RSC code doesn't ship to the client — reduces bundle by 30-70% in typical apps. Initial page weight drops, hydration time drops, INP improves. Migration from Pages Router to App Router with RSC is one of the biggest CWV improvements available.
How do I measure Next.js INP in production?
Vercel Analytics (built-in, field data), or use the web-vitals npm package + custom reporting. Send to your analytics provider. INP requires real user interactions to measure — lab tools approximate but field is authoritative.
Best Next.js performance audit tools?
Built-in: next build output shows bundle sizes per route. Bundle Analyzer (@next/bundle-analyzer) visualises chunks. Vercel Analytics (real user CWV). Lighthouse CI (lab metrics in CI). For Nuxt: Nuxt DevTools, @nuxt/devtools provides similar visibility.