How do I audit a Next.js website for performance bottlenecks?
Quick Answer: Audit a Next.js website by measuring real user performance first, then tracing bottlenecks across rendering, bundle size, image delivery, data fetching, and caching. Start with Core Web Vitals in Lighthouse, the Chrome Performance panel, and Vercel/Datadog analytics, then isolate slow pages by checking SSR/SSG/ISR behavior, oversized client bundles, unnecessary re-renders, and blocking third-party scripts.
Detailed Explanation
A proper Next.js performance audit is a systems exercise, not a single Lighthouse score. You want to identify where time is being spent across the full request lifecycle: server response, JavaScript execution, hydration, image loading, network waterfall, and client-side interactions. In practice, the fastest way to find bottlenecks is to compare lab data with field data, then inspect route-level behavior in Next.js: whether pages are using SSR when they should be static, whether data requests are duplicated or waterfalling, whether components marked for client-side rendering are inflating the bundle, and whether cache headers, CDN behavior, and third-party tags are degrading TTFB or INP. The goal is to translate measurements into specific fixes such as moving stable content to SSG/ISR, splitting heavy components with dynamic imports, optimizing images and fonts, reducing hydration scope, and pruning scripts that block the main thread.
Key Technical Drivers
- Measure Core Web Vitals and route-level timings: test LCP, INP, CLS, TTFB, and hydration cost with Lighthouse, WebPageTest, and real-user monitoring so you can distinguish lab issues from production regressions.
- Inspect the Next.js rendering path: confirm which routes use SSG, ISR, SSR, or client rendering; look for duplicate fetches, waterfalling API calls, and expensive server components that increase TTFB.
- Profile the client bundle and runtime: use next build --analyze, React Profiler, and the Chrome Performance panel to find oversized dependencies, unnecessary client components, image inefficiencies, and third-party scripts blocking interaction.
- Validate cache and delivery strategy: review CDN headers, static asset caching, image optimization, font loading, and route caching to ensure repeat visits are served with minimal network and compute overhead.