Webpagetest.org ist das wahrscheinlich beste kostenlose Tool zum Messen deiner Seitenladezeit. Denn WebPagetest ist ungleich mächtiger als die direkte Konkurrenz. Und das vor allem dank zweier Funktionen: Der Möglichkeit Webseiten zu vergleichen und dem Langzeitvergleich.

Dieser Artikel ist Teil einer Reihe zur Messung und Bewertung der Ladezeit deiner Webseiten. In den vorangegangenen Artikeln haben wir gezeigt:

• Warum du nicht mit jedem Tool deine echte Seitenladezeit messen kannst
• Welches, unserer Erfahrung nach, die 10 wichtigsten Performancestellschrauben für WordPress im Jahr 2016 waren
• Wie du Webpagetest grundlegend bedienst

Heute zeige ich dir zwei Funktionen von Webpagetest, die du wahrscheinlich noch nicht kanntest. Denn das Tool ist besonders für Performancevergleiche und eine kontinuierliche Bewertung deiner Seitenladezeit geeignet.

Deshalb zeige ich dir heute:

• Welche Werte du noch kennen musst, um die Ergebnisse von Webpagetest umfassend verstehen zu können
• Wie du mit Webpagetest zwei oder mehr Webseiten vergleichen kannst (Wenn du wenig Zeit hast: Das ist der wichtigste Abschnitt des Artikels)
• Wie du Langzeitvergleiche durchführst

Weitere wichtige Kennwerte – Speed Index, DOM Elements und Kosten

Neben den Standardwerten – wie Start Render, Document Complete etc. – liefert Webpagetest auch noch andere nützliche Eckdaten, die es dir ermöglichen die Effizienz deiner Seite einzuschätzen. Diese Werte sind wichtig, damit du die Ergebnisse des Tools richtig interpretieren kannst.

DOM Elements: Ein DOM Element ist, grob gesagt, ein HTML-Baustein. Je weniger dieser Bausteine dein Browser laden muss, desto schlanker und schneller ist deine Seite. Damit ist die Zahl der DOM Elemente aber nur ein Indiz für die Ladezeit der Seite. Durch Änderungen an Plugins, vor allem aber dem Theme, kann die Zahl der DOM Elemente merklich verringert werden.

Requests: Dieser Wert beschreibt die Zahl der einzelnen HTTP-Requests, die dein Browser an den Webserver stellen muss. Über einen HTTP-Request werden einzelne Elemente, wie CSS-Dateien, JavaScript-Dateien oder Bilder angefordert. Auch hier gilt theoretisch: Je weniger Requests, desto besser. Übrigens liefert dir das Wasserfalldiagramm deiner Seite immer den besten Überblick über die HTTP-Requests, die geladen werden.

Praktisch spielt die konkrete Zahl der HTTP-Requests aber keine so große Rolle. Zumindest dann nicht, wenn deine Seite SSL-verschlüsselt ist und auf einem Server mit HTTP/2 läuft. Denn dann können mehrere Requests gleichzeitig durchgeführt und geladen werden.

Speed Index: Dieser Index wird von Webpagetest berechnet und ist ein Indikator für die gefühlte Seitenladezeit. Der Wert beschreibt einen Millisekundenwert – geringe Werte sind also besser als hohe –, der angibt wie schnell und effizient die sichtbaren Inhalte deiner Seite geladen werden. Im Prinzip bestimmt Webpagetest über Screenshots deiner Seite das Nutzererlebnis und bemisst dieses mit einem Zeitwert. Falls es dich interessiert: Webpagetest hat hierzu auch eine Gleichung formuliert.

Am besten ist der Speed Index für Vergleiche geeignet. Bringt eine Optimierungsmaßnahme eine deutliche Verkleinerung des Index, war sie tendenziell erfolgreich und die Seite wird als schneller wahrgenommen. Hat deine Seite einen deutlich kleineren Speed Index als die der Konkurrenz, dann kannst du davon ausgehen, dass deine Seite den Besuchern ein besseres Surferlebnis bietet.

Cost: Dieser Wert ist eher ein Nice-to-have. Er gibt an, wie teuer deine Seite ist, wenn sie über mobile Netze geladen wird. Die Daten stammen von whatdoesmysitecost.com und bilden einen Durchschnittswert für alle hier gelisteten Ländertarife. Über diese Funktion kannst du dir einmal die Kosten für das mobile Laden deiner Seite ansehen. Ich halte diesen Wert aber in den wenigsten Fällen wir wirklich optimierungsrelevant. Bitte korrigiere mich, sollte ich hier falsch liegen.

