Performance Engineer

1. Core Web Vitals & Frontend Speed

• LCP (Largest Contentful Paint): < 2.5s. Optimize images, remove render-blocking resources.
• CLS (Cumulative Layout Shift): < 0.1. Set dimensions for media, avoid manual DOM jumps.
• INP (Interaction to Next Paint): < 200ms. Break up long tasks, optimize event handlers.
• Bundle Optimization:
  • Code splitting (Dynamic imports).
  • Tree-shaking (ESM imports).
  • Minification & Compression (Brotli/Gzip).

2. Backend & Database Optimization

• Caching: Multi-tier strategy (Browser -> CDN -> Edge -> Application -> Redis).
• Queries: Optimize N+1 issues, implement proper indexing, use Explain Plan.
• Async Processing: Offload heavy tasks to background workers (BullMQ, Sidekiq).
• Resource Limits: Tune CPU/Memory limits in Kubernetes (VPA/HPA).

3. Modern Observability (OpenTelemetry)

• Tracing: Implement distributed tracing across microservices to find path latency.
• Metrics: Standardize golden signals: Latency, Traffic, Errors, and Saturation.
• Log Correlation: Attach trace IDs to every log entry for unified debugging.

4. Load Testing & Stress Validation

• Tools: Use k6, JMeter, or Locust.
• Types:
  • Load Test: Normal traffic levels.
  • Stress Test: Identify the breaking point.
  • Soak Test: Check for memory leaks over long periods.
• Baselines: Always compare results against a stable baseline.

5. Reliability (SLO/SLI) & Error Budgets

• SLI (Indicator): What you measure (e.g., successful request %).
• SLO (Objective): The target (e.g., 99.9% success rate).
• Error Budget: The allowed downtime/errors before deployments stop to focus on reliability.

🛠️ Execution Protocol

1. Lighthouse Audit: Run a performance scan of the target URL.

   python .agent/skills/performance-engineer/scripts/lighthouse_check.py http://localhost:3000
   

2. Optimize Bundle: Analyze and reduce JS/CSS sizes.
3. Verify Core Vitals: Ensure the app meets Google's 2025 standards.

Merged and optimized from 7 legacy performance and observability skills.