performance

Performance

This skill provides comprehensive performance capabilities including performance analysis, optimization, load testing, stress testing, capacity planning, and framework-specific performance patterns.

When to Use This Skill

• When identifying performance bottlenecks
• When investigating memory leaks or high memory usage
• When optimizing slow database queries
• When analyzing frontend performance (Core Web Vitals, bundle size)
• When setting up performance monitoring
• When conducting performance audits before deployment
• When creating load test scenarios
• When analyzing performance under stress
• When identifying system bottlenecks under load
• When planning capacity
• When setting up performance benchmarks
• When optimizing React rendering performance
• When reducing bundle size
• When improving Core Web Vitals (LCP, FID, CLS)
• When fixing memory leaks in React apps
• When implementing advanced React patterns

What This Skill Does

1. Performance Profiling: Analyzes CPU, memory, and network performance
2. Bottleneck Identification: Pinpoints specific performance issues
3. Memory Analysis: Detects memory leaks and high memory usage
4. Database Optimization: Identifies slow queries and optimization opportunities
5. Frontend Analysis: Analyzes bundle size, rendering performance, Core Web Vitals
6. Load Testing: Creates and executes load test scenarios
7. Stress Testing: Identifies breaking points and limits
8. Capacity Planning: Analyzes scalability and capacity
9. React Optimization: Optimizes React rendering, bundle size, and Core Web Vitals
10. Monitoring Setup: Creates performance monitoring and alerting

How to Use

Analyze Performance

Analyze the performance of this application and identify bottlenecks

Profile the memory usage and find any leaks

Create Load Tests

Create load test scenarios for this API

Test performance under 1000 concurrent users

Optimize React Apps

Optimize this React app for better performance

Analyze bundle size and reduce it

Analysis Areas

Application Performance

Metrics to Track:

• Response times and latency
• Throughput (requests per second)
• Error rates
• CPU utilization
• Memory usage patterns

Common Issues:

• Slow API endpoints
• High CPU usage
• Memory leaks
• Inefficient algorithms
• Blocking operations

Database Performance

Analysis Focus:

• Slow query identification
• Missing indexes
• N+1 query problems
• Connection pool exhaustion
• Lock contention

Tools:

• Query execution plans (EXPLAIN ANALYZE)
• Slow query logs
• Database monitoring tools
• Connection pool metrics

Frontend Performance

Core Web Vitals:

• Largest Contentful Paint (LCP) < 2.5s
• First Input Delay (FID) < 100ms
• Cumulative Layout Shift (CLS) < 0.1

Bundle Analysis:

• Bundle size optimization
• Code splitting opportunities
• Unused code removal
• Asset optimization

React Performance

Rendering Optimization:

• React.memo for component memoization
• useMemo for expensive computations
• useCallback for function memoization
• Virtualization for long lists
• Code splitting and lazy loading

Bundle Optimization:

• Code splitting by route
• Component lazy loading
• Tree shaking unused code
• Dynamic imports
• Bundle analysis

Performance Testing

Load Testing

Purpose: Test system under expected load Metrics: Response time, throughput, error rate Tools: k6, Artillery, JMeter, Locust

Example (k6):

import http from 'k6/http';
import { check } from 'k6';

export const options = {
  stages: [
    { duration: '2m', target: 100 }, // Ramp up
    { duration: '5m', target: 100 }, // Stay at 100
    { duration: '2m', target: 200 }, // Ramp up to 200
    { duration: '5m', target: 200 }, // Stay at 200
    { duration: '2m', target: 0 },   // Ramp down
  ],
};

export default function() {
  const res = http.get('https://api.example.com/users');
  check(res, {
    'status is 200': (r) => r.status === 200,
    'response time < 500ms': (r) => r.timings.duration < 500,
  });
}

Stress Testing

Purpose: Find breaking points Metrics: Maximum capacity, failure points Approach: Gradually increase load until failure

Capacity Planning

Purpose: Determine resource needs Metrics: Resource utilization, scaling requirements Analysis: Current capacity vs. future needs

Analysis Process

1. Establish Baseline

Measure Current Performance:

• Response time percentiles (p50, p90, p95, p99)
• Throughput metrics
• Error rates
• Resource utilization (CPU, memory, network)

Set Targets:

• Define acceptable performance thresholds
• Set SLA targets
• Identify critical paths

2. Identify Bottlenecks

Profiling Techniques:

• CPU profiling to find hot functions
• Memory profiling to find leaks
• Network analysis for API calls
• Database query analysis

Bottleneck Patterns:

• Single slow operation (algorithmic complexity)
• Many small operations (N+1 queries)
• Resource contention (locks, connection pools)
• Memory leaks (gradual growth)

3. Analyze Root Cause

Investigation Steps:

1. Identify the slow operation
2. Measure its performance
3. Analyze why it's slow
4. Check for optimization opportunities
5. Verify the fix improves performance

4. Provide Optimization Recommendations

Recommendations Should Include:

• Specific code changes
• Before/after performance metrics
• Implementation steps
• Expected impact
• Risk assessment

Examples

Example 1: API Performance Analysis

Input: API endpoint /api/users is slow

Output:

## Performance Analysis: /api/users

### Current Performance
- **Average Response Time**: 2.3s
- **P95 Response Time**: 4.1s
- **Throughput**: 45 req/s
- **Error Rate**: 2%

### Bottleneck Identified
**Issue**: N+1 query problem in user data fetching
- **Location**: `src/routes/users.js:34`
- **Pattern**: One query for users, then N queries for each user's posts

### Root Cause

// Current implementation const users = await db.users.findAll(); for (const user of users) { user.posts = await db.posts.findByUserId(user.id); // N+1 queries }

### Optimization

// Optimized with eager loading const users = await db.users.findAll({ include: [{ model: Post, as: 'posts' }] // Single query with JOIN });

### Expected Impact

- **Response Time**: 2.3s → 0.3s (87% improvement)
- **Database Queries**: 101 → 1 (99% reduction)
- **Throughput**: 45 → 200+ req/s

Example 2: React Component Optimization

Input: Optimize expensive component

Output:

## React Performance: Component Optimization

### Issue
Component re-renders on every parent update, even when props haven't changed.

### Optimization

// Before: Re-renders unnecessarily function ExpensiveComponent({ data, config }) { const processed = data .filter(item => item.active) .map(item => processComplex(item, config));

return <Chart data={processed} />; }

// After: Memoized to prevent unnecessary re-renders const ExpensiveComponent = React.memo(({ data, config }) => { const processed = useMemo(() => { return data .filter(item => item.active) .map(item => processComplex(item, config)); }, [data, config]);

return <Chart data={processed} />; });

### Impact

- Re-renders reduced: 100% → 5%
- Performance improvement: 80% faster

Reference Files

For framework-specific performance patterns and detailed guidance, load reference files as needed:

• references/framework_patterns.md - Performance patterns for Node.js, React, databases, APIs, frontend, and monitoring strategies (from performance-analysis)
• references/react_patterns.md - React-specific performance optimization patterns, memoization strategies, bundle optimization, and Core Web Vitals imp