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

Performance Profiling: Analyzes CPU, memory, and network performance
Bottleneck Identification: Pinpoints specific performance issues
Memory Analysis: Detects memory leaks and high memory usage
Database Optimization: Identifies slow queries and optimization opportunities
Frontend Analysis: Analyzes bundle size, rendering performance, Core Web Vitals
Load Testing: Creates and executes load test scenarios
Stress Testing: Identifies breaking points and limits
Capacity Planning: Analyzes scalability and capacity
React Optimization: Optimizes React rendering, bundle size, and Core Web Vitals
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:

Identify the slow operation
Measure its performance
Analyze why it's slow
Check for optimization opportunities
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
```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

// 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 improvements
- **`references/load_testing.md`** - Load testing and stress testing patterns, tools, scenarios, and capacity planning strategies
- **`references/PERFORMANCE_ANALYSIS.template.md`** - Performance analysis report template with load profiles, bottlenecks, and recommendations

When analyzing performance for specific frameworks or conducting load tests, load the appropriate reference file.

## Best Practices

### Performance Analysis Approach

1. **Measure First**: Always establish baseline metrics
2. **Profile Before Optimizing**: Identify actual bottlenecks
3. **Optimize Incrementally**: Make one change at a time
4. **Verify Improvements**: Measure after each optimization
5. **Monitor Continuously**: Set up ongoing performance monitoring

### Common Optimizations

**Application:**
- Optimize algorithms (reduce complexity)
- Add caching layers
- Use connection pooling
- Implement request batching
- Add rate limiting

**Database:**
- Add appropriate indexes
- Optimize queries (avoid N+1)
- Use query result caching
- Implement read replicas
- Optimize connection pooling

**Frontend:**
- Code splitting and lazy loading
- Image optimization
- Bundle size reduction
- Minimize re-renders
- Optimize asset loading

**React:**
- Measure before optimizing
- Memoize strategically (don't over-memoize)
- Code split by route and feature
- Lazy load components on demand
- Monitor performance metrics

### Monitoring Setup

**Key Metrics:**
- Response time percentiles
- Error rates
- Throughput
- Resource utilization
- Custom business metrics

**Alerting:**
- Alert on performance degradation
- Alert on error rate spikes
- Alert on resource exhaustion
- Alert on SLA violations

## Related Use Cases

- Performance audits
- Optimization projects
- Capacity planning
- Performance regression detection
- Production performance monitoring
- Load testing analysis
- React app optimization
- Bundle size reduction
- Core Web Vitals improvement
- Memory leak fixes
- Rendering performance optimization

performance

Performance

When to Use This Skill