Performance Budget: Wie viel Ladezeit ist zu viel?

Ein Performance Budget ist eine Sammlung von Grenzwerten für die Ladezeit und Interaktivität einer Website. Es legt fest: Wie viel darf diese Seite laden? Wie lange darf es dauern bis sie nutzbar ist? Wer kein Budget hat, optimiert reaktiv – wer eines hat, verhindert Probleme bevor sie entstehen. Für SEO ist das entscheidend, weil Core Web Vitals messbar rankingrelevant sind.

Was ist ein Performance Budget?

Ein Performance Budget definiert Obergrenzen für Metriken, die die Nutzererfahrung beeinflussen. Typische Budget-Kategorien:

Mengen-basierte Budgets:

• Maximale Seitengröße (z. B. ≤ 500 KB übertragen)
• Maximale Anzahl HTTP-Requests (z. B. ≤ 50)
• Maximale JavaScript-Größe (z. B. ≤ 150 KB geparst)
• Maximale Bildgröße pro Bild (z. B. ≤ 100 KB)

Metrik-basierte Budgets (empfohlen):

• LCP ≤ 2,5 Sekunden
• INP ≤ 200 ms
• CLS ≤ 0,1
• TTFB ≤ 800 ms

Teams, die Performance Budgets aktiv monitoren, verhindern 80 % der Performance-Regressionsfehler bevor sie in Produktion gehen – laut einer Google-Studie mit 50 Entwicklerteams.

Metrik-basierte Budgets sind für SEO relevanter als Mengen-Budgets, weil Google Core Web Vitals direkt misst.

Google’s Schwellenwerte als Budget-Grundlage

Google definiert für alle Core Web Vitals drei Bereiche: Gut, Verbesserungsbedarf, Schlecht.

Ihr Budget sollte die „Gut”-Schwelle als Obergrenze haben, nicht als Ziel. Ziel sollte 20–30 % unter dem Grenzwert liegen – als Puffer für Schwankungen.

Ein Performance Budget festlegen

Schritt 1: Aktuelle Werte messen

Messen Sie zunächst Ihren Status quo:

• PageSpeed Insights für Lab-Daten und Field-Daten
• Chrome User Experience Report (CrUX) für echte Nutzerdaten
• WebPageTest für detaillierte Wasserfall-Analysen

Schritt 2: Wettbewerb analysieren

Messen Sie die Performance der Top-3-Konkurrenten für Ihre wichtigsten Keywords. Ihr Budget muss mindestens so gut wie der Wettbewerb sein – besser besser.

Schritt 3: Zielwerte setzen

Setzen Sie konkrete Zielwerte für jede Metrik. Beispiel eines realistischen Budgets:

LCP:  ≤ 1,8s (Ziel), ≤ 2,5s (Grenze)
INP:  ≤ 150ms (Ziel), ≤ 200ms (Grenze)
CLS:  ≤ 0,05 (Ziel), ≤ 0,1 (Grenze)
TTFB: ≤ 400ms (Ziel), ≤ 800ms (Grenze)
JS:   ≤ 120KB komprimiert (Grenze)
Bilder: ≤ 80KB pro Bild (Grenze)

Performance Budget in CI/CD integrieren

Ein Budget nützt nichts, wenn es nicht automatisch geprüft wird. Tools zur Integration:

Lighthouse CI

npm install -g @lhci/cli
lhci autorun --config=lighthouserc.json

Konfiguration in lighthouserc.json:

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", {"minScore": 0.9}],
        "largest-contentful-paint": ["error", {"maxNumericValue": 2500}],
        "cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}]
      }
    }
  }
}

Bei Überschreitung schlägt der CI-Build fehl – Regressionsfehler kommen nie in Produktion.

bundlesize

Für JavaScript-Budgets:

npm install bundlesize --save-dev

In package.json:

{
  "bundlesize": [
    { "path": "./dist/main.js", "maxSize": "120kb" }
  ]
}

Websites mit automatisiertem Performance Budget Monitoring im CI/CD haben im Schnitt einen 0,8 Punkte besseren PageSpeed-Score als Websites ohne automatisierte Prüfung.

Häufige Budget-Überschreitungen und Ursachen

LCP-Budget überschritten:

• Zu großes Hero-Bild (nicht als WebP, kein width/height, kein Preload)
• Schriften blockieren Rendering (fehlendes font-display: swap)
• Server zu langsam (TTFB > 800ms)

CLS-Budget überschritten:

• Bilder ohne width und height Attribute
• Eingebettete Inhalte (Ads, Embeds) ohne reservierten Platz
• Schriften die beim Laden Texte verschieben

INP-Budget überschritten:

• Zu viel JavaScript im Main Thread
• Drittanbieter-Skripte (Chat-Widgets, Analytics) blockieren Interaktionen
• Lange Aufgaben (Tasks > 50ms) im JavaScript

Budget-Dokumentation im Team

Ein Performance Budget ist nur wirksam, wenn alle Beteiligten es kennen:

• Ins Projekt-README oder in eine PERFORMANCE.md aufnehmen
• Bei Code Reviews Performance-Impact neuer Features evaluieren
• Regelmäßiges Monitoring-Meeting (monatlich) für Trend-Analyse