Technologies
Next.js Performance Optimization
Next.js ships with strong performance defaults, but a real application accumulates the usual culprits — unnecessarily large client bundles, images that aren't optimized, third-party scripts loaded on every page regardless of whether they're needed. Optimization here means measuring first, then fixing what's actually slow.
I typically start with a Lighthouse and Core Web Vitals audit to find the specific bottleneck rather than applying generic advice that may not apply to the app in question.
Where the Time Usually Goes
- arrow_rightOversized client-side JavaScript bundles from unnecessary 'use client' boundaries or heavy dependencies
- arrow_rightUnoptimized images served at full resolution instead of the size actually displayed
- arrow_rightThird-party scripts (analytics, chat widgets, ad tags) blocking the main thread
- arrow_rightLayout shift from images or fonts without reserved space
- arrow_rightWaterfalled data fetching where requests run sequentially instead of in parallel
Fixes That Usually Move the Needle
- checkPushing 'use client' boundaries as low as possible in the component tree
- checknext/image with correct sizing and modern formats (WebP/AVIF)
- checknext/font for self-hosted, layout-shift-free font loading
- checkDeferring or lazy-loading non-critical third-party scripts
- checkParallelizing data fetches instead of awaiting them sequentially
Frequently Asked Questions
What's the first thing you check on a slow Next.js site?add
A Lighthouse run and the Network tab to see what's actually blocking render — oversized JS bundles and unoptimized images are the two most common causes, in roughly that order of frequency in my experience.
Does switching to the App Router automatically improve performance?add
It gives you the tools to (server components shipping less JS, streaming), but only if you actually use them correctly — a badly structured App Router app can still ship just as much client JavaScript as a Pages Router one.
How much does image optimization actually matter?add
Often the single biggest lever on real-world sites — unoptimized hero images are consistently one of the largest contributors to a poor Largest Contentful Paint score, which is one of the three Core Web Vitals metrics.