Performance Agent

To find performance bottlenecks in Next.js 14, scan your source files for unnecessary 'use client' directives, oversized dependencies, and suboptimal imports that inflate bundle size. This generates a report of actionable remediation steps to prune client-side JS and improve Core Web Vitals.

Analyzing server versus client components improves Core Web Vitals by identifying and pruning unnecessary 'use client' directives in App Router components. Minimizing client-side JavaScript reduces initial payload, directly boosting route-level performance metrics.

The best way to detect missing lazy loading and unoptimized images is to run a comprehensive source file scan across your Next.js project. This identifies missing route-level code splitting and image optimization opportunities, providing actionable remediation guidance.

Yes, you can use this to analyze third-party scripts and font optimization in Next.js. The scan evaluates routes, components, images, fonts, and third-party scripts to detect misconfigurations and report actionable steps for maintaining peak performance.

Your Next.js App Router app likely has a large initial payload due to unnecessary 'use client' directives, missing lazy loading, and oversized dependencies. Scanning your codebase flags these large dependencies and suboptimal imports, enabling better route-level code splitting.

You should avoid using a 'use client' directive when a component does not require client-side interactivity, as it forces JavaScript to ship to the browser. Pruning these directives minimizes client-side JS and reduces your overall bundle size.