aiskillstore/performance-optimization

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)

| Metric | Good | Needs Work | |--------|------|------------| | LCP (Largest Contentful Paint) | < 2.5s | < 4s | | INP (Interaction to Next Paint) | < 200ms | < 500ms | | CLS (Cumulative Layout Shift) | < 0.1 | < 0.25 | | TTFB (Time to First Byte) | < 200ms | < 600ms |

Backend Targets

| Operation | Target | |-----------|--------| | Simple reads | < 100ms | | Complex queries | < 500ms | | Write operations | < 200ms | | Index lookups | < 10ms |

Bottleneck Categories

| Category | Symptoms | Tools | |----------|----------|-------| | Network | High TTFB, slow loading | Network tab, WebPageTest | | Database | Slow queries, pool exhaustion | EXPLAIN ANALYZE, pg_stat_statements | | CPU | High usage, slow compute | Profiler, flame graphs | | Memory | Leaks, GC pauses | Heap snapshots | | Rendering | Layout thrashing | React DevTools, Performance tab |

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

| Template | Purpose | |----------|---------| | database-optimization.ts | N+1 fixes, pagination, pooling | | caching-patterns.ts | Redis cache-aside, memoization | | frontend-optimization.tsx | React memo, virtualization, code splitting | | api-optimization.ts | Compression, ETags, field selection | | performance-metrics.ts | Prometheus metrics, performance budget |