performance

What this skill does

# 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):**

```javascript
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**:

```markdown
## 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
```javascript
// 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

```javascript
// 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**:
```markdown
## React Performance: Component Optimization

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

### Optimization
```javascript
// 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 im