performance-optimizer

Performance Optimizer

Overview

Provides a systematic approach to application performance optimization across the full stack. Use when diagnosing slow page loads, high API latency, database bottlenecks, or scaling issues. Not a substitute for application-specific profiling -- always measure before optimizing.

Quick Reference

Performance Budgets

Metric	Target	Category
Largest Contentful Paint (LCP)	< 2.5s	Core Web Vital
Interaction to Next Paint (INP)	< 200ms	Core Web Vital
Cumulative Layout Shift (CLS)	< 0.1	Core Web Vital
First Contentful Paint (FCP)	< 1.8s	Frontend
Time to Interactive (TTI)	< 3.8s	Frontend
Total Blocking Time (TBT)	< 200ms	Frontend
API Response Time (P95)	< 500ms	Backend
Database Query Time (P95)	< 100ms	Database
Server Response Time (TTFB)	< 600ms	Backend

Optimization Phases

Phase	Focus	Key Action
1. Profiling	Identify real bottlenecks	Chrome DevTools, React Profiler, EXPLAIN ANALYZE
2. Database	Eliminate slow queries	Strategic indexes, fix N+1, connection pooling
3. Caching	Reduce redundant work	Redis, HTTP headers, CDN for static assets
4. Frontend	Reduce bundle and render time	Bundle analysis, code splitting, resource hints, lazy loading
5. Backend	Speed up API responses	Serverless optimization, streaming, conditional requests, queues
6. Monitoring	Sustain performance	APM tools, alerting thresholds, dashboards

Caching Layers

Layer	Scope	Duration
Browser Cache	HTTP headers	Static assets: 1 year (immutable); HTML: no-cache
CDN	Cloudflare, CloudFront	Same as browser, purge on deploy
Application	Redis, Memcached	Varies (e.g., 1 hour for user data)
Database	Query cache	Automatic

Common Mistakes

Mistake	Correct Pattern
Optimizing before profiling	Measure first with Chrome DevTools, EXPLAIN ANALYZE, or APM tools to find real bottlenecks
Adding indexes on every column	Use strategic indexes on columns in WHERE, ORDER BY, and JOIN clauses; monitor with slow query log
SELECT * on large tables	Select only needed columns to reduce I/O and memory
N+1 queries in loops	Eager loading or DataLoader batching
Functions in WHERE clause	Store normalized values, use generated columns to preserve index usage
Caching without an invalidation strategy	Define TTL and invalidate-on-write policies; stale cache is worse than no cache
Loading entire libraries for a single utility	Use direct imports and tree-shaking
Running heavy computations synchronously in request handlers	Offload to background job queues (BullMQ) and return immediately

Delegation

When working on performance optimization, delegate to:

• frontend-builder -- React-specific performance patterns
• application-security -- Rate limiting and DDoS protection
• ci-cd-architecture -- Build pipeline optimization

References

• Profiling and Measurement -- Chrome DevTools, React Profiler, Node.js/Python profiling, database EXPLAIN
• Database Optimization -- Strategic indexes, N+1 fixes, query optimization, connection pooling
• Caching Strategies -- Redis patterns, HTTP cache headers, CDN configuration
• Frontend Performance -- Bundle analysis, code splitting, resource hints, third-party scripts, mobile performance, React patterns
• Backend Performance -- Serverless optimization, streaming responses, conditional requests, background queues, rate limiting
• Monitoring and Alerting -- APM tools, custom monitoring, dashboards, alert thresholds