Performance-Budgets: Geschwindigkeit in CI/CD durchsetzen

Performance-Budgets: Geschwindigkeitsbegrenzungen für Ihre Website festlegen

Ein Leistungsbudget ist eine Reihe von Grenzen, die Sie für die Ressourcen Ihrer Website festlegen. Es ist wie eine Geschwindigkeitsbegrenzung für Ihren Code. Sie entscheiden, dass Ihr JavaScript-Bundle 200 KB nicht überschreiten darf, Ihre Bilder insgesamt nicht mehr als 1 MB betragen dürfen und Ihre Seite in unter 2 Sekunden laden muss. Diese Grenzen helfen Ihnen, Ihre Website schnell zu halten, während sie wächst.

Warum Sie ein Budget brauchen

Ohne ein Budget verschlechtert sich die Leistung im Laufe der Zeit. Jemand fügt eine neue Bibliothek hinzu, dann eine weitere, dann ein großes Bild, dann ein Drittanbieter-Skript. Jede Ergänzung wirkt für sich genommen klein, aber zusammen verlangsamen sie die Website. Ein Budget erkennt diese Ergänzungen, bevor sie zum Problem werden.

Budgets schaffen auch ein gemeinsames Verständnis dessen, was akzeptabel ist. Wenn ein Entwickler eine neue Bibliothek hinzufügen möchte, kann er prüfen, ob sie in das Budget passt. Wenn nicht, muss er eine kleinere Alternative finden oder etwas anderes optimieren. Dies verhindert das schleichende Anschwellen.

Wofür budgetieren

Beginnen Sie mit den wirkungsvollsten Ressourcen: der Gesamtgröße von JavaScript, der Gesamtgröße von CSS, der Gesamtgröße von Bildern und der Gesamtzahl der Anfragen. Diese wirken sich direkt darauf aus, wie schnell die Seite lädt. Sie können auch für bestimmte Metriken budgetieren: Largest Contentful Paint unter 2,5 Sekunden, First Input Delay unter 100 Millisekunden, Cumulative Layout Shift unter 0,1.

Fortschrittlichere Budgets können die Anzahl der Drittanbieter-Anfragen, die Größe von Webfonts oder die Menge an JavaScript, die beim Seitenladen ausgeführt wird, umfassen. Der Schlüssel ist, das zu messen, was Ihren Benutzern wichtig ist, und entsprechende Grenzen zu setzen.

Das Budget durchsetzen

Ein Budget ist nur nützlich, wenn es durchgesetzt wird. Der beste Weg ist, es in Ihre CI-Pipeline zu integrieren. Wenn jemand einen Pull-Request einreicht, prüft die CI, ob die Änderungen das Budget überschreiten würden. Wenn ja, schlägt der Build fehl. Tools wie Lighthouse CI, bundlesize und die Performance-Hinweise von webpack können dies automatisieren.

Dies schafft eine Feedback-Schleife: Entwickler sehen die Auswirkungen ihrer Änderungen sofort und können vor dem Mergen Anpassungen vornehmen. Mit der Zeit baut dies eine Kultur des Leistungsbewusstseins auf.

Realistische Grenzen setzen

Messen Sie zunächst Ihre aktuelle Leistung. Wo stehen Sie jetzt? Setzen Sie dann ein Ziel, das ambitioniert, aber erreichbar ist. Ein üblicher Ausgangspunkt ist eine Verbesserung um 30%. Sobald Sie das erreicht haben, setzen Sie ein neues Ziel. Das Ziel ist eine schrittweise, nachhaltige Verbesserung, keine einmalige Optimierung.

Für eine typische Inhaltsseite könnte ein vernünftiges Budget wie folgt aussehen: 200 KB JavaScript (komprimiert), 100 KB CSS, 1 MB Bilder und unter 20 Anfragen. Für eine komplexere Webanwendung könnten die Zahlen höher sein. Wichtig ist, das Budget festzulegen, es einzuhalten und regelmäßig zu überprüfen.