Performance-Budget: Definition, Beispiele, CI-Integration

Was ist ein Performance-Budget?

Ein Performance-Budget ist ein Set von expliziten Limits auf Web-Performance-Metrics. Bundle-Sizes, Page-Weight, Core Web Vitals (LCP, INP, CLS), Request-Counts, Third-party-Script-Weight, zu denen sich das Team commitet. Enforced in CI failed das Budget Builds, die Limits überschreiten, und verhindert Performance-Regressions vom Shippen.

Ohne Budget ist Perf-Rot invisible. Ein Budget macht den Cost sichtbar.

Kategorien von Performance-Budgets

Beispiel Performance-Budget

[
  {
    "path": "/*",
    "timings": [{ "metric": "interactive", "budget": 3000 }],
    "resourceSizes": [
      { "resourceType": "script", "budget": 200 },
      { "resourceType": "image", "budget": 500 },
      { "resourceType": "total", "budget": 1500 }
    ]
  }
]

Empfohlene Baselines

Tools zum Enforcing

Wo starten

1. Current Performance auditen
2. Budget at Current Baseline setzen
3. Lighthouse CI hinzufügen
4. PRs failen die Budget exceeden
5. Iterieren: Budget tightnen

Performance-Budget Best Practices

• Mit current Performance starten.
• Budget per Page-Type.
• Loud failen in CI.
• Trends tracken.
• Auf langsamen Devices testen.
• Third-party-Impact separat tracken.
• Owner per Metric.
• Visible in Dashboard.

Häufige Fallstricke

• Aspirational Budgets.
• Kein Follow-up auf Regressions.
• Per-PR-Varianz.
• Lab-only Testing.
• Third-party vergessen.
• Page-Level only.
• Kein Budget für neue Pages.

Performance-Budget vs SLI/SLO

FAQ: Performance-Budget

Was ist ein gutes Starter-Budget?

LCP < 2.5s, JS < 200KB gzipped, Lighthouse Perf ≥ 90.

Wie unterscheidet sich das von Core Web Vitals?

CWV sind die Metrics. Performance-Budget = das Commitment des Teams.

Kann ich per Page budgeten?

Ja. Lighthouse CI supportet per-URL Budgets.

Sollte ich auf Lab oder Field-Data budgeten?

Beide.

Was wenn PR Budget exceedet aber for good reason?

Bewusst Budget raisen oder optimieren.

Wie oft sollte ich Budgets reviewen?

Quartalsweise.

Brauchen SPAs verschiedene Budgets?

Ja, bigger JS-Bundles allowed, aber TTI/INP kritisch.

Enforce Performance-Budget mit LoadFocus

LoadFocus läuft Lighthouse-Audits aus 25+ Regionen on Schedule. Registrieren bei loadfocus.com/signup.