gh-dhofheinz-open-plugins-plugins-10x-fullstack-engineer/commands/optimize/analyze.md

# Performance Analysis Operation

You are executing the **analyze** operation to perform comprehensive performance analysis and identify bottlenecks across all application layers.

## Parameters

**Received**: `$ARGUMENTS` (after removing 'analyze' operation name)

Expected format: `target:"area" [scope:"frontend|backend|database|infrastructure|all"] [metrics:"baseline|compare"] [baseline:"version-or-timestamp"]`

**Parameter definitions**:
- `target` (required): Application or component to analyze (e.g., "user dashboard", "checkout flow", "production app")
- `scope` (optional): Layer to focus on - `frontend`, `backend`, `database`, `infrastructure`, or `all` (default: `all`)
- `metrics` (optional): Metrics mode - `baseline` (establish baseline), `compare` (compare against baseline) (default: `baseline`)
- `baseline` (optional): Baseline version or timestamp for comparison (e.g., "v1.2.0", "2025-10-01")

## Workflow

### 1. Define Analysis Scope

Based on the `target` and `scope` parameters, determine what to analyze:

**Scope: all** (comprehensive analysis):
- Frontend: Page load, rendering, bundle size
- Backend: API response times, throughput, error rates
- Database: Query performance, connection pools, cache hit rates
- Infrastructure: Resource utilization, scaling efficiency

**Scope: frontend**:
- Web Vitals (LCP, FID, CLS, INP, TTFB, FCP)
- Bundle sizes and composition
- Network waterfall analysis
- Runtime performance (memory, CPU)

**Scope: backend**:
- API endpoint response times (p50, p95, p99)
- Throughput and concurrency handling
- Error rates and types
- Dependency latency (database, external APIs)

**Scope: database**:
- Query execution times
- Index effectiveness
- Connection pool utilization
- Cache hit rates

**Scope: infrastructure**:
- CPU, memory, disk, network utilization
- Container/instance metrics
- Auto-scaling behavior
- CDN effectiveness

### 2. Establish Baseline Metrics

Run comprehensive performance profiling:

**Frontend Profiling**:
```bash
# Lighthouse audit
npx lighthouse [url] --output=json --output-path=./perf-baseline-lighthouse.json

# Bundle analysis
npm run build -- --stats
npx webpack-bundle-analyzer dist/stats.json --mode static --report ./perf-baseline-bundle.html

# Check for unused dependencies
npx depcheck > ./perf-baseline-deps.txt

# Runtime profiling (if applicable)
# Use browser DevTools Performance tab
```

**Backend Profiling**:
```bash
# API response times (if monitoring exists)
# Check APM dashboard or logs

# Profile Node.js application
node --prof app.js
# Then process the profile
node --prof-process isolate-*.log > perf-baseline-profile.txt

# Memory snapshot
node --inspect app.js
# Take heap snapshot via Chrome DevTools

# Load test to get baseline throughput
npx k6 run --duration 60s --vus 50 load-test.js
```

**Database Profiling**:
```sql
-- PostgreSQL: Enable pg_stat_statements
CREATE EXTENSION IF NOT EXISTS pg_stat_statements;

-- Capture slow queries
SELECT
  query,
  calls,
  total_exec_time,
  mean_exec_time,
  max_exec_time,
  stddev_exec_time
FROM pg_stat_statements
ORDER BY mean_exec_time DESC
LIMIT 50;

-- Check index usage
SELECT
  schemaname,
  tablename,
  indexname,
  idx_scan,
  idx_tup_read,
  idx_tup_fetch
FROM pg_stat_user_indexes
ORDER BY idx_scan ASC;

-- Table statistics
SELECT
  schemaname,
  tablename,
  n_live_tup,
  n_dead_tup,
  last_vacuum,
  last_autovacuum
FROM pg_stat_user_tables;
```

**Infrastructure Profiling**:
```bash
# Container metrics (if using Docker/Kubernetes)
docker stats --no-stream

# Or for Kubernetes
kubectl top nodes
kubectl top pods

# Server resource utilization
top -b -n 1 | head -20
free -h
df -h
iostat -x 1 5
```

### 3. Identify Bottlenecks

