Performance Budget

von

Wenn Sie eine Website entwickeln die performant geladen werden kann ein Performance Budget entscheidend sein um Netzwerk- und CPU-Beschränkungen auf Mobiltelefonen einzuhalten. Mit einem Performance Budget wird ein klarer, greifbarer Weg, um Entscheidungen darüber zu treffen, was einbezogen werden kann und was nicht, und das zu einem angemessen frühen Zeitpunkt im Projekt

Was ist ein Performance Budget?

Ein Performance Budget ist ein Limit für Websites, welches das Entwickler Team nicht überschreiten darf. Es kann eine maximale JavaScript, ein Datei Größe, eine bestimmte Ladezeit (z.B. Time-to-Interactive in unter 5s bei 3G/4G) oder ein Schwellenwert für eine beliebige Anzahl anderer Faktoren sein sein.

Performance Budget sind nicht nur Richtwerte. Ähnlich wie ein finanzielles Budget sind sie etwas, das bewusst ausgegeben wird. Betrachten Sie sie als eine Währung, die Sie ausgeben und mit der Sie auf der Grundlage von Benutzererfahrungen handeln können. In einer Umgebung, in der die Kosten für JavaScript auf mobilen Geräten immer noch hoch sind, sind Budgets eines der wenigen Werkzeuge, die uns zum Erfolg führen können.

Metriken für Performance Budgets sind Definitonen und Richtlinien die regeln wieviel Resource fressender mengenbasierte Metriken oder regelbasierte Metriken umfassen.

Ladezeiten-Timings: Timings, die auf der Benutzererfahrung beim Laden einer Seite basieren (z.B. Time-to-Interactive, First Contentful Paint). Häufig werden Sie mehrere Milestone-Timings kombinieren wollen, um die gesamte Geschichte während des Seitenladens genau darzustellen. Einige Teams pflegen auch benutzerdefinierte Metriken, wie „Zeit bis zum ersten Tweet“ für Twitter.

  • Mengenbasierte Metriken: basierend auf Rohwerten (z. B. Gewicht von JavaScript (KB/MB), Anzahl der HTTP-Anfragen). Diese konzentrieren sich auf die Browser-Erfahrung.
  • Regelbasierte Metriken: Bewertungen, die von Tools wie Lighthouse oder WebPageTest generiert werden. Häufig eine einzelne Zahl oder eine Reihe zur Bewertung Ihrer Website.
  • Teams, die Perf-Budgets einbeziehen, haben oft eine CI-Warnung oder einen Fehler bei einem Build, wenn sich die Leistung eines PR zurückentwickelt.

 

Beispiele für Budgets

  • Unsere Produktseite muss weniger als 170 KB JavaScript auf Mobiltelefonen enthalten.
  • Unsere Suchseite muss weniger als 2 MB an Bildern auf dem Desktop enthalten.
  • Unsere Homepage muss in < 5s auf Slow 3G/Moto G4 laden und interaktiv werden Unser Blog muss bei den Lighthouse Wirtschaftlichkeitsprüfungen > 80 Punkte erreichen
  • Unten finden Sie eine Mengenmetrik – JS-Größe für die Desktop-Site von The Guardian auf SpeedCurve. Sie wird gelb hervorgehoben, wenn das Budget unterschritten wird, und rot, wenn das Budget überschritten wird.

 

JS-Größen-Budgets

First CPU Idle  – markiert den Punkt, an dem der Hauptthread des Browsers nicht länger als 50 ms durch eine einzelne Aufgabe blockiert wird, so dass auf Benutzereingaben schnell reagiert werden kann.

Die Budgets können durch eine Reihe von Faktoren, einschließlich der Endgeräte, variieren. Vergleicht man die Mobil- und Desktop des Guardian, können wir feststellen, dass sich ihr Bewertung hier stark unterscheidet:

Dies könnte darauf hindeuten, dass Budgets für verschiedene Endgeräte in Betracht gezogen werden sollten. z.B.

  • < 170KB JS (min/gzip) für mobile Geräte und
  • < 1,5MB für Desktop-Geräte

bei denen die Benutzer möglicherweise schnellere CPUs und Netzwerkverbindungen haben.

Quantifizierung der Auswirkungen neuer Funktionen. Die Entscheidung, dass eine Seite 500kB nicht überschreiten darf, wenn ein Mock-up mit drei Karussells und einem hochauflösenden Vollbild im Hintergrund bereits genehmigt wurde, wird Ihnen nicht viel nützen.

Häufig sind sich die Mitarbeiter nicht über die Konsequenzen Ihrer Entscheidungen bzgl. Performance nicht bewusst. Wir müssen es für PMs, Designer und Kunden leichter machen, die Auswirkungen hrer Entscheidungen auf das Benutzererlebnis zu verstehen.

Die Interessenvertreter benötigen möglicherweise Hilfe, um zu verstehen, dass ein weiteres JavaScript-Karussell oder eine Fülle von Bildern die Leistung einer Website stark beeinträchtigen kann. Perf-Budgets können dabei helfen, die Denkweise strategisch zu ändern und den Wert jeder Sache, die wir hinzufügen, in Frage zu stellen.

 

