AIWebPageSEO › Page Speed Fixes › Fix Page Speed in Next.js

How to Fix Page Speed in Next.js

Next.js gives you fast defaults — but easy ways to ruin them: heavy client components, third-party script bloat, unoptimised images, poor caching. This guide covers Next.js-specific speed. Pair with page speed guide and CWV.

Step-by-step: How to speed up Next.js

  1. Baseline. PageSpeed Insights on key pages. Vercel Analytics for field data. TTFB target < 400ms; LCP < 2.5s; INP < 200ms; CLS < 0.1.
  2. Choose right rendering. Static pages (marketing, blog): SSG via getStaticProps or App Router static rendering. Dynamic content: SSR or ISR. Authenticated dashboards only: client-side. Never client-side for public content pages.
  3. Reduce client JS. App Router: limit 'use client' to interactive components. Most layouts and content should be Server Components, no JS shipped.
  4. Use next/image and next/font. Discussed in detail in 'Fix Images in Next.js' and CWV guides. Both eliminate common speed gotchas.
  5. Configure caching. Static pages: cached by CDN automatically. SSR: configure revalidate (ISR) or cache headers. Vercel: cache headers honoured at edge. Self-hosted: configure Nginx or your CDN.
  6. Use edge runtime where appropriate. Edge functions (middleware.ts, API routes with runtime: 'edge') run at global edge, lower TTFB than regional functions. Limits: no Node.js APIs, limited memory. Suitable for: middleware, auth checks, simple API responses.
  7. Audit and defer third-party. next/script with strategy. Move analytics, chat widgets, marketing scripts to lazyOnload. Each third-party can cost 100-300ms.
Tip. Pin your framework, dependency, and config versions in a single internal doc (Next.js version, React version, rendering strategy choices, custom config). When something breaks after a framework or library update, you have a baseline to compare against.

⚡ Audit Next.js speed

Find rendering, bundle and caching issues.

Run Page Speed Audit →

Frequently Asked Questions

Why is Vercel-hosted Next.js faster than self-hosted?

Vercel's edge network (Fastly + custom) optimised for Next.js. Image Optimization at edge (fast images globally). Automatic asset caching at edge. ISR runs at edge. Self-hosted Next.js with Cloudflare or custom CDN can match Vercel, but requires more configuration. Most teams pick Vercel for simplicity.

Should I use Next.js Edge Runtime everywhere?

No — only where it fits. Edge has restrictions: no Node.js APIs (fs, crypto modules), limited memory, faster cold starts. Use edge for: middleware, auth checks, simple API responses, geolocation routing. Don't use edge for: heavy compute, database access via Node.js drivers, file processing.

Best Next.js caching strategy?

Static pages: cache at CDN edge (default on Vercel). ISR (revalidate: 60): regenerate every 60s, fast reads from cache between. Tagged revalidation (Next.js 14+): revalidate on event (e.g., CMS publish) rather than time-based. On-demand revalidation for instant updates after content changes.

How do I find Next.js bundle bloat?

@next/bundle-analyzer plugin. Build with ANALYZE=true npm run build. Opens treemap visualisation of bundle composition. Identify large chunks: are they needed everywhere or only on specific pages? Dynamic-import large code-split candidates.

Does upgrading to latest Next.js improve speed?

Often yes. Next.js 13 → 14 → 15 each delivered meaningful performance improvements: faster cold starts, smaller bundles, better caching. Upgrade is mostly compatible (occasional breaking changes documented). Run npm outdated to check current vs latest.

Related Guides

Got a problem?