optimize

What this skill does

# Performance Optimization Skill

When analyzing code for performance, follow this structured process:

## 1. Understand What's Slow
- Ask or determine: what operation is slow? (page load, API response, build time, query, render)
- What's the current performance? (response time, load time, memory usage)
- What's the expected/acceptable performance?
- How much data is involved? (10 rows vs 10 million rows changes everything)

## 2. Algorithm & Data Structure Analysis
- Identify time complexity of key operations (O(n), O(n²), O(n log n), etc.)
- Look for nested loops over large datasets
- Check if a different data structure would help:
  - Array lookups that should be Map/Set/Object for O(1) access
  - Linear searches that should use binary search or indexing
  - Repeated array filtering that should be pre-grouped
- Look for unnecessary sorting or repeated work

Flag pattern:
```
// 🔴 BAD — O(n²): nested loop for lookups
users.forEach(user => {
  const order = orders.find(o => o.userId === user.id);
});

// ✅ GOOD — O(n): pre-index with Map
const orderMap = new Map(orders.map(o => [o.userId, o]));
users.forEach(user => {
  const order = orderMap.get(user.id);
});
```

## 3. Database & Query Performance
- **N+1 queries**: Loading related data inside a loop instead of batch loading
- **Missing indexes**: Queries filtering/sorting on unindexed columns
- **Over-fetching**: SELECT * when only a few columns are needed
- **Missing pagination**: Loading entire tables into memory
- **Unoptimized joins**: Joining large tables without proper conditions
- **Missing connection pooling**: Opening new connections per request

Flag pattern:
```
// 🔴 BAD — N+1: one query per user
for (const user of users) {
  const posts = await db.query('SELECT * FROM posts WHERE user_id = ?', [user.id]);
}

// ✅ GOOD — single batch query
const posts = await db.query('SELECT * FROM posts WHERE user_id IN (?)', [userIds]);
const postsByUser = groupBy(posts, 'user_id');
```

## 4. Memory Analysis
- **Memory leaks**: Event listeners not cleaned up, intervals not cleared, subscriptions not unsubscribed
- **Large object retention**: Holding references to data no longer needed
- **Unbounded caches**: Caches that grow forever without eviction
- **String concatenation in loops**: Use array join or StringBuilder instead
- **Loading entire files into memory**: Stream large files instead

Flag pattern:
```
// 🔴 BAD — memory leak: listener never removed
useEffect(() => {
  window.addEventListener('resize', handleResize);
}, []);

// ✅ GOOD — cleanup on unmount
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);
```

## 5. Frontend Performance (if applicable)
- **Unnecessary re-renders**: Missing React.memo, useMemo, useCallback
- **Large bundle size**: Importing entire libraries when only one function is needed
- **Missing code splitting**: Large pages that should be lazy loaded
- **Unoptimized images**: Missing compression, wrong format, no lazy loading
- **Layout thrashing**: Reading and writing DOM properties in a loop
- **Missing virtualization**: Rendering thousands of list items instead of virtualizing
- **Blocking main thread**: Heavy computation not offloaded to Web Worker

Flag pattern:
```
// 🔴 BAD — re-computes on every render
const sorted = items.sort((a, b) => a.name.localeCompare(b.name));

// ✅ GOOD — memoized
const sorted = useMemo(
  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);
```

## 6. API & Network Performance
- **Missing caching**: Responses that could be cached (HTTP headers, Redis, in-memory)
- **No request batching**: Multiple small requests that could be combined
- **Missing compression**: Large JSON responses without gzip/brotli
- **Synchronous operations**: Blocking calls that could be parallelized
- **No pagination**: Returning unbounded result sets
- **Missing timeouts**: External calls without timeout limits

Flag pattern:
```
// 🔴 BAD — sequential when independent
const users = await fetchUsers();
const products = await fetchProducts();
const orders = await fetchOrders();

// ✅ GOOD — parallel execution
const [users, products, orders] = await Promise.all([
  fetchUsers(),
  fetchProducts(),
  fetchOrders(),
]);
```

## 7. Concurrency & Async
- **Uncontrolled parallelism**: Firing 10,000 requests at once instead of batching
- **Missing debounce/throttle**: Search inputs firing on every keystroke
- **Blocking event loop**: CPU-heavy sync operations in Node.js
- **Missing queue**: Tasks that should be queued and processed in background

## 8. Build & Tooling (if applicable)
- Slow builds from unnecessary transpilation
- Missing tree shaking
- Duplicated dependencies in bundle
- Missing caching in CI/CD pipeline

## Output Format

For each issue found:

**[IMPACT] Category — File:Line**
- **Problem**: What's slow and why
- **Current complexity**: O(?) or estimated impact
- **Suggested fix**: How to improve it
- **Expected improvement**: What performance gain to expect
```
// before (slow)
...

// after (fast)
...
```

Impact levels:
- 🔴 **HIGH** — Causes noticeable slowdown or crashes at scale. Fix first.
- 🟡 **MEDIUM** — Degrades performance under load. Fix soon.
- 🟢 **LOW** — Minor inefficiency. Optimize when convenient.

## Summary

End every analysis with:
1. **Biggest bottleneck** — The single highest-impact issue
2. **Quick wins** — Changes that take <30 minutes and give noticeable improvement
3. **Estimated improvement** — What overall performance gain to expect after fixes
4. **Measurement plan** — How to verify the improvements (specific metrics to track, tools to use)