Website-Speed: Mehr als zwei Tools braucht Ihr nicht

Bei der Auswahl eines neuen Themes stehen viele Nutzer häufig vor der Wahl zwischen Funktionsumfang und Performanz des neuen Designs. Zwar kann er niemandem die Entscheidung abnehmen, dafür kann Marcel von RAIDBOXES Euch aber zeigen, wie Ihr die Geschwindigkeit Eures neuen Themes im Vergleich zum alten zuverlässig messen könnt. Und das mit nur zwei Tools.

Ein neues Theme oder Template soll nicht nur gut aussehen und viele Funktionen bieten, es sollte auch möglichst schnell sein. Doch nicht selten werden Themes mit Zusatzfunktionen überladen, die WordPress anschließend quälend langsam machen können. Und so kann ein vermeintlich einfacher Themewechsel einen Rattenschwanz an Arbeit nach sich ziehen, bis hin zu einem Wechsel des Hostingpakets oder gleich des Hostinganbieters weil die Seite zu langsam geworden ist.

Die Frage danach was ein gutes und performantes Theme ausmacht ist noch einmal eine Sache für sich. Ich zeige Euch heute aber, wie Ihr schnell und zuverlässig die Performance Eurer Seite nach einem Themewechsel bestimmt und Flaschenhälse erkennt. Denn nur wenn Ihr die richtigen Tests und Kennzahlen kennt, könnt Ihr mehrere Themes bezüglich ihrer Performance vergleichen.

Einige beliebte Tests liefern nur unzureichende Messergebnisse

Eine Sache ist wichtig: Es gibt viele Messinstrumente im Internet. Zu viele, meiner Meinung nach. Denn einige Speedtests sind aus unterschiedlichen Gründen nur eingeschränkt verwendbar. So werden beispielsweise verfälschende Messparameter verwendet oder die Messung ist schlicht schwer oder nicht zu interpretieren.

Grundsätzlich gilt es bei der Messung auf folgendes zu achten:

• Der Messpunkt sollte im jeweils relevanten Land liegen
• Die Messwerte sollten interpretierbar ausgegeben werden
• Die Messung muss fein genug sein

Wenn Ihr eine Website in Deutschland betreibt, dann müsst Ihr auch mit einem deutschen Server messen, um den echten Website Speed zu erhalten

Einige Tests, wie GTMetrix oder Pingdom bieten keine Möglichkeit, die Performance mit deutschen Servern zu messen. Wenn Ihr eine Webseite mit deutscher oder deutschsprachiger Zielgruppe betreibt, rate ich Euch daher von einer Messung mit diesen Tools ab, auch wenn die Ergebnisse ansonsten gut verwertbar sind.

Pingdom bietet zwar insgesamt vier Serverstandorte für den Test, keiner davon liegt aber in Deutschland. GTMetrix (unten) bietet lediglich einen kanadischen Testserver.

Nimm Abstand von reinen Noten- oder Punktebewertungen

Ein Messwert ist nur dann gut interpretierbar, wenn er uneingeschränkt vergleichbar ist. Soll heißen: Schulnoten oder Punktesysteme sind eigentlich keine guten Messdaten. Denn sie erlauben lediglich Aussage à la: Theme A ist besser oder schlechter als Theme B. Ihr könnt jedoch nicht sehen in welchen Bereichen Theme A um wieviel besser oder schlechter ist als Theme B. Das ist aber genau die Information, die Ihr für einen zuverlässigen Performancevergleich benötigt.

Denn wenn Ihr absolute Zahlen, wie 400 und 100 Millisekunden, ausgegeben bekommt, könnt Ihr ganz genau sagen, dass das neue Theme viermal schneller lädt, als das alte. Als Daumenregel gilt: Nur in Kombination mit absoluten Werten sind Noten- oder Punktesysteme gut interpretierbar.

Diese Darstellung ist ein typisches Beispiel für ein Notensystem. Es ist zwar erkennbar, dass die Ladezeit, nach Kriterien der Testseite “Perfekt!” ist, was genau dies in Zahlen bedeutet wird jedoch an dieser Stelle nicht ausgegeben. Zudem fehlt eine Information darüber, worauf sich die Note genau bezieht.