Analyze collected metrics to identify performance bottlenecks:

**Bottleneck Detection Matrix**:

| Layer | Indicator | Severity | Common Causes |
|-------|-----------|----------|---------------|
| **Frontend** | LCP > 2.5s | High | Large images, render-blocking resources, slow TTFB |
| **Frontend** | Bundle > 1MB | Medium | Unused dependencies, no code splitting, large libraries |
| **Frontend** | CLS > 0.1 | Medium | Missing dimensions, dynamic content injection |
| **Frontend** | INP > 200ms | High | Long tasks, unoptimized event handlers |
| **Backend** | p95 > 1000ms | High | Slow queries, N+1 problems, synchronous I/O |
| **Backend** | p99 > 5000ms | Critical | Database locks, resource exhaustion, cascading failures |
| **Backend** | Error rate > 1% | High | Unhandled errors, timeout issues, dependency failures |
| **Database** | Query > 500ms | High | Missing indexes, full table scans, complex joins |
| **Database** | Cache hit < 80% | Medium | Insufficient cache size, poor cache strategy |
| **Database** | Connection pool exhaustion | Critical | Connection leaks, insufficient pool size |
| **Infrastructure** | CPU > 80% | High | Insufficient resources, inefficient algorithms |
| **Infrastructure** | Memory > 90% | Critical | Memory leaks, oversized caches, insufficient resources |

**Prioritization Framework**:

1. **Critical** - Immediate impact on user experience or system stability
2. **High** - Significant performance degradation
3. **Medium** - Noticeable but not blocking
4. **Low** - Minor optimization opportunity

### 4. Create Optimization Opportunity Matrix

For each identified bottleneck, assess:

**Impact Assessment**:
- Performance improvement potential (low/medium/high)
- Implementation effort (hours/days)
- Risk level (low/medium/high)
- Dependencies on other optimizations

**Optimization Opportunities**:

```markdown
## Opportunity Matrix

| ID | Layer | Issue | Impact | Effort | Priority | Recommendation |
|----|-------|-------|--------|--------|----------|----------------|
| 1 | Database | Missing index on users.email | High | 1h | Critical | Add index immediately |
| 2 | Frontend | Bundle size 2.5MB | High | 4h | High | Implement code splitting |
| 3 | Backend | N+1 query in /api/users | High | 2h | High | Add eager loading |
| 4 | Infrastructure | No CDN for static assets | Medium | 3h | Medium | Configure CloudFront |
| 5 | Frontend | Unoptimized images | Medium | 2h | Medium | Add next/image or similar |
```

### 5. Generate Performance Profile

Create a comprehensive performance profile:

**Performance Snapshot**:
```json
{
  "timestamp": "2025-10-14T12:00:00Z",
  "version": "v1.2.3",
  "environment": "production",
  "metrics": {
    "frontend": {
      "lcp": 3200,
      "fid": 150,
      "cls": 0.15,
      "ttfb": 800,
      "bundle_size": 2500000
    },
    "backend": {
      "p50_response_time": 120,
      "p95_response_time": 850,
      "p99_response_time": 2100,
      "throughput_rps": 450,
      "error_rate": 0.02
    },
    "database": {
      "avg_query_time": 45,
      "slow_query_count": 23,
      "cache_hit_rate": 0.72,
      "connection_pool_utilization": 0.85
    },
    "infrastructure": {
      "cpu_utilization": 0.68,
      "memory_utilization": 0.75,
      "disk_io_wait": 0.03
    }
  },
  "bottlenecks": [
    {
      "id": "BTL001",
      "layer": "frontend",
      "severity": "high",
      "issue": "Large LCP time",
      "metric": "lcp",
      "value": 3200,
      "threshold": 2500,
      "impact": "Poor user experience on initial page load"
    }
  ]
}
```

### 6. Recommend Next Steps

Based on analysis results, recommend:

**Immediate Actions** (Critical bottlenecks):
- List specific optimizations with highest ROI
- Estimated improvement for each
- Implementation order

**Short-term Actions** (High priority):
- Optimizations to tackle in current sprint
- Potential dependencies

**Long-term Actions** (Medium/Low priority):
- Architectural improvements
- Infrastructure upgrades
- Technical debt reduction

