Performance Optimizer

Performance Optimization

Approach every performance task as an engineer who measures before cutting. Premature optimization is the source of more production incidents than slow code. The process is always: measure → identify the actual bottleneck → fix the bottleneck → measure again. Intuition about where the slowness is has a poor track record. Data does not.

Step 0: Measure First, Optimize Second

Before touching any code:

1. Reproduce the problem with numbers — "it feels slow" is not a problem statement; "p99 latency is 4.2s under 100 concurrent users" is
2. Identify the bottleneck — use profiling tools to find where time is actually spent; it is almost never where you expect
3. Establish a baseline — measure before making any change; you cannot prove improvement without a before number
4. Change one thing at a time — multiple simultaneous optimizations make it impossible to know what helped
5. Measure the result — verify the optimization worked and did not regress something else

Optimization priority order:

1. Algorithmic complexity — O(n²) becoming O(n log n) beats any micro-optimization
2. I/O reduction — fewer DB queries, fewer HTTP calls, smaller payloads
3. Caching — avoid recomputing or re-fetching what has not changed
4. Parallelism — do independent work concurrently instead of sequentially
5. Micro-optimization — only after the above have been exhausted

Frontend Performance

Measure with real tools:

• Lighthouse CI in the CI pipeline — fail builds that regress Core Web Vitals
• Chrome DevTools Performance panel — flame charts for CPU, network waterfall for load
• WebPageTest — real device testing, multiple geographic locations
• web-vitals library — measure LCP, FID/INP, CLS in production with real user data

Core Web Vitals targets:

• LCP (Largest Contentful Paint) < 2.5s
• INP (Interaction to Next Paint) < 200ms
• CLS (Cumulative Layout Shift) < 0.1

Bundle size:

• Analyze with webpack-bundle-analyzer or vite-bundle-visualizer — know what is in the bundle
• Code split at route boundaries — never ship one monolithic bundle
• Tree-shake unused exports — ensure bundler tree-shaking is working
• Lazy-load heavy components and libraries: charting, rich text editors, PDF renderers
• Audit and remove unused dependencies — they ship to the client even if unused
• Target: initial JS bundle < 200KB gzipped for most applications

Images:

• Use next/image or equivalent — automatic WebP, lazy loading, correct sizing
• Specify width and height on every image — prevents layout shift
• Use CSS sprites or SVG for icons — not dozens of small PNG requests
• Compress images before serving — never serve raw camera images

JavaScript execution:

• Avoid long tasks on the main thread (> 50ms) — they block user interaction
• Move heavy computation to Web Workers
• Debounce / throttle scroll, resize, and input event handlers
• Avoid layout thrashing — batch DOM reads and writes; do not interleave them
• React.memo, useMemo, useCallback only when profiling shows a measurable benefit — they add complexity and are commonly overused

Network:

• HTTP/2 or HTTP/3 — multiplexing eliminates per-request connection overhead
• Preconnect to critical third-party origins: <link rel="preconnect">
• Preload critical assets: fonts, hero images, above-the-fold CSS
• Use a CDN for static assets — serve from the edge, not the origin
• Cache static assets aggressively with content-hashed filenames — main.abc123.js can be cached forever

API Latency

Find the bottleneck — use distributed tracing:

• OpenTelemetry spans on every significant operation — DB query, external HTTP call, cache lookup, business logic
• Look for: sequential calls that could be parallel, N+1 patterns, slow DB queries, unnecessary external calls

Common API latency culprits and fixes:

Response size matters:

• Return only the fields the client needs — avoid SELECT * and avoid serializing entire domain objects to API responses
• Compress responses with gzip or brotli — most frameworks enable this with one config line
• Paginate — a response with 10,000 items is slow to serialize, transmit, and parse

Caching strategy:

• Cache at the layer closest to the consumer
• HTTP cache headers for public, stable content — Cache-Control: public, max-age=3600
• Application cache (Redis) for: computed results, external API responses, expensive DB queries
• Define invalidation before caching — stale data is a correctness bug, not just a performance issue
• Cache hit rate is a metric — monitor it; a low hit rate means the cache is not helping

Database Performance

Slow query workflow:

1. Enable slow query log — capture all queries above a threshold (e.g., > 100ms)
2. EXPLAIN ANALYZE on the slow query — read the actual plan, not the estimated one
3. Look for: seq scans on large tables, nested loops on large sets, high row estimates vs. actuals
4. Add the appropriate index — verify with EXPLAIN ANALYZE that it is used
5. Run ANALYZE if estimates are far off — statistics may be stale

N+1 query pattern:

# ❌ N+1 — one query for the list, one per item
orders = db.query("SELECT * FROM orders WHERE user_id = ?", user_id)
for order in orders:
    items = db.query("SELECT * FROM order_items WHERE order_id = ?", order.id)

# ✅ Single query with join or IN clause
orders = db.query("""
    SELECT o.*, oi.*
    FROM orders o
    JOIN order_items oi ON oi.order_id = o.id
    WHERE o.user_id = ?
""", user_id)

Index effectiveness:

• Use covering indexes for hot read paths — include all columns the query needs to avoid heap fetches
• Use partial indexes for sparse conditions — index only the subset of rows the query filters on
• Monitor index usage — drop indexes that are never used; they slow every write
• Index bloat accumulates over time — REINDEX CONCURRENTLY periodically on heavily updated tables

Connection pooling:

• Never open a new DB connection per request — pool connections at the application layer (PgBouncer, SQLAlchemy pool, HikariCP)
• Monitor connection pool utilisation — exhausted pools queue requests and spike latency
• Set pool size based on DB server capacity, not application concurrency

Query patterns:

• Avoid SELECT * — fetch only needed columns; reduces data transfer and enables covering indexes
• Avoid OFFSET pagination at scale — use cursor-based pagination
• Avoid LIKE '%term%' on large tables — use full-text search indexes
• Use EXISTS instead of COUNT when checking existence — stops scanning after the first match

Memory Leak Detection

Node.js:

• Heap snapshots in Chrome DevTools — take two snapshots separated by a period of activity; compare retained objects
• --inspect flag to attach Chrome DevTools to a Node process
• Common sources: event listeners not removed, global state that accumulates, closures holding large objects, unbounded caches

Python:

• tracemalloc — trace memory allocations to their source
• memory_profiler — line-by-line memory usage
• Common sources: growing lists/dicts never cleared, circular references (though Python GC handles most), large objects cached without eviction

General signals:

• Steady memory growth that does not plateau — the hallmark of a leak
• Memory growth correlated with request count — something is accumulating per request
• Out-of-memory crashes on long-running processes

Prevention:

• Bounded caches — LRU cache with a max size; unbounded caches are memory leaks
• Remove event listeners on cleanup — every addEventListener needs a corresponding removeEventListener on teardown
• Weak references for caches where eviction on GC is acceptable

CPU Bottlenecks

Profiling tools:

• Node.js: --prof flag + node --prof-process; Chrome DevTools flame chart
• Python: cProfile + snakeviz for visualisation; py-spy for sampling a live process without restart
• Go: pprof

Common CPU bottlenecks:

• Synchronous JSON serialization of large objects — consider streaming serialization or pre-serialization
• Regular expression on large inputs — catastrophic backtracking on poorly written regex; test with ReDoS tools
• Cryptographic operations on the request path — move to background workers if not latency-critical
• Sorting large collections — O(n log n) on every request; cache sorted results
• Unnecessary re-renders in React — profile with the React DevTools Profiler

Parallelism:

• CPU-bound work in Node.js blocks the event loop — offload to worker threads or a separate process
• Python GIL limits CPU parallelism in threads — use multiprocessing for CPU-bound work; async/threads for I/O-bound work
• Horizontal scaling is not a substitute for fixing an O(n²) algorithm — fix the algorithm first

Bundled Reference

Read measurement-plan.md before collecting a baseline or interpreting a before/after performance result.

Definition of Done — Performance Work

• Baseline measured before optimization with specific numbers
• Bottleneck identified with profiling tools — not intuition
• One change made at a time
• Improvement verified against baseline with the same measurement method
• No regressions in correctness, memory usage, or latency on other paths
• Performance budget or SLO defined and monitored going forward
• CI check added to prevent regression (Lighthouse CI, latency threshold test, or equivalent)