Die wichtigste Funktion von Webpagetest: Mehrere Webseiten direkt vergleichen

Wenn du die Ladezeit deiner Seite misst, dann hat das in der Regel zwei Gründe: Entweder hast du eine Änderung vorgenommen und möchtest wissen welchen Einfluss diese auf die Ladezeit hat oder aber du möchtest deine Seite mit anderen vergleichen.

Natürlich brauchst du für eine solche Aussage einen Vergleichswert. Und genau dafür wurde die Funktion “Visual Comparison” geschaffen. Denn mit ihr kannst du die Ladezeit und das Ladeverhalten mehrerer URLs direkt vergleichen.

Mit dieser Funktion kannst du zum Beispiel:

• deine eigenen Seiten mit der der Konkurrenz vergleichen
• prüfen, was der Hosterwechsel gebracht hat
• zwei oder mehr Unterseiten gegeneinander testen
• überprüfen wie schnell Unterseiten im Vergleich zur Startseite laden

Für den Direktvergleich musst du lediglich die Seiten benennen, die URLs einfügen und den Test mit den vorher eingestellten Parametern durchführen.

Zu Testzwecken vergleichen wir zwei unserer Produktseiten miteinander. Das Ergebnis erlaubt es dir gleich anhand mehrerer Metriken die Seiten zu vergleichen. Die anschaulichste findest du direkt am Beginn des Ergebnisdokuments: Den Filmstrip View. Hier kannst du sehen wann der Besucher deine Seite als fertig geladen wahrnimmt (der relevante Kennwert heißt Visually Complete).

Der Referenzwert lässt sich auch ändern, sodass andere Kennwerte, wie Fully Loaded und Document Complete, ebenfalls angezeigt werden können.

Weiter unten findest du noch vier Balkendiagramme, die dir zeigen wie die getesteten Seiten bezüglich der gefühlten Ladezeit, der wichtigsten Ladezeitpunkte, der Zahl der HTTP-Requests und der Größe der Seite abschneiden.

Mit diesen Metriken kannst du auf einen Blick sehen, welche der getesteten Seiten schneller lädt, schlanker ist und dem Besucher ein besseres Erlebnis bietet.

Für Google-Nutzer bietet Webpagetest auch die Möglichkeit von Langzeitvergleichen

Wenn du dich bei Webpagetest mit deinem Google-Konto einloggst, dann werden die einzelnen Tests aufgezeichnet. Somit hast du die Möglichkeit dir alle Tests des vergangenen Jahres anzusehen und miteinander zu vergleichen.

Diese Übersicht ist besonders wegen zweier Funktionen extrem praktisch: Du kannst über einen Klick auf die URL die historischen Testdaten aufrufen. Das heißt du kannst die kompletten Ergebnisse aller Tests des vergangenen Jahres einsehen.

Und du kannst einzelne Tests markieren und diese untereinander vergleichen, um schnell einen Überblick über die Entwicklung deiner Seiten zu erhalten.

Fazit: Webpagetest ist ungleich mächtiger als andere kostenlose Werkzeuge

Der direkte Vergleich mehrerer Seiten ist sicherlich die mächtigste Funktion von Webpagetest. Denn sie erlaubt es dir erst deine Seite im Verhältnis zur Konkurrenz, zu Vorbildern oder Branchenbenchmarks zu betrachten. Die Ergebnisse, die du erhältst, sind – für Webpagetestverhältnisse – auch noch gut aufbereitet und leicht verständlich.

Die Zeitreihenanalyse erlaubt es dir zudem, dir ein umfassendes Bild der Entwicklung deiner Seitenladezeit zu machen. So kannst du genau sehen welche Optimierungsmaßnahmen oder Veränderungen sich wie auf deine Seite, deren Ladezeit und das Nutzererlebnis ausgewirkt haben.

Mit diesen beiden Funktionen bist du in der Lage alle relevanten Änderungen deiner Seiten zu erfassen und, was noch wichtiger ist, zu analysieren.

Du kennst noch eine nützliche Funktion von Webpagetest, die wir vergessen haben? Dann freuen wir uns auf deinen Kommentar!