Planung von Optimierungen mit Performance Budgets

Die Performance sollte bei der Planung einer Website Berücksichtigung finden, da viele der in dieser Phase getroffenen Entscheidungen Auswirkungen auf die zukünftige Ladezeit haben. Schwierig ist es die richtige Balance zwischen Gestaltung und Performance zu finden. Eine bestmögliche User Experience ist als das primäre Ziel anzusehen. Diese wird, neben dem optischen Look and Feel, der Informationsarchitektur und der Bedienbarkeit, durch die vom Nutzer wahrgenommene Performance erreicht [Hog15].

Anhand eines Performance Budgets kann festgelegt werden, welche Ziele zu erreichen sind und durch welche Metriken sich diese quantifizieren lassen. Dazu werden Budgets für verschiedene Messwerte definiert, zum Beispiel ein Budget von 3 Sekunden für die Ladezeit oder ein Datenvolumen von 800 Kilobyte, die einzuhalten sind [Ber15].

Tim Kadlec unterscheidet in seinem Artikel „Performance Budgets Metrics“ vier Arten von Metriken für ein Performance Budget. Dies sind die Meilenstein-Zeiten, der Speed Index anhand von WebPagetest sowie quantitative und regelbasierte Metriken [Kad14]. Unter die Meilenstein-Zeiten fallen viele zeitbasierte Messwerte, wie beispielsweise die Zeiten für Start Render, Visually Complete oder Document Complete. Die Anzahl der Anfragen und das übertragene Datenvolumen sowie die Anzahl und die Kapazität der geladenen Bilder zählen zu den quantitativen Metriken. Diese sind wichtig für das Performance Budget, sagen allerdings nicht viel über die tatsächliche Ladezeit einer Webseite aus. Regelbasierte Metriken haben nur eine geringe Relevanz für das Performance Budget und werden anhand der Bewertung von PageSpeed Insights oder YSLOW bestimmt. Sie eignen sich gut zum Monitoring und zur Überprüfung, ob bei der Umsetzung die Regeln der Performanceoptimierung beachtet wurden [Kad14].

Abhängig vom Umfang des Performance Budgets lassen sich ergänzend Zielwerte für bestimmte Endgeräte und Verbindungsarten definieren [Hog15]. Dabei ist zu beachten, dass realistische, quantifizierbare und reproduzierbare Messwerte für die Versuche ausgewählt werden und festgelegt wird, auf welche Art und Weise diese zu erheben sind [KR13]. Ein solches Performance Budget ist beispielhaft in Tabelle 2.1 dargestellt.

Tabelle 2.1: Beispiel eines Performance Budgets nach Hogan [Hog15] und Kadlec [Kad14]

Was messen? Maximalwert Womit messen? Hinweis
Start Render 0,5 Sekunden WebPagetest, 5 Runs mit 3G alle Seiten
Load Time 2 Sekunden WebPagetest, 5 Runs mit 3G alle Seiten
Load Time 2 Sekunden Google Analytics, alle Länder alle Seiten
Speed Index 1000 WebPagetest, 5 Runs, Standort Amsterdam, Chrome mit 3G alle Seiten
Speed Index 600 WebPagetest, 5 Runs, Standort Amsterdam, Chrome mit 3G nur Startseite
Page Weight 800 KB Entwickler-Tools in Chrome alle Seiten
Requests 15 Entwickler-Tools in Chrome alle Seiten

Mit Google Analytics können die von der Zielgruppe verwendeten Endgeräte, Betriebssysteme und Browser identifiziert werden. Diese Angaben ermöglichen es die Tests nah an den realen Rahmenbedingungen der Nutzer durchzuführen sowie den geografischen Standort, die Art des Netzwerkes und die damit einhergehende Geschwindigkeit einzubeziehen [KR13]. Sofern die zu optimierende Website neu ist oder bisher keine verwertbaren Daten der Zielgruppe erhoben wurden, lassen sich realistische Zielwerte für das Performance Budget durch eine Analyse der Konkurrenz ermitteln. Zumindest die Ergebnisse der Konkurrenz sollten mit der zu optimierenden Website erreicht oder unterboten werden [Ber15]. Grundsätzlich lässt sich als Ziel festhalten, dass die Reaktions- und Ladezeit bei zwei bis maximal drei Sekunden liegen sollte [KR13] und der Speed Index unter 1000 [Fri14]. Google hingegen gibt bei der Bewertung von mobilen Webseiten mit PageSpeed Insight nur ein Zeitbudget von einer Sekunde für Mobilfunknetze vor, innerhalb dieser Sekunde müssen für eine gute Bewertung alle Above the Fold Inhalte geladen und gerendert werden [Gooa].

Die Einhaltung der Maximalwerte des Performance Budgets lässt sich in regelmäßigen Abständen durch die in Kapitel 2.2.4 vorgestellten Routine Checks überprüfen.