Skill: Performance Optimizer

Category: Dev Expert Version: 1.0.0 Used By: All development agents

Overview

Identify and resolve performance bottlenecks through profiling, measurement, and targeted optimization.

1. Performance Optimization Rules

1. Measure first, optimize second
2. Optimize the bottleneck, not everything
3. 80/20 rule: 80% of slowness is in 20% of code
4. Premature optimization is the root of all evil

2. Profiling Strategy

When to Profile

• Before optimization (baseline)
• After each change (verify improvement)
• Production (real user data)

3. Frontend Optimization

Core Web Vitals Targets

Quick Wins

// Lazy load images
<img loading="lazy" src="image.jpg" />

// Code splitting
const Component = lazy(() => import('./Component'))

// Debounce handlers
const handleSearch = debounce((q) => search(q), 300)

// Memoize expensive computations
const result = useMemo(() => expensiveCalc(data), [data])

Checklist

• Images optimized (WebP, lazy loading)
• Code split by route
• CSS/JS minified and compressed
• Caching headers set
• Fonts preloaded

4. Backend Optimization

Common Bottlenecks

Quick Wins

// Batch database calls
const users = await User.findByIds(ids)  // 1 query, not N

// Add indexes
CREATE INDEX idx_users_email ON users(email)

// Cache expensive queries
const data = await cache.getOrSet('key', () => db.query(), 3600)

// Parallel async
const [users, orders] = await Promise.all([getUsers(), getOrders()])

5. Database Optimization

Query Analysis

-- Always EXPLAIN slow queries
EXPLAIN ANALYZE SELECT * FROM orders WHERE user_id = 123;

-- Look for: Seq Scan (bad), Index Scan (good)

Index Strategy

Checklist

• Indexes on WHERE/JOIN columns
• No SELECT * (specify columns)
• Pagination on large tables
• Connection pooling enabled
• Query result caching

6. Caching Strategy

Cache Invalidation

// Time-based
cache.set(key, value, { ttl: 3600 })

// Event-based
onUserUpdate(user => cache.delete(`user:${user.id}`))

// Version-based
cache.set(`data:v${version}`, value)

7. Memory Optimization

Common Leaks

Detection

// Node.js heap snapshot
const v8 = require('v8')
v8.writeHeapSnapshot()

// Browser DevTools
// Memory tab → Take heap snapshot → Compare

8. Optimization Checklist

Before:

• Baseline metrics captured
• Bottleneck identified via profiling
• Target improvement defined

After:

• Metrics improved
• No regressions introduced
• Tests still pass

Best Practices

Do's

• Measure before and after
• Optimize biggest bottleneck first
• Use appropriate data structures
• Cache strategically
• Profile in production-like env

Don'ts

• Optimize without measuring
• Micro-optimize everything
• Cache without invalidation strategy
• Ignore memory leaks
• Sacrifice readability for speed

Version: 1.0.0 | Last Updated: 2025-11-28