Die meisten Websites werden nicht langsam geboren — sie werden langsam gemacht. Ein zusätzliches Schriftpaket hier, ein Karussell-Skript da, ein Tracking-Tag, ein hochauflösendes Hintergrundbild: Jede einzelne Entscheidung wirkt harmlos. In Summe wiegt die Seite irgendwann drei Megabyte und braucht acht Sekunden auf dem Handy. Ein Performance-Budget verhindert genau das, indem es vorher eine harte Obergrenze setzt.
In diesem Leitfaden zeigen wir dir, was ein Performance-Budget ist, wie du es berechnest und wie du es im Alltag einhältst. Am Ende kannst du dein eigenes Budget in zwei Minuten mit unserem kostenlosen Performance-Budget-Planer erstellen.
Was ist ein Performance-Budget?
Ein Performance-Budget ist eine selbst gesetzte Obergrenze für messbare Eigenschaften deiner Website — am häufigsten für die übertragene Datenmenge (das „Page Weight"). Statt nach dem Launch festzustellen, dass die Seite zu langsam ist, definierst du vorab: „Meine Startseite darf höchstens 500 KB übertragen." Jede neue Funktion muss sich in dieses Budget einfügen. Passt sie nicht hinein, muss etwas anderes weichen oder optimiert werden.
Das Prinzip ist dasselbe wie bei einem Finanzbudget: Die Grenze macht Kosten sichtbar und erzwingt Prioritäten. Ohne Budget gewinnt immer das nächste „nur dieses eine Skript". Mit Budget wird jede Ergänzung zu einer bewussten Abwägung.
Warum ein Budget über die Rankings entscheidet
Google bewertet die Ladegeschwindigkeit über die Core Web Vitals — und diese fließen als Rankingfaktor in die Suchergebnisse ein. Besonders der LCP (Largest Contentful Paint) hängt direkt am Seitengewicht: Je mehr eine Seite überträgt, desto später erscheint der Hauptinhalt. Ein Performance-Budget ist deshalb keine reine Entwicklerübung, sondern eine SEO-Maßnahme.
Wichtig: Google misst die mobile Performance unter realistischen, eher langsamen Bedingungen. Lighthouse simuliert ein „langsames 4G". Wer sein Budget nur für schnelles WLAN plant, besteht im Labor- und Feldtest nicht. Plane konservativ für die Verbindung deiner schwächsten relevanten Zielgruppe.
Schritt 1: Das Ziel definieren
Beginne nicht mit Kilobyte, sondern mit einem Erlebnis-Ziel. Bewährt ist: Der Hauptinhalt soll in spätestens 2,5 Sekunden sichtbar sein — das ist der „gut"-Schwellenwert für den LCP. Lege außerdem fest, für welche Verbindung du planst.
Schritt 2: Vom Zeitziel zum Größenbudget
Aus Zielzeit und Verbindungsgeschwindigkeit lässt sich ein grobes Größenbudget ableiten. Vereinfacht gilt:
Budget (KB) ≈ (Zielzeit − Latenzpuffer) × Durchsatz (KB/s)
Ein Beispiel: Bei einem Ziel von 2,5 Sekunden, einem Latenzpuffer von rund 0,6 Sekunden und einem langsamen 4G mit etwa 200 KB/s bleibt ein Budget von grob 380 KB übertragener Daten. Das klingt wenig — und genau das ist der Punkt. Unser Performance-Budget-Planer nimmt dir diese Rechnung ab und zeigt das Ergebnis sofort an.
Schritt 3: Das Budget auf Ressourcentypen aufteilen
Ein Gesamtbudget allein hilft im Alltag wenig. Teile es auf die einzelnen Ressourcentypen auf, damit jedes Team-Mitglied weiß, woran es sich halten muss. Eine bewährte Verteilung sieht so aus:
| Ressourcentyp | Anteil | Beispiel bei 380 KB |
|---|---|---|
| HTML | ~7 % | ~27 KB |
| CSS | ~10 % | ~38 KB |
| JavaScript | ~25 % | ~95 KB |
| Bilder | ~48 % | ~182 KB |
| Schriften | ~10 % | ~38 KB |
Diese Anteile sind ein Startpunkt, kein Gesetz. Eine bildlastige Bäckerei-Website darf den Bilderanteil erhöhen, eine textbasierte Dokumentation ihn senken. Wichtig ist, dass die Summe stimmt.
Schritt 4: Ist gegen Soll vergleichen
Miss jetzt, wo deine Seite tatsächlich steht. Öffne die Entwicklertools deines Browsers, gehe in den Netzwerk-Tab, lade die Seite neu und lies die übertragene Größe pro Typ ab. Trage diese Werte in den Planer ein — er zeigt dir per Ampel, welcher Bereich im Budget liegt und welcher gesprengt wird. Erfahrungsgemäß ist JavaScript der häufigste Ausreißer.
Schritt 5: Das Budget einhalten
Wenn ein Bereich über Budget liegt, helfen je nach Typ andere Hebel:
- Bilder: moderne Formate wie WebP oder AVIF, passende Abmessungen und Lazy Loading. Details im Leitfaden Bildoptimierung mit WebP und AVIF.
- JavaScript: ungenutzte Bibliotheken entfernen, Code-Splitting einsetzen, Third-Party-Skripte (Chat, Tracking, Werbung) kritisch hinterfragen.
- Schriften: nur benötigte Schnitte laden, Systemschriften erwägen,
font-display: swapsetzen. - CSS: Critical CSS inline ausliefern und ungenutzte Regeln entfernen — siehe Critical CSS extrahieren.
Wie du die einzelnen Vitals nach dem Diät-Programm konkret verbesserst, beschreibt unser Artikel Core Web Vitals verbessern: LCP, CLS, INP.
Schritt 6: Das Budget am Leben halten
Ein Budget, das niemand prüft, ist nur ein guter Vorsatz. Verankere es im Arbeitsprozess: Lege die Grenzen schriftlich fest, prüfe sie bei jedem größeren Release und definiere, wer entscheidet, wenn eine neue Funktion das Budget sprengen würde. Schon eine simple Regel wie „Neues rein heißt Altes raus oder optimieren" hält die Seite über Jahre schlank.
Häufige Fehler beim Performance-Budget
- Nur für schnelles WLAN statt für mobile Realität planen
- Das Budget einmal festlegen und nie wieder messen
- Third-Party-Skripte ausklammern, obwohl sie oft den größten Brocken ausmachen
- Nur das Gesamtgewicht betrachten, ohne es auf Typen aufzuteilen
- Bilder in voller Auflösung ausliefern und per CSS verkleinern
Fazit
Ein Performance-Budget verwandelt Geschwindigkeit von einem vagen Wunsch in eine planbare Vorgabe. Du definierst ein Zeitziel, leitest daraus ein Größenbudget ab, teilst es auf die Ressourcentypen auf und prüfst regelmäßig, ob du es einhältst. Das Ergebnis ist eine Website, die auch auf dem Handy schnell lädt, die Core Web Vitals besteht und damit bessere Chancen in Google hat.
Erstelle dein eigenes Budget jetzt kostenlos mit dem Performance-Budget-Planer. Und wenn du wissen willst, wie deine Website insgesamt für Suchmaschinen aufgestellt ist, mach den kostenlosen SEO-Check mit Shift07.