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 patternsapplication-security-- Rate limiting and DDoS protectionci-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