Performance Optimization Skill

Comprehensive frameworks for analyzing and optimizing application performance across the entire stack.

When to Use

• Application feels slow or unresponsive
• Database queries taking too long
• Frontend bundle size too large
• API response times exceed targets
• Core Web Vitals need improvement
• Preparing for scale or high traffic

Performance Targets

Core Web Vitals (Frontend)

Backend Targets

Bottleneck Categories

Database Optimization

Key Patterns

1. Add Missing Indexes – Turn Seq Scan into Index Scan
2. Fix N+1 Queries – Use JOINs or include instead of loops
3. Cursor Pagination – Never load all records
4. Connection Pooling – Manage connection lifecycle

Quick Diagnostics

-- Find slow queries (PostgreSQL)
SELECT query, calls, mean_time / 1000 as mean_seconds
FROM pg_stat_statements ORDER BY total_time DESC LIMIT 10;

-- Verify index usage
EXPLAIN ANALYZE SELECT * FROM orders WHERE user_id = 123;

See templates/database-optimization.ts for N+1 fixes and pagination patterns

Caching Strategy

Cache Hierarchy

L1: In-Memory (LRU, memoization) - fastest
L2: Distributed (Redis/Memcached) - shared
L3: CDN (edge, static assets) - global
L4: Database (materialized views) - fallback

Cache-Aside Pattern

const cached = await redis.get(key);
if (cached) return JSON.parse(cached);
const data = await db.query(...);
await redis.setex(key, 3600, JSON.stringify(data));
return data;

See templates/caching-patterns.ts for full implementation

Frontend Optimization

Bundle Optimization

1. Code Splitting – lazy() for route-based splitting
2. Tree Shaking – Import only what you need
3. Image Optimization – WebP/AVIF, lazy loading, proper sizing

Rendering Optimization

1. Memoization – memo(), useCallback(), useMemo()
2. Virtualization – Render only visible items in long lists
3. Batch DOM Operations – Read all, then write all

See templates/frontend-optimization.tsx for patterns

Analysis Commands

# Lighthouse audit
lighthouse http://localhost:3000 --output=json

# Bundle analysis
npx @next/bundle-analyzer  # Next.js
npx vite-bundle-visualizer # Vite

API Optimization

Response Optimization

1. Field Selection – Return only requested fields
2. Compression – Enable gzip/brotli (threshold: 1KB)
3. ETags – Enable 304 responses for unchanged data
4. Pagination – Cursor-based for large datasets

See templates/api-optimization.ts for middleware examples

Monitoring Checklist

Before Launch

• Lighthouse score > 90
• Core Web Vitals pass
• Bundle size within budget
• Database queries profiled
• Compression enabled
• CDN configured

Ongoing

• Performance monitoring active
• Alerting for degradation
• Lighthouse CI in pipeline
• Weekly query analysis
• Real User Monitoring (RUM)

See templates/performance-metrics.ts for Prometheus metrics setup

Extended Thinking Triggers

Use Opus 4.5 extended thinking for:

• Complex debugging – Multiple potential causes
• Architecture decisions – Caching strategy selection
• Trade-off analysis – Memory vs CPU vs latency
• Root cause analysis – Performance regression investigation

Templates Reference