Nur wenn Ihr zwischen Ressourcen und Server differenzieren könnt, ist eine Messung fein genug

Wichtig ist zudem, dass die Messergebnisse es Euch erlauben die Quelle einer möglichen Verzögerung zu identifizieren. Gesamtladezeiten der Seite helfen allein wenig. Ihr müsst mindestens zwischen der Servergeschwindigkeit, der Ladezeit von Bildern und Videos und der Ladezeit von CSS und JS unterscheiden können. Denn nur so könnt Ihr bestimmen, wo die Flaschenhälse Eurer Seite liegen.

Google Page Speed Insights und webpagetest.org – mehr braucht Ihr nicht

Mit nur zwei Tools könnt Ihr sehr zuverlässig bestimmen wo Flaschenhälse Eurer Website liegen und wie stark diese Euer Website Speed beeinflussen. So erkennt Ihr schnell, ob und wo sich eine Optimierung lohnt. Dies sind der Google Page Speed Insights Test  und der Performancetest von webpagetest.org. Googles Test dient zur Identifikation von Optimierungspotenzialen und der Performancetest von webpagetest.org zur genauen Performancemessung.

Page Speed Insights erkennt Potenziale für den Website Speed

Google Page Speed Insights ist kein Performancetest, sondern gibt an wo die Seite – Googles Meinung nach – noch verbessert werden kann. Google macht hier sehr konkrete Angaben. Die typischen Ansatzpunkte sind die Optimierung von Bildern, Caching, HTML-, JS- und CSS-Reduzierung, eine Skriptkompression, bspw. über Gzip, und die Optimierung des “above the fold“.

Ergebnis eines Google Page Speed Insights-Tests. Google gibt das Optimierungspotenzial zum einen mit einer farblich markierten Punktewertung zwischen 1 und 100 aus und zeigt zum anderen welche Bereiche konkret optimiert werden können.

Der Google Test ist recht selbsterklärend und bietet zudem umfassende Interpretations- und Lesehilfen. Seine Ergebnisse erlauben es Euch jedoch lediglich zu sehen an welchen Stellen das meiste Optimierungspotenzial besteht. Eine Bewertung dieser Optimierungspotenziale könnt Ihr erst dann seriös vornehmen, wenn Ihr wisst, wie gravierend der Einfluss des jeweiligen Punktes auf die Seitenperformance ist. Hierzu benötigt Ihr einen Performancetest.

Die Benutzeroberfläche von webpagetest.org. Man beachte, dass hier sowohl der Testserver, als auch der zu testende Browser eingestellt werden können.

Webpagetest.org misst tatsächlich den Website Speed

Der Test von webpagestest.org ist ein echter Performancetest. Das heißt er zeigt welche am Seitenaufbau beteiligten Komponenten wie schnell geladen werden, wie lange der Browser braucht, um sich mit dem Webserver zu verbinden und wie lange Server und Client auf Antwort voneinander warten müssen. Die Ergebnisse sind sehr umfangreich, daher werde ich an dieser Stelle nur auf den wichtigsten Bereich eingehen: Das Wasserfalldiagramm. 

Ausschnitt eines Wasserfalldiagramms am Beispiel von templatemonster.de. Im oberen Bereich befindet sich ein Notensystem für einen schnellen Überblick. In der Mitte werden nicht nur die Gesamtladezeit, sondern auch die einzelnen Ladezeiten für die “Time to First Byte”, den Start des Rendering und die wahrgenommene Ladezeit angezeigt. Darunter werden die einzelnen Datenpakete in chronologischer Reihenfolge dargestellt.

Im Wesentlichen sind die folgenden Werte besonders wichtig:

• Die Anzahl der HTTP-Requests (auch: Anzahl der zu ladenden Datenpakete)
• Die Time to First Byte
• Die Gesamtladezeit

Je weniger HTTP-Requests, desto besser

