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)