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