Web-Performance-Budget: Metriken, Limits und CI/CD-Integration

Was ist Performance-Budget?

Performance-Budget sind die maximalen Werte, die für Webseiten-Performance-Metriken definiert werden. Seitengröße, JavaScript Bundle-Größe, LCP-Zeit usw.

Zweck: Performance-Regressionen verhindern. Performance-Abfall beim Hinzufügen neuer Features verhindern.

Budget-Überschreitung: Build-Fail oder Warning. Performance-Check in CI/CD Pipeline.

Beispiel-Budgets: JS Bundle < 200KB, CSS < 50KB, LCP < 2.5s, Gesamtseitengröße < 1MB.

Performance-Metriken

Bundle-Größe: JavaScript und CSS Dateigrößen. Mit Webpack Bundle Analyzer analysieren.

LCP (Largest Contentful Paint): Ladezeit des größten Inhaltelements. Ziel < 2.5s.

CLS (Cumulative Layout Shift): Verschiebungen im Seitenlayout. Ziel < 0.1.

INP (Interaction to Next Paint): Antwortzeit auf Nutzerinteraktion. Ziel < 200ms.

TTFB (Time to First Byte): Server-Antwortzeit. Ziel < 600ms.

Total Page Weight: Gesamtgröße der Seite. Ziel < 1-2MB (für Mobil).

Budget erstellen

Aktuelle Performance messen: Baseline mit Lighthouse, WebPageTest erstellen.

Ziele setzen: Basierend auf Wettbewerbsanalyse und Nutzererwartungen. Strengeres Budget für Mobil.

Budget-Datei: Metriken und Limits mit performance-budget.json definieren.

Schrittweise Verschärfung: Mit Budget nahe der aktuellen Performance beginnen. Mit der Zeit verschärfen.

Team Buy-in: Gesamtes Team sollte Performance-Budget übernehmen. Performance ist Verantwortung aller.

CI/CD Integration

Lighthouse CI: Lighthouse Audit bei jedem PR. Performance Score Threshold prüfen. Build-Fail bei Budget-Überschreitung.

WebPageTest: WebPageTest-Integration in CI/CD Pipeline. Filmstrip und Waterfall Vergleich.

Bundle Size Check: Bundle-Größe mit webpack-bundle-analyzer oder bundlesize prüfen.

GitHub Actions: Automatischer Performance-Test mit Lighthouse CI Action. Ergebnisbericht als PR-Kommentar.

Threshold-Einstellung: Warning und Error Levels. Warning: 90% des Budgets. Error: 100% des Budgets.

Monitoring und Reporting

RUM (Real User Monitoring): Echte Nutzer-Performance-Daten. CrUX, Datadog, New Relic.

Synthetic Monitoring: Periodische Performance-Tests. WebPageTest, Pingdom, GTmetrix.

Dashboard: Performance-Trends visualisieren. Grafana, Datadog Dashboard.

Alerting: Alert bei Budget-Überschreitung. Slack, E-Mail-Benachrichtigung.

Reporting: Wöchentlicher/monatlicher Performance-Bericht. Trend-Analyse und Verbesserungsvorschläge.

Best Practices

Performance Champion: Performance-Verantwortlichen im Team benennen. Performance-Kultur verbreiten.

Budget Review: Budget am Ende jedes Sprints überprüfen. Budget für neue Features anpassen.

Trade-off: Neue Feature vs Performance. Jedes Feature bringt Performance-Kosten. Bewusste Entscheidung treffen.

Dokumentation: Performance-Budget und Begründung dokumentieren. Für Team-Onboarding.

Kontinuierliche Verbesserung: Performance-Budget schrittweise verschärfen. 10% Verbesserungsziel.