Ein HTTP-Request kommt immer dann zustande, wenn der Client – also der Browser – eine Anfrage an den Webserver stellt und ein Datenpaket anfordert. Damit sind die Requests ein indirekter Indikator für die Menge an zu übertragenden Daten. Als Faustregel gilt: Je weniger HTTP-Requests Eure Seite produziert, desto schneller lädt sie auch.

Anzahl und Ladezeit der Ressourcen kann häufig am einfachsten reduziert werden

Mit Ressourcen sind Bilder, CSS und JavaScript gemeint. Diese Inhalte, beziehungsweise deren Größe, werden von Google Page Speed Insights besonders häufig moniert. Probleme in diesem Bereich lassen sich jedoch schnell durch Plugins beheben. Dieser Artikel gibt einen guten Überblick über einfach zu bedienende Bildoptimierungstools. Für CSS und JavaScript stehen ebenfalls entsprechende Plugins zur Verfügung, die die Dateigröße der Ressourcen verringern und diese komprimieren. Ich empfehle Better WordPress Minify in Kombination mit Autoptimize.

Die Time to First Byte gibt die Servergeschwindigkeit an

Unter der Time to First Byte werden insgesamt drei Parameter zusammengefasst, die auch von den installierten Plugins und dem Theme beeinflusst werden. Erstens enthält dieser Wert die Zeit für die Clientanfrage an den Server. Die zweite Komponente ist die Verarbeitungszeit des Servers für diese Anfrage. Im ungecachten Zustand wird dieser Wert von der Art und Anzahl der Plugins und des Themes beeinflusst. Dritter Bestandteil dieses Werts ist die Antwortzeit des Servers an den Client.

Insgesamt gibt die Time to First Byte also an wie lange der Server braucht bis die ersten Datenpakete angefragt, verarbeitet und übertragen werden (darum ist der Serverstandort bei den Tests auch so wichtig). Dieser Wert also immens wichtig. Ist er bei deinem neuen Theme deutlich höher als beim alten, kann unter Umständen ein Wechsel des Hostingpakets oder des Hostinganbieters nötig werden.

Die Gesamtladezeit dient vor allem dem schnellen Direktvergleich

Webpagetest gibt Euch auch eine Gesamtladezeit aus. Diese wird in den Werten “Document complete” und “Fully loaded” ausgedrückt. Ersterer bezeichnet die Zeit bis zum vollständigen Download aller benötigten Daten durch den Browser. “Fully Loaded” meint hingegen die Zeit bis die Seite komplett aufgebaut ist.

Besonders wichtig ist die gefühlte Geschwindigkeit

Beide Werte eignen sich gut für den Direktvergleich von Themes. Dabei solltet Ihr aber unbedingt auch auf die gefühlte Geschwindigkeit achten. Diese wird in den Werten “Start Rendering” und “Visually Complete” angegeben. Je kleiner diese Werte sind, desto schneller wird die Seite von Besuchern empfunden. Wenn also das neue Theme dazu führt, dass sich die Werte “Start Rendering” oder “Visually Complete” erhöhen, dann kann es sein, dass das Theme als langsamer wahrgenommen wird, als das alte.

Fazit: Richtige Bewertung der Ladezeit ist entscheidend

Das Messen der Seitengeschwindigkeit nach einem Themewechsel oder Redesign ist meiner Meinung nach unabdingbar. Nur so könnt Ihr verstehen wie das neue Theme die Seitenladezeit beeinflusst. Bei der Bewertung für oder wider ein Theme solltet Ihr Euch nicht ausschließlich auf diese Zahlen verlassen. Denn wenn das neue Theme wichtige Funktionen bietet, die das alte nicht hatte, oder schlicht besser aussieht oder leichter zu verwalten ist, dann macht es unter Umständen Sinn auch einen Performanceverlust in Kauf zu nehmen.

Geht es jedoch um eine reine Geschwindigkeitsbewertung, solltet Ihr ganz genau auf die Werte achten, die Ihr hierfür heranzieht. Vor allem aber solltet Ihr einen Test wählen, der Euch auch die wirklich wichtigen Eckdaten ausgibt.