Performance Hunter - Universal Speed Optimization

🎯 When to Use This Skill

Use when experiencing:

• Slow page loads

• High CPU/memory usage

• Sluggish UI responses

• Database timeouts

• API latency issues

• "It used to be faster"

⚡ Quick Wins (80/20 Rule)

The Big 5 Performance Killers (Check These First):

• N+1 Queries - Multiple DB calls in loops

• Missing Indexes - Unindexed database queries

• Large Bundles - Unoptimized assets/dependencies

• Memory Leaks - Unreleased references

• Blocking I/O - Synchronous operations

🔍 Step 1: MEASURE (Don't Guess!)

WITH MCP Tools:

"Profile the performance of [feature/endpoint/page]" "Find performance bottlenecks in my application"

WITHOUT MCP:

Quick Measurements:

Overall response time

time curl http://localhost:3000/api/endpoint

Multiple requests

for i in {1..10}; do time curl -s http://localhost:3000 > /dev/null; done

Database query time (add to your queries temporarily)

console.time('query'); // your database query console.timeEnd('query');

Browser Performance (Frontend):

// Add performance marks performance.mark('myFeature-start'); // ... your code ... performance.mark('myFeature-end'); performance.measure('myFeature', 'myFeature-start', 'myFeature-end');

// View results performance.getEntriesByType('measure');

🎯 Step 2: PROFILE (Find Bottlenecks)

Universal Profiling by Language:

JavaScript/Node.js:

Built-in profiler

node --inspect app.js

Open chrome://inspect

Or use console timing

console.time('operation'); // code console.timeEnd('operation');

Python:

import cProfile import pstats

cProfile.run('your_function()', 'profile_stats') stats = pstats.Stats('profile_stats') stats.sort_stats('cumulative').print_stats(10)

Java:

Use JProfiler or VisualVM

jstack <pid> # Thread dump jmap -histo <pid> # Memory histogram

Go:

import _ "net/http/pprof" // Visit http://localhost:6060/debug/pprof/

Database Profiling:

-- PostgreSQL EXPLAIN ANALYZE SELECT ...;

-- MySQL SET profiling = 1; SHOW PROFILES; SHOW PROFILE FOR QUERY 1;

-- MongoDB db.collection.find().explain("executionStats")

🔧 Step 3: OPTIMIZE (Fix Bottlenecks)

1. Database Optimization

WITH MCP (DB Schema Designer):

"Optimize my database queries for performance"

WITHOUT MCP:

N+1 Query Fix:

// BAD: N+1 queries const users = await getUsers(); for (const user of users) { user.posts = await getPostsByUserId(user.id); // N queries! }

// GOOD: Single query with join const usersWithPosts = await getUsersWithPosts(); // 1 query!

Add Indexes:

-- Find slow queries first -- PostgreSQL SELECT query, calls, mean_time FROM pg_stat_statements ORDER BY mean_time DESC;

-- Add index CREATE INDEX idx_users_email ON users(email); CREATE INDEX idx_posts_user_created ON posts(user_id, created_at);

2. Frontend Optimization

Bundle Size:

Analyze bundle

npm run build -- --stats webpack-bundle-analyzer stats.json

Common fixes:

- Lazy load routes

- Tree shake unused code

- Use CDN for large libraries

React/Vue Specific:

// Use React.memo/Vue.computed const ExpensiveComponent = React.memo(({ data }) => { // Only re-renders if data changes });

// Virtualize long lists import { FixedSizeList } from 'react-window';

3. Backend Optimization

Caching Strategy:

// Memory cache for frequently accessed data const cache = new Map();

async function getExpensiveData(key) { if (cache.has(key)) { return cache.get(key); }

const data = await expensive_operation(); cache.set(key, data);

// TTL (time to live) setTimeout(() => cache.delete(key), 60000); // 1 minute

return data; }

Async/Parallel Processing:

// BAD: Sequential for (const item of items) { await processItem(item); // Slow! }

// GOOD: Parallel (with limit) const pLimit = require('p-limit'); const limit = pLimit(5); // Max 5 concurrent

await Promise.all(items.map(item => limit(() => processItem(item))));

4. Memory Optimization

Find Memory Leaks:

// Node.js if (global.gc) { global.gc(); const used = process.memoryUsage(); console.log('Memory:', Math.round(used.heapUsed / 1024 / 1024), 'MB'); }

// Common leak sources: // - Event listeners not removed // - Timers not cleared // - Large objects in closures // - Circular references

Fix Common Leaks:

// Clean up event listeners componentWillUnmount() { window.removeEventListener('resize', this.handler); }

// Clear timers const timer = setTimeout(...); // Later: clearTimeout(timer);

// WeakMap for object references const cache = new WeakMap(); // GC-friendly

📊 Performance Monitoring

Quick Monitoring Setup:

// Log slow operations function monitor(fn, name, threshold = 100) { return async (...args) => { const start = Date.now(); const result = await fn(...args); const duration = Date.now() - start;

if (duration > threshold) {
  console.warn(`⚠️ Slow operation: ${name} took ${duration}ms`);
}

return result;

}; }

// Usage const fastQuery = monitor(slowQuery, 'UserQuery', 50);

🚀 Quick Performance Checklist

Frontend:

• Bundle size < 300KB (gzipped)

• First Contentful Paint < 1.8s

• Time to Interactive < 3.8s

• No layout shifts (CLS < 0.1)

• Images optimized (WebP, lazy loading)

• Code splitting implemented

• Service worker for caching

Backend:

• API response time < 200ms (p95)

• Database queries < 50ms

• Connection pooling configured

• Rate limiting implemented

• Response compression enabled

• Static assets CDN cached

• Background jobs for heavy tasks

Database:

• All queries use indexes

• No N+1 queries

• Connection pool sized correctly

• Read replicas for heavy reads

• Pagination for large datasets

• Vacuum/analyze scheduled (PostgreSQL)

• Query cache enabled (MySQL)

💡 Language-Specific Quick Wins

Node.js:

// Use cluster for multi-core const cluster = require('cluster'); const numCPUs = require('os').cpus().length;

if (cluster.isMaster) { for (let i = 0; i < numCPUs; i++) { cluster.fork(); } }

Python:

Use built-in accelerators

from functools import lru_cache

@lru_cache(maxsize=128) def expensive_function(param): # Cached after first call return complex_calculation(param)

Java:

// Use StringBuilder for string concatenation StringBuilder sb = new StringBuilder(); for (String s : strings) { sb.append(s); // Much faster than + operator }

🎯 Performance Goals by Type

Web Application:

• Page load: < 3 seconds

• API calls: < 500ms

• Search: < 200ms

• Form submit: < 1 second

Mobile App:

• Launch: < 2 seconds

• Screen transition: < 300ms

• List scroll: 60 FPS

• Network retry: Exponential backoff

API Service:

• p50 latency: < 50ms

• p95 latency: < 200ms

• p99 latency: < 1 second

• Error rate: < 0.1%

📈 Before/After Metrics Template

Performance Optimization Report

Metric | Before | After | Improvement

---------|---------|--------|------------- Page Load | 4.2s | 1.8s | -57% API Response | 800ms | 180ms | -77% Memory Usage | 512MB | 320MB | -37% Bundle Size | 1.2MB | 420KB | -65%

Changes Made:

1. Added database indexes
2. Implemented caching layer
3. Enabled gzip compression
4. Lazy loaded images
5. Code split routes

Remember: Measure → Profile → Optimize → Verify! 🚀