Performance Optimization Skill Skill

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

Add Missing Indexes - Turn Seq Scan into Index Scan
Fix N+1 Queries - Use JOINs or include instead of loops
Cursor Pagination - Never load all records
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

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

Rendering Optimization

Memoization - memo(), useCallback(), useMemo()
Virtualization - Render only visible items in long lists
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

Field Selection - Return only requested fields
Compression - Enable gzip/brotli (threshold: 1KB)
ETags - Enable 304 responses for unchanged data
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 |

Agent Skills: Performance Optimization Skill

Install this agent skill to your local

Skill Files