1---2name: performance-optimizer3description: Optimize application performance and scalability. Use when investigating slow applications, scaling bottlenecks, or improving response times. Use for profiling, caching, database optimization, frontend performance, and backend tuning.4license: MIT5---6
7# Performance Optimizer
8
9## Overview
10
11Provides 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.
12
13## Quick Reference
14
15### Performance Budgets
16
17| Metric | Target | Category |
18| ------------------------------- | ------- | -------------- |
19| Largest Contentful Paint (LCP) | < 2.5s | Core Web Vital |
20| Interaction to Next Paint (INP) | < 200ms | Core Web Vital |
21| Cumulative Layout Shift (CLS) | < 0.1 | Core Web Vital |
22| First Contentful Paint (FCP) | < 1.8s | Frontend |
23| Time to Interactive (TTI) | < 3.8s | Frontend |
24| Total Blocking Time (TBT) | < 200ms | Frontend |
25| API Response Time (P95) | < 500ms | Backend |
26| Database Query Time (P95) | < 100ms | Database |
27| Server Response Time (TTFB) | < 600ms | Backend |
28
29### Optimization Phases
30
31| Phase | Focus | Key Action |
32| ------------- | ----------------------------- | ---------------------------------------------------------------- |
33| 1. Profiling | Identify real bottlenecks | Chrome DevTools, React Profiler, EXPLAIN ANALYZE |
34| 2. Database | Eliminate slow queries | Strategic indexes, fix N+1, connection pooling |
35| 3. Caching | Reduce redundant work | Redis, HTTP headers, CDN for static assets |
36| 4. Frontend | Reduce bundle and render time | Bundle analysis, code splitting, resource hints, lazy loading |
37| 5. Backend | Speed up API responses | Serverless optimization, streaming, conditional requests, queues |
38| 6. Monitoring | Sustain performance | APM tools, alerting thresholds, dashboards |
39
40### Caching Layers
41
42| Layer | Scope | Duration |
43| ------------- | ---------------------- | ------------------------------------------------- |
44| Browser Cache | HTTP headers | Static assets: 1 year (immutable); HTML: no-cache |
45| CDN | Cloudflare, CloudFront | Same as browser, purge on deploy |
46| Application | Redis, Memcached | Varies (e.g., 1 hour for user data) |
47| Database | Query cache | Automatic |
48
49## Common Mistakes
50
51| Mistake | Correct Pattern |
52| ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
53| Optimizing before profiling | Measure first with Chrome DevTools, EXPLAIN ANALYZE, or APM tools to find real bottlenecks |
54| Adding indexes on every column | Use strategic indexes on columns in WHERE, ORDER BY, and JOIN clauses; monitor with slow query log |
55| SELECT \* on large tables | Select only needed columns to reduce I/O and memory |
56| N+1 queries in loops | Eager loading or DataLoader batching |
57| Functions in WHERE clause | Store normalized values, use generated columns to preserve index usage |
58| Caching without an invalidation strategy | Define TTL and invalidate-on-write policies; stale cache is worse than no cache |
59| Loading entire libraries for a single utility | Use direct imports and tree-shaking |
60| Running heavy computations synchronously in request handlers | Offload to background job queues (BullMQ) and return immediately |
61
62## Delegation
63
64When working on performance optimization, delegate to:
65
66- `frontend-builder` -- React-specific performance patterns
67- `application-security` -- Rate limiting and DDoS protection
68- `ci-cd-architecture` -- Build pipeline optimization
69
70## References
71
72- [Profiling and Measurement](references/profiling.md) -- Chrome DevTools, React Profiler, Node.js/Python profiling, database EXPLAIN
73- [Database Optimization](references/database.md) -- Strategic indexes, N+1 fixes, query optimization, connection pooling
74- [Caching Strategies](references/caching.md) -- Redis patterns, HTTP cache headers, CDN configuration
75- [Frontend Performance](references/frontend.md) -- Bundle analysis, code splitting, resource hints, third-party scripts, mobile performance, React patterns
76- [Backend Performance](references/backend.md) -- Serverless optimization, streaming responses, conditional requests, background queues, rate limiting
77- [Monitoring and Alerting](references/monitoring.md) -- APM tools, custom monitoring, dashboards, alert thresholds
oakoss