Shipping a Faster Next.js App: 7 Changes That Mattered

Performance work is mostly about measuring before you guess. Here are seven changes that usually make the biggest difference.

1. Move data fetching to the server

Server Components let you fetch on the server and ship zero client JavaScript for static sections.

export default async function Page() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

2. Use next/image everywhere

Automatic AVIF/WebP and correct sizes cut image bytes by more than half.

3. Cache aggressively, revalidate deliberately

Tag your fetches and call revalidateTag from mutations instead of disabling caching.

4. Lazy-load heavy client widgets

Charts and editors can load with dynamic(() => import(...), { ssr: false }).

5. Audit your fonts

Self-host with next/font and subset to the glyphs you use.

6. Kill layout shift

Reserve space for images and embeds.

7. Watch the bundle

Run the bundle analyzer on every major dependency bump.

Wrapping up

None of these are exotic; the win comes from doing all of them consistently.