Frühzeitig über Leistung nachdenken

Noch besser ist es, wenn wir die Leistung von Anfang an zu einem Teil der Projektziele machen können. Dadurch verschiebt sich die Mentalität, dass Performance Budgets nur ein Faktor sind, an den man während der Entwicklung denkt, hin zu einem Faktor, bei dem sie während des gesamten Projektlebenszyklus im Mittelpunkt stehen. Wie bei jedem finanziellen Budget kann es Zeiten geben, in denen Ihr Budget für die Perf. Dies kann Kürzungen oder Kompromisse erfordern, um eine gleichbleibend schnelle Benutzererfahrung zu gewährleisten. Welche Funktionen sind für Ihre Benutzer wirklich wichtig? Welche davon begeistern oder halten sie am meisten? Dies ist ein schwieriges Gespräch und nicht immer klar umrissen.

Diese Konversation kann dazu führen, dass eine Funktion fallen gelassen wird, um eine andere zu ermöglichen. Fallenlassen könnte bedeuten, dass sie aus dem kritischen Pfad entfernt wird – die Funktion könnte zu einem späteren Zeitpunkt, wenn der Benutzer sie benötigt, immer noch bei Bedarf geladen werden.

In solchen Situationen können Sie einen Anruf Seite für Seite tätigen und dabei das Performance Budget als Quelle der Wahrheit konsultieren, damit Sie Ihre Ziele weiterhin erreichen können.

 

Operationalisierung von Budgets

Performance Budgets werden durch interne Prozesse zur Operationalisierung einer Leistungskultur innerhalb eines Unternehmens unterstützt. Organisatorische Leistungsbudgets stellen sicher, dass ein Budget im Besitz aller ist und nicht nur von einer Gruppe definiert wird. Performance Budgets können nicht etwas sein, um das sich nur Ingenieurteams kümmern.

„Web-Performance-Budgets sollten ein gemeinschaftliches Bemühen um die richtigen Faktoren sein, um eine Gleichung zu erstellen, die dem Unternehmen hilft, die richtigen Entscheidungen zu treffen und die notwendigen Erkenntnisse zu gewinnen, um sein Produkt voranzubringen. Dies ist weitaus fruchtbarer als ein potenziell antagonisierendes Gespräch über das Festhalten an einer festen Web-Leistungsschwelle“. – Tobias Baldauf

Wenn die Budgets festgelegt sind und die gesamte Organisation sich frühzeitig über die Budgetparameter im Klaren ist, kann man sagen, dass die Leistung nicht nur eine technische Frage ist, sondern ein entscheidender Teil des Gesamtpakets beim Bau eines Standorts.

Sie stellt eine Richtlinie für Design und Technik bei der Betrachtung der Leistung dar und sollte bei jeder Entscheidung, die sich auf die Leistung auswirken könnte, überprüft werden.

Überwachungsdienste wie SpeedCurve ermöglichen es Ihnen auch, Ihre Website mit Konkurrenten zu vergleichen, so dass Sie sich leicht vorstellen können, wie sie im Rahmen Ihres Budgets abschneiden. Dies kann eine wirkungsvolle Hilfe sein, wenn Sie mit Interessengruppen darüber sprechen, warum es wichtig ist, „unter dem Budget“ zu bleiben.

 

Performance Budget und Benchmarks

Es gibt viele Instrumente zur Einhaltung von Performance Budget um JavaScript-Größenregressionen in CI aufzufangen. Tinder.com verwendet bundlesize, um JavaScript-Bündelbudgets festzulegen, die bei jedem PR-Commit überprüft werden. Sie haben ein Hauptbündelbudget von 170KB und ein CSS-Budget von 20KB. Code-Splitting ermöglicht es ihnen, innerhalb der Budgets zu bleiben.

Andere Teams nutzen die integrierte Unterstützung von Webpack für Performance-Budgets. Sie können performance.hints so konfigurieren, dass ein Build gewarnt wird oder fehlschlägt, wenn Budgets überschritten werden.

Zillow verwendet SpeedCurve, um Budgets für ihre Menge (z.B. Bildgröße) und Meilenstein-Timing-Metriken in der mobilen Suche festzulegen. Andere Leistungsüberwachungsdienste wie Calibre unterstützen ebenfalls die Festlegung von Budgets und Warnmeldungen bei Rückschritten.

Wenn Sie sich in der Planungsphase der Entscheidung befinden, wie Ihre Zielbudgets aussehen sollen, ist performancebudget.io eine visuelle Hilfe mit Voreinstellungen für verschiedene Netzwerkgeschwindigkeiten.

 

leistungsbudget.io

Abschließende Gedanken
Leistungsbudgets führen zu einer Kultur der Verantwortlichkeit, die es den Beteiligten ermöglicht, die Auswirkungen jeder Änderung an einer Website auf nutzerzentrierte Metriken abzuwägen. Sprechen Sie mit Ihrer Organisation und finden Sie heraus, ob Sie mit der Verabschiedung von Leistungsbudgets für Ihre Projekte zurechtkommen. Wenn es sich lohnt, schnell zu werden, dann lohnt es sich, schnell zu bleiben. ❤️

 

addyosmani.com/blog/performance-budgets