Performance-Budgets

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

Warum benötige ich ein Performance-Budget?

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, aber sie können auch Einblicke bieten, um Trends zu prognostizieren (z. B. Im September wurden 50 % des Budgets in einer Woche verbraucht).

Zusätzlich kann es Entwicklungsbedürfnisse aufdecken (z. B. Eine große Bibliothek mit kleineren Alternativen wird oft gewählt, um ein häufiges Problem zu lösen).

Wie definiere ich ein Performance-Budget?

Ein Budget sollte zwei Ebenen umfassen:

  • Warnung.
  • Fehler.

Die Warnstufe ermöglicht es Ihnen, proaktiv zu sein und technischen Schulden zu planen, ohne die Entwicklung oder Bereitstellungen zu blockieren.

Die Fehlerstufe ist ein oberes Grenzlimit, bei dem Änderungen negative und bemerkbare Auswirkungen haben werden.

Um zu beginnen, müssen Sie zuerst 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ößen-Budgets übersetzt.

Ein Standardbasiswert zur Reduzierung der Absprungrate ist, Time to Interactive unter 5 Sekunden in 3G/4G und unter 2 Sekunden für nachfolgende Ladezeiten zu erreichen. Basierend auf den spezifischen Zielen und Inhalten Ihrer Website könnten Sie jedoch andere Metriken in den Fokus rücken.

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

Der ultimative Wert eines Performance-Budgets besteht 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 Absprungs- oder Konversionsrate bestimmen wird, sondern auch, wie wahrscheinlich es ist, dass der Benutzer zurückkehren wird.

Wie implementiere ich ein Performance-Budget?

Während der Entwicklung gibt es einige Tools, um Überprüfungen an neuen oder geänderten 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 kontinuierlichen Integrationspipeline (CI) zu definieren und auszuführen.

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

Der erste Schritt besteht darin, eine Entwicklungsbasislinie für jeden Branch zu definieren, um diese zu vergleichen, und die Präzision des Unterschieds zwischen Entwicklung und Produktion kann als Ziel verwendet werden, um die Live-Umgebung besser anzupassen.

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 fehlschlagen.

Wie wird ein Performance-Budget durchgesetzt?

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

Jedoch sollten Sie mehrere Budgets haben und dynamisch sein. Sie sollen Ihre laufenden Ziele reflektieren, aber Risiken und Experimente zulassen. Zum Beispiel könnten Sie ein Feature einführen, das die gesamte Ladezeit erhöht, aber versucht, das Benutzerengagement zu steigern. (z. B. Wie lange ein Benutzer auf einer Seite oder Website bleibt).

Ein Performance-Budget hilft Ihnen, optimales Verhalten für Ihre aktuellen Benutzer zu schützen, während es Ihnen ermöglicht, neue Märkte zu erschließen und maßgeschneiderte Erlebnisse zu liefern.

Siehe auch