Performance Optimization

Systematic approach to identifying and fixing performance issues.

Step 1: Establish Baseline

Before optimizing, measure current performance:

Application Metrics

# Node.js
node --prof app.js
# Then analyze: node --prof-process isolate-*.log

# Python
python -m cProfile -o profile.stats app.py
# Visualize: snakeviz profile.stats

# Web
lighthouse https://yoursite.com --output json

Key Metrics to Track

• Response time (p50, p95, p99)
• Throughput (requests/second)
• Memory usage (heap, RSS)
• CPU utilization
• Bundle size (frontend)
• Time to First Byte (TTFB)
• Largest Contentful Paint (LCP)

Step 2: Identify Bottlenecks

Database

• Slow query log analysis
• Missing indexes
• N+1 query problems
• Connection pool sizing
• Query result caching

Network

• Unnecessary API calls
• Large payloads
• Missing compression
• No request batching
• Missing CDN

Memory

• Memory leaks
• Large object allocation
• Missing garbage collection hints
• Inefficient data structures

CPU

• Blocking operations
• Excessive computation
• Missing memoization
• Inefficient algorithms

Step 3: Common Optimizations

Database Queries

// BAD: N+1 queries
const users = await User.findAll();
for (const user of users) {
  user.posts = await Post.findAll({ where: { userId: user.id } });
}

// GOOD: Single query with join
const users = await User.findAll({
  include: [{ model: Post }]
});

-- Add indexes for frequent queries
CREATE INDEX idx_posts_user_id ON posts(user_id);
CREATE INDEX idx_posts_created ON posts(created_at DESC);

Caching

// In-memory cache with TTL
const cache = new Map();

async function getCached<T>(key: string, ttlMs: number, fn: () => Promise<T>): Promise<T> {
  const cached = cache.get(key);
  if (cached && Date.now() < cached.expiry) {
    return cached.value;
  }
  const value = await fn();
  cache.set(key, { value, expiry: Date.now() + ttlMs });
  return value;
}

// Redis cache for distributed systems
await redis.setex(`user:${id}`, 3600, JSON.stringify(user));

Lazy Loading

// Dynamic imports for code splitting
const HeavyComponent = lazy(() => import('./HeavyComponent'));

// Intersection Observer for images
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

Memoization

// React
const MemoizedComponent = React.memo(Component);
const memoizedValue = useMemo(() => expensiveCalc(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a), [a]);

// Generic memoization
function memoize<T extends (...args: any[]) => any>(fn: T): T {
  const cache = new Map();
  return ((...args) => {
    const key = JSON.stringify(args);
    if (!cache.has(key)) cache.set(key, fn(...args));
    return cache.get(key);
  }) as T;
}

Async/Parallel Processing

// BAD: Sequential
const a = await fetchA();
const b = await fetchB();
const c = await fetchC();

// GOOD: Parallel
const [a, b, c] = await Promise.all([
  fetchA(),
  fetchB(),
  fetchC()
]);

Bundle Optimization

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

Compression

// Enable gzip/brotli
app.use(compression());

// Compress images
// Use WebP, AVIF formats
// Implement responsive images
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">
</picture>

Step 4: Algorithm Improvements

Problem	Before	After
Search in array	O(n) linear	O(log n) binary search
Lookup by key	O(n) array scan	O(1) Map/object
Deduplication	O(n²) nested loop	O(n) Set
Sorting	O(n²) bubble	O(n log n) built-in

// BAD: O(n) lookup
const user = users.find(u => u.id === targetId);

// GOOD: O(1) lookup
const userMap = new Map(users.map(u => [u.id, u]));
const user = userMap.get(targetId);

Step 5: Verify Improvements

After each optimization:

1. Re-measure - Same metrics as baseline
2. Compare - Calculate % improvement
3. Test - Ensure functionality unchanged
4. Monitor - Watch production metrics

Output: Optimization Report

# Performance Optimization Report

## Baseline
- Average response time: 450ms
- p95 response time: 1200ms
- Memory usage: 512MB

## Changes Made
1. Added database indexes (+40% query speed)
2. Implemented Redis caching (+60% response time)
3. Fixed N+1 queries (-80% DB calls)

## Results
- Average response time: 120ms (-73%)
- p95 response time: 300ms (-75%)
- Memory usage: 380MB (-26%)

## Remaining Opportunities
1. ...
2. ...