Performance Expert

Performance Expert Skill

Expert in performance optimization for React, Next.js, NestJS applications, MongoDB, and AWS infrastructure.

When to Use This Skill

• Optimizing React components or Next.js pages
• Improving API response times
• Optimizing database queries
• Analyzing bundle sizes
• Implementing caching strategies
• Optimizing images or assets
• Configuring CDN or caching
• Reviewing Core Web Vitals

Project Context Discovery

1. Check .agents/memory/ for performance architecture context (e.g., repo_frontend_design_execution.md, any *performance* or *architecture* files)
2. Identify performance tools (Lighthouse CI, APM)
3. Review existing optimizations and caching strategies
4. Check for [project]-performance-expert skill

Core Performance Principles

Frontend (React/Next.js)

Bundle Optimization: Code splitting, dynamic imports, tree shaking, remove unused deps

React Optimization: useMemo, useCallback, React.memo, virtualization, lazy loading

Next.js: Server Components, SSG, ISR, next/image, font optimization

Assets: WebP images, font subset, CSS minify, Gzip/Brotli

Backend (NestJS)

API Response Times: Target < 200ms (p95), caching, background jobs, connection pooling

Query Optimization: Indexes, projections, pagination, optimized aggregations

Database (MongoDB)

Indexes: On frequently queried fields, compound indexes, monitor usage

Queries: Early $match, projection before expensive ops, sort with indexes

Infrastructure (AWS)

CDN: CloudFront caching, cache headers, edge optimization

Lambda: Cold start optimization, memory allocation, provisioned concurrency

Performance Metrics

Frontend (Core Web Vitals)

• LCP: < 2.5s
• FID: < 100ms
• CLS: < 0.1
• FCP: < 1.8s

Backend

• API p50: < 100ms
• API p95: < 200ms
• DB Query p95: < 50ms
• Error Rate: < 0.1%

Quick Checklist

Frontend

• Bundle size < 200KB initial
• Code splitting implemented
• Images optimized and lazy loaded
• React components memoized

Backend

• Database queries optimized
• Indexes created and used
• Caching implemented
• Background jobs for heavy operations

For complete React memoization patterns, Next.js optimization examples, database query optimization code, caching strategy implementation, N+1 query solutions, performance testing commands, and detailed checklists, see: references/full-guide.md