Diese zwei WebPagetest-Funktionen kanntest du noch nicht – solltest du aber regelmäßig nutzen

Jan Hornung
6 Min.
Webseiten vergleichen mit Webpagetest

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:

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:

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.

Beispielergebnis eines Webpagetest, der die wichtigen erweiterten Kennwerte zeigt
Beispielergebnis eines Webpagetests. Der Speed Index, die Zahl der DOM Elemente und der Requests sind drei wichtige Indizien für die Gesamtperformance deiner Seite.

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.

Auszug aus dem Quelltext eines RAIDBOXES Blogbeitrags
Jedes Element des HTML-body, das in spitzen Klammern steht, ist ein DOM Element.

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.

Berechnungsgrundlage des Speed Index
Der Speed Index von Webpagetest wird als Fläche dargestellt und berechnet. Je schneller der Inhalt deiner Seite geladen wird, desto kleiner wird der Flächeninhalt und damit der Speed Index. Wenn du dich für die Details interessierst: hier listet Webpagetest alle Infos zur Berechnung des Speed Index auf.

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.

Die Visual Comparison Funktion erlaubt es dir Webseiten direkt miteinander zu vergleichen.
Du findest die Vergleichsfunktion direkt rechts neben der Standardanalyse von Webpagetest.

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 miteinanderDas 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.

Ergebnis, wenn du bei Webpagetest zwei Webseiten vergleichst
Die anschaulichste Metrik wird direkt zu Beginn präsentiert: Der Filmstrip View. Du kannst diesen über die Einstellungen rechts unten noch konfigurieren. Die Wasserfalldiagramme kannst über den Schieberegler links über den Diagrammen hin- und herschalten.

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.

Langzeitvergleiche in Webpagetest, um mehrere Versionen einer Website vergleichen zu können
Unsere Webpagetest-Historie der vergangenen sieben Tage. Immer wenn du dich mit deinem Google-Konto einloggst werden deine Tests gespeichert und können nachträglich eingesehen werden.

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!

RB Performance E Book Newsletter 02

RAIDBOXER der ersten Stunde und Head of Support. Auf Bar- und WordCamps spricht er am liebsten über PageSpeed und Website-Performance. Bestechen kann man ihn am besten mit einem Espresso – oder bayrischer Brezn.

Ähnliche Artikel

Kommentare zu diesem Artikel

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.