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

2. Measure first, optimize second

3. Optimize the bottleneck, not everything

4. 80/20 rule: 80% of slowness is in 20% of code

5. Premature optimization is the root of all evil

6. Profiling Strategy

Layer Tools Metrics

Frontend Lighthouse, DevTools FCP, LCP, TTI, CLS

Backend APM, profilers Response time, throughput

Database EXPLAIN, slow query log Query time, index usage

Memory Heap snapshots Allocation, leaks

When to Profile

• Before optimization (baseline)

• After each change (verify improvement)

• Production (real user data)

3. Frontend Optimization

Core Web Vitals Targets

Metric Good Description

LCP < 2.5s Largest Contentful Paint

FID < 100ms First Input Delay

CLS < 0.1 Cumulative Layout Shift

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

Issue Solution

N+1 queries Eager loading, batching

Missing indexes Add appropriate indexes

Unbounded queries Pagination, limits

Sync blocking Async/parallel processing

No caching Cache hot data

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

Query Pattern Index Type

Exact match B-tree (default)

Range queries B-tree

Full-text search GIN/GiST

JSON fields GIN

Checklist

• Indexes on WHERE/JOIN columns

• No SELECT * (specify columns)

• Pagination on large tables

• Connection pooling enabled

• Query result caching

6. Caching Strategy

Cache Level TTL Use Case

Browser Hours-Days Static assets

CDN Minutes-Hours API responses

Application Seconds-Minutes Computed data

Database Varies Query cache

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

Cause Fix

Event listeners not removed Cleanup in useEffect/destroy

Closures holding references Null out references

Growing arrays/maps Use WeakMap, clear periodically

Timers not cleared clearInterval/clearTimeout

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