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:

# 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:

# 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:

-- 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:

# 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:

## 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:

{
  "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

# 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:

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:

// Current (N+1 problem)
const users = await User.findAll();
for (const user of users) {
  user.posts = await Post.findAll({ where: { userId: user.id } });
}

Recommendation:

// 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

// 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