Leistungsbudgets

Warum benötige ich ein Leistungsbudget?

Ein Budget existiert, um Ihre erreichbaren Ziele widerzuspiegeln. Es ist ein Kompromiss zwischen Benutzererfahrung und anderen Leistungsindikatoren (z. B. Konversionsrate).

Diese Ziele können sein:

• Zeitbasiert (z. B. Time to Interactive, First Contentful Paint).
• Mengenbasiert (z. B. Anzahl der JS-Dateien/gesamt Bildgröße).
• Regelbasiert (z. B. PageSpeed-Index, Lighthouse-Bewertung).

Ihr Hauptziel ist es, Rückschritte zu verhindern, aber sie können auch Einblicke bieten, um Trends vorherzusagen (d.h. im September wurden 50 % des Budgets in einer Woche ausgegeben).

Darüber hinaus kann es Entwicklungsbedarfe aufdecken (d.h. Eine große Bibliothek mit kleineren Alternativen wird oft gewählt, um ein häufiges Problem zu lösen).

Wie definiere ich ein Leistungsbudget?

Ein Budget sollte 2 Ebenen beinhalten:

• Warnung.
• Fehler.

Das Warnniveau ermöglicht es Ihnen, proaktiv zu sein und technische Schulden zu planen, ohne die Entwicklung oder Bereitstellung zu blockieren.

Das Fehlniveau ist ein oberes Grenzlimit, bei dem Änderungen negative und merkbare Auswirkungen haben werden.

Der erste Schritt ist, die Geräte und Verbindungsgeschwindigkeiten zu messen, von denen Ihre Nutzer kommen (z. B. Ein ~$200 Android-Gerät über eine 3G-Verbindung), indem Sie mehrere Tools verwenden. Diese zeitbasierten Metriken werden in Dateigrößenbudgets übersetzt.

Ein standardmäßiger Basiswert zur Reduzierung der Absprungrate besteht darin, die Time to Interactive unter 5 Sekunden bei 3G/4G und unter 2 Sekunden für nachfolgende Ladevorgänge zu erreichen. Je nach den spezifischen Zielen und dem Inhalt Ihrer Website können Sie sich jedoch auf andere Metriken konzentrieren.

Für eine textlastige Seite wie einen Blog oder eine Nachrichten-Website könnte die First Contentful Paint Metrik das Nutzerverhalten genauer widerspiegeln. (d.h. wie schnell können Nutzer mit dem Lesen beginnen), was über spezifische Dateibudgets (z. B. Schriftgröße) und deren Optimierungen informiert. (z. B. die Verwendung von font-display, um die Empfundene Leistung zu verbessern).

Der ultimative Wert eines Leistungsbudgets liegt darin, die Auswirkungen der Leistung auf Geschäfts- oder Produktziele zu korrelieren. Bei der Definition von Metriken sollten Sie sich auf die User Experience konzentrieren, die nicht nur die Absprungs- oder Konversionsrate bestimmt, sondern auch, wie wahrscheinlich es ist, dass der Nutzer zurückkehrt.

Wie implementiere ich ein Leistungsbudget?

Während der Entwicklung gibt es einige Tools, um neue oder geänderte Assets zu überprüfen:

• Ein Modul-Bundler (z. B. webpack), hat Leistungsfunktionen, die Sie benachrichtigen, wenn Assets die festgelegten Limits überschreiten.
• Bundlesize ermöglicht es Ihnen, Dateigrößenprüfungen in Ihrer kontinuierlichen Integration (CI) Pipeline zu definieren und auszuführen.

Dateigrößenprüfungen sind die erste Verteidigungslinie gegen Rückschritte, aber die Übersetzung von Größe zurück in Zeitmetriken kann schwierig sein, da Entwicklungsumgebungen möglicherweise Drittanbieter-Skripte und Optimierungen, die normalerweise von einem CDN bereitgestellt werden, fehlen.

Der erste Schritt besteht darin, eine Entwicklungsgrundlinie für jeden Branch zu definieren, mit der verglichen werden kann, und die Präzision des Unterschieds zwischen Entwicklung und Produktion kann als Ziel verwendet werden, um die Live-Umgebung besser abzugleichen.

Der Lighthouse Bot integriert sich mit Travis CI und kann verwendet werden, um Lighthouse und Webpage Test Metriken von einer Entwicklungs-URL zu sammeln. Der Bot wird basierend auf den bereitgestellten Mindestbewertungen bestehen oder fehlschlagen.

Wie erzwinge ich ein Leistungsbudget?

Je eher Sie eine potenzielle Ergänzung identifizieren können, die das Budget überschreitet, desto besser können Sie den aktuellen Zustand Ihrer Website analysieren und Optimierungen oder unnötigen Code identifizieren.

Sie sollten jedoch mehrere Budgets haben und dynamisch sein. Sie sollen Ihre laufenden Ziele widerspiegeln, aber Risiken und Experimente zulassen. Beispielsweise könnten Sie eine Funktion einführen, die die Gesamt-Ladezeit erhöht, aber versucht, die Benutzerbindung zu erhöhen. (d.h. wie lange ein Benutzer auf einer Seite oder Website bleibt).

Ein Leistungsbudget hilft Ihnen, ein optimales Verhalten für Ihre aktuellen Nutzer zu schützen und gleichzeitig neue Märkte zu erschließen und maßgeschneiderte Erlebnisse zu liefern.

Siehe auch

• Start Performance Budgeting von Addy Osmani
• Performance Budgets 101 von Milica Mihajlija
• Performance Budgets That Stick von Tim Kadlec