Performance Optimization Workflow
Full performance review and optimization workflow across database, frontend, and infrastructure layers
The Performance Optimization workflow provides a structured approach to analyzing and improving application performance across all layers of your stack, from database queries to frontend rendering.
Overview#
| Property | Value |
|---|---|
| Phases | 4 |
| Tier | Free |
| Typical Duration | 6-10 days |
| Best For | Slow applications, scaling preparation, user experience improvement |
Outcomes#
A successful performance optimization results in:
- Performance regressions identified and resolved
- Hotspots addressed across stack layers
- Baseline metrics captured
- Improvement report documented
Phases#
Phase 1: Analysis (1-2 days)#
Agents: performance-expert
Establish performance baselines and identify bottlenecks across the application.
Tasks:
- Measure current performance metrics (Core Web Vitals)
- Profile server response times
- Identify slow endpoints and queries
- Analyze bundle sizes and load times
- Review caching strategies
- Document baseline metrics
Key Metrics:
┌─────────────────────────────────────────────────────────┐
│ Core Web Vitals │
├──────────────────┬──────────────────┬───────────────────┤
│ LCP │ FID │ CLS │
│ Largest │ First Input │ Cumulative │
│ Contentful Paint │ Delay │ Layout Shift │
│ < 2.5s │ < 100ms │ < 0.1 │
└──────────────────┴──────────────────┴───────────────────┘
Analysis Commands:
Phase 2: Database Optimization (2-3 days)#
Agents: database-expert, performance-expert
Optimize database queries, indexes, and data access patterns.
Tasks:
- Identify slow queries using EXPLAIN ANALYZE
- Add missing indexes for common query patterns
- Optimize N+1 query problems
- Implement query result caching
- Review connection pooling configuration
- Consider read replicas for heavy read workloads
Common Optimizations:
Prisma Optimizations:
Phase 3: Frontend Optimization (2-3 days)#
Agents: frontend-expert, performance-expert
Optimize client-side performance, rendering, and asset delivery.
Tasks:
- Reduce JavaScript bundle size
- Implement code splitting and lazy loading
- Optimize images and media assets
- Improve First Contentful Paint (FCP)
- Reduce Cumulative Layout Shift (CLS)
- Implement proper caching headers
Bundle Optimization:
Image Optimization:
Font Optimization:
Phase 4: Infrastructure Optimization (1-2 days)#
Agents: devops-expert
Optimize server configuration, caching, and content delivery.
Tasks:
- Configure CDN for static assets
- Implement edge caching strategies
- Optimize serverless function cold starts
- Review server-side caching (Redis)
- Configure proper cache headers
- Set up performance monitoring
Caching Strategy:
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Browser │───▶│ CDN │───▶│ Origin │
│ Cache │ │ Cache │ │ Server │
└─────────────┘ └─────────────┘ └─────────────┘
│ │ │
▼ ▼ ▼
Static assets Edge cached Dynamic API
max-age=1y stale-while- responses
revalidate
Cache Headers Example:
Starting the Workflow#
Completion Signals#
Track progress with these checkpoints:
- Baseline captured - Initial metrics documented
- Improvement report documented - Final metrics and improvements recorded
Performance Budget#
Set targets before optimization:
| Metric | Target | Critical |
|---|---|---|
| LCP | < 2.5s | < 4.0s |
| FID | < 100ms | < 300ms |
| CLS | < 0.1 | < 0.25 |
| TTI | < 3.5s | < 7.0s |
| Bundle Size | < 200KB | < 500KB |
| API P95 | < 200ms | < 500ms |
Monitoring Setup#
Tips for Success#
- Measure first - Always establish baselines before optimizing
- Prioritize by impact - Fix the biggest bottlenecks first
- Test in production conditions - Dev performance differs from prod
- Monitor continuously - Performance can regress over time
- Set budgets - Define acceptable limits for your metrics