Leistungsbudgets

Ein Leistungsbudget ist ein Limit, um Rückschritte zu verhindern. Es kann für eine Datei, einen Dateityp, alle auf einer Seite geladenen Dateien, eine bestimmte Metrik (z. B. Time to Interactive), eine benutzerdefinierte Metrik (z. B. Time to Hero Element) oder ein Schwellenwert über einen bestimmten Zeitraum gelten.

Warum benötige ich ein Leistungsbudget?

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

Diese Ziele können sein:

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

Zusätzlich kann es Entwicklungsbedürfnisse 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 zwei Ebenen umfassen:

  • Warnung.
  • Fehler.

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

Das Fehlerlevel ist eine obere Grenze, bei der Änderungen eine negative und spürbare Auswirkung haben werden.

Um zu beginnen, müssen Sie zunächst die Geräte und Verbindungsgeschwindigkeiten messen, von denen Ihre Benutzer kommen (z.B. Ein ~$200 Android-Gerät über eine 3G-Verbindung), indem Sie mehrere Werkzeuge verwenden. Diese zeitbasierten Metriken werden in Dateigrößenbudgets übersetzt.

Ein Standardbaseline zur Reduzierung der Absprungrate ist es, Time to Interactive unter 5 Sekunden in 3G/4G und unter 2 Sekunden für nachfolgende Ladevorgänge zu erreichen. Basierend auf den spezifischen Zielen und Inhalten Ihrer Seite könnten Sie jedoch entscheiden, sich auf andere Metriken zu konzentrieren.

Für eine textintensive Seite wie einen Blog oder eine Nachrichtenseite könnte die First Contentful Paint Metrik das Benutzerverhalten genauer widerspiegeln (d.h. Wie schnell können Benutzer mit dem Lesen beginnen), was Dateispezifische Budgets (z. B. Schriftgröße) und deren Optimierungen informiert. (z. B. Verwenden von font-display, um die wahrgenommene Leistung zu verbessern).

Der letztendliche 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 Benutzererfahrung konzentrieren, die nicht nur die Absprung- oder Konversionsrate bestimmt, sondern auch, wie wahrscheinlich es ist, dass ein Benutzer zurückkehrt.

Wie implementiere ich ein Leistungsbudget?

Während der Entwicklung gibt es einige Tools, um Überprüfungen gegen neue oder geänderte Assets durchzuführen:

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

Dateigrößenprüfungen sind die erste Verteidigungslinie gegen Rückschritte, aber die Rückübersetzung der Größe in Zeitmetriken kann schwierig sein, da Entwicklungsumgebungen möglicherweise 3rd-Party-Skripte und Optimierungen, die gewöhnlich von einem CDN bereitgestellt werden, fehlen.

Der erste Schritt besteht darin, eine Entwicklungsbaseline für jeden Branch zu definieren, mit der verglichen werden kann. 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 Mindestwerten bestanden oder nicht bestanden.

Wie setze ich ein Leistungsbudget durch?

Je früher Sie eine potenzielle Ergänzung identifizieren können, die das Budget überschreitet, desto besser können Sie den aktuellen Zustand Ihrer Seite 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. Zum Beispiel 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, optimales Verhalten für Ihre aktuellen Benutzer zu schützen, während Sie in neue Märkte vordringen und maßgeschneiderte Erlebnisse liefern können.

Siehe auch