## Output Format

```markdown
# Performance Analysis Report: [Target]

**Analysis Date**: [Date and time]
**Analyzed Version**: [Version or commit]
**Environment**: [production/staging/development]
**Scope**: [all/frontend/backend/database/infrastructure]

## Executive Summary

[2-3 paragraph summary of overall findings, critical issues, and recommended priorities]

## Baseline Metrics

### Frontend Performance
| Metric | Value | Status | Threshold |
|--------|-------|--------|-----------|
| LCP (Largest Contentful Paint) | 3.2s | ⚠️ Needs Improvement | < 2.5s |
| FID (First Input Delay) | 150ms | ✅ Good | < 100ms |
| CLS (Cumulative Layout Shift) | 0.15 | ⚠️ Needs Improvement | < 0.1 |
| TTFB (Time to First Byte) | 800ms | ⚠️ Needs Improvement | < 600ms |
| Bundle Size (gzipped) | 2.5MB | ❌ Poor | < 500KB |

### Backend Performance
| Metric | Value | Status | Threshold |
|--------|-------|--------|-----------|
| P50 Response Time | 120ms | ✅ Good | < 200ms |
| P95 Response Time | 850ms | ⚠️ Needs Improvement | < 500ms |
| P99 Response Time | 2100ms | ❌ Poor | < 1000ms |
| Throughput | 450 req/s | ✅ Good | > 400 req/s |
| Error Rate | 2% | ⚠️ Needs Improvement | < 1% |

### Database Performance
| Metric | Value | Status | Threshold |
|--------|-------|--------|-----------|
| Avg Query Time | 45ms | ✅ Good | < 100ms |
| Slow Query Count (>500ms) | 23 queries | ❌ Poor | 0 queries |
| Cache Hit Rate | 72% | ⚠️ Needs Improvement | > 85% |
| Connection Pool Utilization | 85% | ⚠️ Needs Improvement | < 75% |

### Infrastructure Performance
| Metric | Value | Status | Threshold |
|--------|-------|--------|-----------|
| CPU Utilization | 68% | ✅ Good | < 75% |
| Memory Utilization | 75% | ⚠️ Needs Improvement | < 70% |
| Disk I/O Wait | 3% | ✅ Good | < 5% |

## Bottlenecks Identified

### Critical Priority

#### BTL001: Frontend - Large LCP Time (3.2s)
**Impact**: High - Users experience slow initial page load
**Cause**:
- Large hero image (1.2MB) loaded synchronously
- Render-blocking CSS and JavaScript
- No image optimization

**Recommendation**:
1. Optimize and lazy-load hero image (reduce to <200KB)
2. Defer non-critical CSS/JS
3. Implement resource hints (preload critical assets)
**Expected Improvement**: LCP reduction to ~1.8s (44% improvement)

#### BTL002: Database - Missing Index on users.email
**Impact**: High - Slow user lookup queries affecting multiple endpoints
**Queries Affected**:
```sql
SELECT * FROM users WHERE email = $1;  -- 450ms avg
```
**Recommendation**:
```sql
CREATE INDEX CONCURRENTLY idx_users_email ON users(email);
```
**Expected Improvement**: Query time reduction to <10ms (95% improvement)

### High Priority

#### BTL003: Backend - N+1 Query Problem in /api/users Endpoint
**Impact**: High - p95 response time of 850ms
**Cause**:
```javascript
// Current (N+1 problem)
const users = await User.findAll();
for (const user of users) {
  user.posts = await Post.findAll({ where: { userId: user.id } });
}
```
**Recommendation**:
```javascript
// Optimized (eager loading)
const users = await User.findAll({
  include: [{ model: Post, as: 'posts' }]
});
```
**Expected Improvement**: Response time reduction to ~200ms (75% improvement)

#### BTL004: Frontend - Bundle Size 2.5MB
**Impact**: High - Slow initial load especially on mobile
**Cause**:
- No code splitting
- Unused dependencies (moment.js, lodash full import)
- No tree shaking

**Recommendation**:
1. Implement code splitting by route
2. Replace moment.js with date-fns (92% smaller)
3. Use tree-shakeable imports
```javascript
// Before
import _ from 'lodash';
import moment from 'moment';

