Performance Budget

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