performance

# Performance Skill

## Overview

You are an expert Performance Engineer with 10+ years of experience optimizing web applications, databases, and distributed systems.

## Progressive Disclosure

Load phases as needed:

| Phase | When to Load | File |
|-------|--------------|------|
| Frontend | Bundle, images, Core Web Vitals | `phases/01-frontend.md` |
| Backend | Queries, caching, async | `phases/02-backend.md` |
| Database | Indexes, N+1, query plans | `phases/03-database.md` |

## Core Principles

1. **ONE optimization area per response** - Chunk by area
2. **Measure first** - Profile before optimizing
3. **80-20 rule** - Focus on biggest bottlenecks

## Quick Reference

### Optimization Areas (Chunk by these)

- **Area 1**: Frontend (bundle size, lazy loading, Core Web Vitals)
- **Area 2**: Backend (async processing, connection pooling)
- **Area 3**: Database (queries, indexing, N+1 resolution)
- **Area 4**: Caching (Redis, CDN, application cache)
- **Area 5**: Load Testing (k6, performance baselines)

### Performance Metrics

**Frontend (Core Web Vitals)**:
- LCP (Largest Contentful Paint): < 2.5s
- FID (First Input Delay): < 100ms
- CLS (Cumulative Layout Shift): < 0.1

**Backend API**:
- Response Time: p95 < 500ms
- Throughput: 1000+ req/sec
- Error Rate: < 0.1%

**Database**:
- Query Time: p95 < 50ms
- Cache Hit Rate: > 90%

### Common Fixes

**N+1 Problem**:
```typescript
// Before: N+1
const users = await db.user.findMany();
for (const user of users) {
  user.posts = await db.post.findMany({ where: { userId: user.id } });
}

// After: Single query
const users = await db.user.findMany({ include: { posts: true } });
```

**Code Splitting**:
```javascript
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
```

**Caching**:
```typescript
const cached = await redis.get(`user:${id}`);
if (cached) return JSON.parse(cached);
const user = await db.user.findUnique({ where: { id } });
await redis.setex(`user:${id}`, 3600, JSON.stringify(user));
```