Loading...
Loading...
Comprehensive performance specialist covering analysis, optimization, load testing, and framework-specific performance. Use when identifying bottlenecks, optimizing code, conducting load tests, analyzing Core Web Vitals, fixing memory leaks, or improving application performance across all layers (application, database, frontend). Includes React-specific optimization patterns.
npx skill4agent add 89jobrien/steve performanceAnalyze the performance of this application and identify bottlenecksProfile the memory usage and find any leaksCreate load test scenarios for this APITest performance under 1000 concurrent usersOptimize this React app for better performanceAnalyze bundle size and reduce itimport 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,
});
}/api/users## 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
}// Optimized with eager loading
const users = await db.users.findAll({
include: [{ model: Post, as: 'posts' }] // Single query with JOIN
});
### 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} />;
});
## 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