optimizing-performance

Optimizing Performance

When to Load

• Trigger: Diagnosing slowness, profiling, caching strategies, reducing load times, bundle size optimization
• Skip: Correctness-focused work where performance is not a concern

Performance Optimization Workflow

Copy this checklist and track progress:

Performance Optimization Progress:
- [ ] Step 1: Measure baseline performance
- [ ] Step 2: Identify bottlenecks
- [ ] Step 3: Apply targeted optimizations
- [ ] Step 4: Measure again and compare
- [ ] Step 5: Repeat if targets not met

Critical Rule: Never optimize without data. Always profile before and after changes.

Step 1: Measure Baseline

Profiling Commands

# Node.js profiling
node --prof app.js
node --prof-process isolate*.log > profile.txt

# Python profiling
python -m cProfile -o profile.stats app.py
python -m pstats profile.stats

# Web performance
lighthouse https://example.com --output=json

Step 2: Identify Bottlenecks

Common Bottleneck Categories

Category	Symptoms	Tools
CPU	High CPU usage, slow computation	Profiler, flame graphs
Memory	High RAM, GC pauses, OOM	Heap snapshots, memory profiler
I/O	Slow disk/network, waiting	strace, network inspector
Database	Slow queries, lock contention	Query analyzer, EXPLAIN

Step 3: Apply Optimizations

Frontend Optimizations

Bundle Size:

// ❌ Import entire library
import _ from "lodash";

// ✅ Import only needed functions
import debounce from "lodash/debounce";

// ✅ Use dynamic imports for code splitting
const HeavyComponent = lazy(() => import("./HeavyComponent"));

Rendering:

// ❌ Render on every parent update
function Child({ data }) {
  return <ExpensiveComponent data={data} />;
}

// ✅ Memoize when props don't change
const Child = memo(function Child({ data }) {
  return <ExpensiveComponent data={data} />;
});

// ✅ Use useMemo for expensive computations
const processed = useMemo(() => expensiveCalc(data), [data]);