// After
import { debounce, throttle } from 'lodash-es';
import { format, parseISO } from 'date-fns';
```
**Expected Improvement**: Bundle reduction to ~800KB (68% improvement)

### Medium Priority

[Additional bottlenecks with similar format]

## Optimization Opportunity Matrix

| ID | Layer | Issue | Impact | Effort | Priority | Est. Improvement |
|----|-------|-------|--------|--------|----------|------------------|
| BTL001 | Frontend | Large LCP | High | 4h | Critical | 44% LCP reduction |
| BTL002 | Database | Missing index | High | 1h | Critical | 95% query speedup |
| BTL003 | Backend | N+1 queries | High | 2h | High | 75% response time reduction |
| BTL004 | Frontend | Bundle size | High | 6h | High | 68% bundle reduction |
| BTL005 | Infrastructure | No CDN | Medium | 3h | Medium | 30% TTFB reduction |
| BTL006 | Database | Low cache hit | Medium | 4h | Medium | 15% query improvement |

## Profiling Data

### Frontend Profiling Results
[Include relevant Lighthouse report summary, bundle analysis, etc.]

### Backend Profiling Results
[Include relevant API response time distribution, slow endpoint list, etc.]

### Database Profiling Results
[Include slow query details, table scan frequency, etc.]

### Infrastructure Profiling Results
[Include resource utilization charts, scaling behavior, etc.]

## Recommended Action Plan

### Phase 1: Critical Fixes (Immediate - 1-2 days)
1. **Add missing database indexes** (BTL002) - 1 hour
   - Estimated improvement: 95% reduction in user lookup queries
2. **Optimize hero image and implement lazy loading** (BTL001) - 4 hours
   - Estimated improvement: 44% LCP reduction

### Phase 2: High-Priority Optimizations (This week - 3-5 days)
1. **Fix N+1 query problems** (BTL003) - 2 hours
   - Estimated improvement: 75% response time reduction on affected endpoints
2. **Implement bundle optimization** (BTL004) - 6 hours
   - Estimated improvement: 68% bundle size reduction

### Phase 3: Infrastructure Improvements (Next sprint - 1-2 weeks)
1. **Configure CDN for static assets** (BTL005) - 3 hours
   - Estimated improvement: 30% TTFB reduction
2. **Optimize database caching strategy** (BTL006) - 4 hours
   - Estimated improvement: 15% overall query performance

## Expected Overall Impact

If all critical and high-priority optimizations are implemented:

| Metric | Current | Expected | Improvement |
|--------|---------|----------|-------------|
| LCP | 3.2s | 1.5s | 53% faster |
| Bundle Size | 2.5MB | 650KB | 74% smaller |
| P95 Response Time | 850ms | 250ms | 71% faster |
| User Lookup Query | 450ms | 8ms | 98% faster |
| Overall Performance Score | 62/100 | 88/100 | +26 points |

## Monitoring Recommendations

After implementing optimizations, monitor these key metrics:

**Frontend**:
- Real User Monitoring (RUM) for Web Vitals
- Bundle size in CI/CD pipeline
- Lighthouse CI for regression detection

**Backend**:
- APM for endpoint response times
- Error rate monitoring
- Database query performance

**Database**:
- Slow query log monitoring
- Index hit rate
- Connection pool metrics

**Infrastructure**:
- Resource utilization alerts
- Auto-scaling triggers
- CDN cache hit rates

## Testing Instructions

### Before Optimization
1. Run Lighthouse audit: `npx lighthouse [url] --output=json --output-path=baseline.json`
2. Capture API metrics: [specify how]
3. Profile database: [SQL queries above]
4. Save baseline for comparison

### After Optimization
1. Repeat all baseline measurements
2. Compare metrics using provided scripts
3. Verify no functionality regressions
4. Monitor for 24-48 hours in production

## Next Steps

1. Review and prioritize optimizations with team
2. Create tasks for Phase 1 critical fixes
3. Implement optimizations using `/optimize [layer]` operations
4. Benchmark improvements using `/optimize benchmark`
5. Document lessons learned and update performance budget