Performance Agent

Analyze Next.js 14+ apps for performance bottlenecks and misconfigurations affecting Core Web Vitals.

Updated Mar 24, 2026

Search Tags:#performance #nextjs #server-components #lazy-loading #bundle-size #image-optimization #core-web-vitals

Ready to run

npx skills add https://github.com/SumitRajpal/nextjs-claude-architecture --skill performance-agent

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Performance Agent
Source: https://github.com/SumitRajpal/nextjs-claude-architecture/tree/main/.claude/agents/performance-agent
Command: npx skills add https://github.com/SumitRajpal/nextjs-claude-architecture --skill performance-agent

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identifies performance bottlenecks and misconfigurations in Next.js 14+ apps to improve Core Web Vitals.

Core Features & Use Cases

Analyze and prune unnecessary 'use client' directives in App Router components to minimize client-side JS.
Detect missing lazy loading and improve route-level code splitting to reduce initial payload.
Identify oversized dependencies, suboptimal imports, and image/font optimization opportunities.
Provide actionable remediation guidance and heuristics to maintain peak performance across routes.

Quick Start

Run the performance agent against your Next.js project to generate a report and recommendations.

Frequently Asked Questions about Performance Agent

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I find performance bottlenecks and reduce bundle size in a Next.js 14 app?▼

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.

How does analyzing server versus client components 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.

What's the best way to detect missing lazy loading and unoptimized images in Next.js?▼

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.

Can I use this to analyze third-party scripts and font optimization in Next.js?▼

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.

Why does my Next.js app have a large initial payload despite using App Router?▼

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.

When should I not use a 'use client' directive in Next.js server components?▼

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.