Benchmark — Leistungsbaseline & Regressionserkennung
Wann verwenden
- Vor und nach einem PR, um die Auswirkungen auf die Leistung zu messen
- Einrichten von Leistungsbaselines für ein Projekt
- Wenn Benutzer berichten: "Es fühlt sich langsam an"
- Vor einem Launch — sicherstellen, dass Leistungsziele erreicht werden
- Vergleichen des eigenen Stacks mit Alternativen
So funktioniert es
Modus 1: Seitenleistung
Misst echte Browser-Metriken über Browser MCP:
1. Navigiere zu jeder Ziel-URL
2. Miss Core Web Vitals:
- LCP (Largest Contentful Paint) — Ziel < 2,5s
- CLS (Cumulative Layout Shift) — Ziel < 0,1
- INP (Interaction to Next Paint) — Ziel < 200ms
- FCP (First Contentful Paint) — Ziel < 1,8s
- TTFB (Time to First Byte) — Ziel < 800ms
3. Miss Ressourcengrößen:
- Gesamtseitengewicht (Ziel < 1MB)
- JS-Bundle-Größe (Ziel < 200KB gzippt)
- CSS-Größe
- Bildgewicht
- Drittanbieter-Skriptgewicht
4. Zähle Netzwerkanfragen
5. Prüfe auf render-blockierende Ressourcen
Modus 2: API-Leistung
Benchmarkt API-Endpunkte:
1. Rufe jeden Endpunkt 100 Mal auf
2. Miss: p50, p95, p99 Latenz
3. Erfasse: Antwortgröße, Statuscodes
4. Teste unter Last: 10 gleichzeitige Anfragen
5. Vergleiche mit SLA-Zielen
Modus 3: Build-Leistung
Misst den Entwicklungs-Feedback-Kreislauf:
1. Kalte Build-Zeit
2. Hot-Reload-Zeit (HMR)
3. Dauer der Testsammlung
4. TypeScript-Check-Zeit
5. Lint-Zeit
6. Docker-Build-Zeit
Modus 4: Vorher/Nachher-Vergleich
Führe vor und nach einer Änderung aus, um die Auswirkungen zu messen:
/benchmark baseline # speichert aktuelle Metriken
# ... Änderungen vornehmen ...
/benchmark compare # vergleicht mit der Baseline
Ausgabe:
| Metrik | Vorher | Nachher | Differenz | Bewertung |
|---------|--------|---------|-----------|-----------|
| LCP | 1,2s | 1,4s | +200ms | WARNUNG |
| Bundle | 180KB | 175KB | -5KB | ✓ BESSER |
| Build | 12s | 14s | +2s | WARNUNG |
Ausgabe
Speichert Baselines in .ecc/benchmarks/ als JSON. Git-verfolgt, damit das Team gemeinsame Baselines nutzt.
Integration
- CI:
/benchmark comparebei jedem PR ausführen - Kombinieren mit
/canary-watchfür Überwachung nach dem Deployment - Kombinieren mit
/browser-qafür vollständige Pre-Ship-Checkliste