Speed Index: So berechnet man die wichtige Kennzahl für die Ladezeit

Eine der wichtigsten Kennzahlen zur Beurteilung der Ladezeit einer Webseite ist der Speed Index. Google verwendet den Speed Index in verschiedenen Tools wie zum Beispiel in Lighthouse oder PageSpeed Insights. Doch wie die Kennzahl berechnet wird, ist auf Anhieb nicht so einfach zu verstehen. Der Speed Index steht nämlich nicht für die gesamte Ladezeit, sondern gibt den Verlauf des Seitenaufbaus wieder.

Viele Nutzer von Google Lighthouse oder PageSpeed Insights werden sich schon einmal gefragt haben, was es eigentlich mit dem Speed Index bzw. dem Geschwindigkeitsindex auf sich hat, der neben anderen Kennzahen wie dem First Contentful Paint oder der Time to Interactive angezeigt wird.

Speed Index: Der Verlauf des Seitenaufbaus entscheidet

Um den Speed Index bewerten und vergleichen zu können, muss man zunächst einmal verstehen, wie diese Kennzahl bestimmt und berechnet wird. Zunächst einmal ist der Speed Index kein Wert, der eindimensional die Ladezeit einer Webseite angibt. Es geht beim Speed Index um den Ladefortschritt von Anfang bis Ende des Seitenaufbaus. Dabei gilt: Umso früher Inhalte zu sehen sind und umso weniger Inhalte zu einem späteren Zeitpunkt geladen werden müssen, desto geringer und damit besser ist der Wert für den Speed Index.

Wie sich die Verteilung der geladenen Inhalte über die Zeit auf den Speed Index auswirken kann, zeigen die beispielhaften Verläufe in folgendem Diagramm:

• Auf Seite A (grün) wird ein großer Anteil der Inhalte früh geladen, der kleine Rest folgt später.
• Auf Seite B (rot) werden viele Inhalte erst später geladen.
• Seite A hat damit einen besseren Speed Index als Seite B. 

Zur Berechnung des Speed Indexes benötigt man den sogenannten IntervalScore. Dieser berechnet sich aus dem Ladezustand einer Seite zu einem bestimmten Zeitpunkt. Die Formel für den IntervalScore lautet: IntervalScore=Intervall*(1-(Completeness/100)). Die Elemente der Formel bedeuten:

• Intervall: Der IntervalScore wird in Abständen von jeweils 0,1 Sekunden bzw. 100 Millisekunden gemessen.
• Completeness: Zu welchem Anteil (in Prozent) wurde die Seite zum jeweiligen Intervall bereits im Browser daregestellt

Wenn eine Seite zu einem bestimmten Intervall zu 50 Prozent geladen ist, ist ihr IntervalScore zu diesem Zeitpunkt IntervalScore=0,1s*(1-(0,5/100))=0,1s*0,5=0,05s

Der Speed Index kumuliert alle IntervalScores von Beginn bis zum Ende des Seitenaufbaus im Browser. Zu jedem Intervall, alle 0,1 Sekunden, wird ein neuer IntervalScore berechnet, welcher dann zum Speed Index hinzugefügt wird. Das zeigt das folgende Beispiel. Angenommen, eine Webseite sei nach 0,9 Sekunden komplett geladen. Den Fortschritt des Seitenaufbaus und den daraus resultierende Speed Index zeigt die folgende Tabelle:

Der resultierende Speed Index in diesem Beispiel läge also bei 0,44 Sekunden, und das, obwohl die Seite erst nach 0,9 Sekunden komplett geladen ist.

Wie wird die Completeness beim Speed Index gemessen?

Grundsätzlich gibt es zwei Ansätze, wie die Completeness, also der voranschreitende Aufbau einer Webseite im Browser, gemessen werden kann. Der erste Ansatz verwendet Vergleiche von Video-Frames, wie man sie aus den Ergebnissen verschiedener Page Speed-Tools kennt. Dazu wird der Initialzustand der Seite mit dem fertigen Ladezustand verglichen. Hierzu verwendet man die Verteilung der Farben auf der Seite. Der Vergleich zwischen Start- und Endzustand wird als Grundlage (Baseline) genutzt. 

Um den Fortschritt zu messen, wird das Farb-Histogramm jedes betrachteten Frames, also jedes Intervalls während des Ladens, mit dem Startzustand verglichen und danach gegen die zuvor bestimmte Baseline gehalten. So kann jedes Mal bestimmt werden, wie weit der jeweils in einem Frame gezeigte Zustand vom finalen Ladezustand entfernt ist.

Besser als diese Methode funktioniert die Messung des Ladefortschritts auf Basis des Zeichnens von Rechtecken im Browser. Die Webseite wird in mehrere Rechteckte aufgeteilt, die sich während des Ladens einmal oder öfter durch Paint-Events verändern können. Jedes Paint-Event für ein Rechteck fließt in den Gesamtwert des Fortschritts ein. Gibt es pro Rechteck mehrere Paint-Events, so werden diese anteilig gewichtet. Je größer ein Rechteck, desto stärker der Einfluss des Rechtecks auf den gesamten Speed Index. Der Speed Index wird berechnet durch den Beitrag aller Paint-Events für alle Rechtecke.

Wie kann man den Speed Index zur Optimierung der Ladezeit nutzen?

Die Berechnungsweise des Speed Indexes zeigt, dass es vor allem darauf ankommt, Inhalte möglichst früh anzuzeigen bzw. zu zeichnen, um einen niedrigen Wert zu erreichen. Umso höher die Completeness, also der Ladefortschritt der Seite, zu einem frühen Zeitpunkt ist, desto geringer sind die Werte, die im weiteren Verlauf des Ladens hinzugezählt werden.

Die anteilige Berücksichtigung mehrerer Paint-Events für Rechtecke zeigt außerdem, dass es sinnvoll sein kann, anstelle der finalen Inhalte frühzeitig Platzhalter anzuzeigen und diese später zu ersetzen. Damit werden die verschiedenen Paint-Events anteilig auf den Gesamtwert des Rechtecks verteilt. Die frühe Darstellung des Platzhalters wirkt sich dann zugunsten eines niedrigeren Speed Indexes aus.

Das kommt der subjektiven Wahrnehmung der Nutzer entgegen: Sie sehen früh, dass sich auf der Seite etwas tut, was die gefühlte Ladezeit verkürzen kann.

Weitere Informationen zum Speed Index sind auf der Seite von WebPageTest zu finden.

Titelbild: Copyright Olivier Le Moal - Fotolia.com