WordPress optimieren: So analysierst du deine Webseite in 7 Sekunden

Willst du WordPress optimieren, sind einige Maßnahmen glasklar, altbekannt und bewährt wirkungsvoll. Doch auch vermeintlich durchoptimierte Seiten haben häufig noch Potenzial. Deshalb lohnt es sich über den Tellerrand von Google PageSpeed Insights und Co zu schauen. Denn viele Performance-Tools liefern wahre Daten-Goldgruben, die eine sehr umfangreiche Analyse ermöglichen – wenn man weiß, wonach man suchen muss. Ich zeige dir heute 7 Tipps, mit denen die Analyse in nur 7 Sekunden gelingt.

Einfache Performance-Tools wie Googles Test My Site oder Google PageSpeed Insights werfen als Ergebnis vor allem eine Liste von Handlungsempfehlungen aus. Das mag für den Anfang in Ordnung sein. Wenn du deine WordPress Projekte aber effizient überwachen und WordPress sinnvoll optimieren willst, solltest du früher oder später auf ein Performance-Tool zurückgreifen, das auch die Ladezeit deiner Seite ausgibt und dir genau zeigt, wie sich dein Blog, dein Shop, deine Unternehmensseite beim Laden verhält.

Dazu zählen zum Beispiel Pingdom, GTMetrix oder Webpagetest. Diese liefern oft ein sogenanntes Wasserfalldiagramm mit. Diese etwas sperrigen Datensätze werden von vielen Nutzern kaum beachtet. Wenn du aber professionell mit WordPress arbeitest, solltest du verstehen, wie sie funktionieren. Denn: Es gibt keine andere Datenquelle, die dir zeigt, wie schnell deine Seite lädt, wie gut dein Hoster ist, wie effizient deine Seite lädt und wo sich die Baustellen deiner Seite befinden.

Und mit ein bisschen Übung kannst du auf einen Blick und in (handgestoppten) 7 Sekunden jede Seite analysieren 😉

Wie das gehen soll? Das zeige ich dir heute Schritt für Schritt!

WordPress optimieren: Ohne Wasserfalldiagramm kratzt du nur an der Oberfläche

Vielleicht fragst du dich jetzt: Wozu eigentlich der ganze Aufwand? Es gibt doch tolle Performance-Tools, die mir bereits alle wichtigen Optimierungsmaßnahmen anzeigen. Außerdem beschränkt es sich ohnehin meist auf die folgenden Punkte:

• Caching: Entweder serverseitig oder per Plugin
• Bildoptimierung: Siehe hierzu z.B. unseren Plugin-Vergleich.
• CSS und JavaScript komprimieren und zusammenfassen
• Hosting
• CDN

Klar, wenn du diese Punkte abgeklärt und optimiert hast, hast du eine sehr gute Grundlagen für eine wirklich schnelle Seite geschaffen. Deswegen werden diese Gründe (völlig zu recht) in eigentlich allen guten Performance-Leitfäden behandelt.

Zum Beispiel

• Der umfassende WordPress Performance Guide von Hootproof
• Vom Trabbi zum Porsche – 7 Tricks, wie du WordPress schneller machen kannst von WP-Ninjas
• 13 Maßnahmen, wie du WordPress für hohe Last fit machst von unserem Head of Produkt Matthias.

Und auch bei den häufigsten Ladezeitbremsen von WordPress-Seiten landen diese Gründe immer wieder auf den vordersten Plätzen.

Unsere Erfahrung aus hunderten systematischen Performance-Analysen mit Webpagetest und ausgiebigen Sitechecks zeigt aber: Auch in vermeintlich “durchoptimierten” WordPress Seiten finden sich immer wieder Performance-Fallstricke. Und genau hier hilft das Wasserfalldiagramm. Denn es kann etwas Besonderes: Es zeigt dir wie deine Seite lädt, welche Elemente geladen werden und wie schnell das ganze vonstatten geht.

So kommst du ran an den Datenschatz

Alle guten Performance-Analysen geben auch Wasserfalldiagramme aus. Nutzt du beispielsweise die Pingdom Tools, musst du nur weit genug nach unten scrollen.

Um all diese Informationen aber richtig erfassen zu können, musst du verstehen, wie man Wasserfalldiagramme richtig liest.

So liest du Wasserfalldiagramme richtig

Die geballte Informationsdichte führt dazu, dass Wasserfalldiagramme nicht gerade für ihre Übersichtlichkeit bekannt sind. Tatsächlich musst du aber nur vier Dinge wissen, um die Datensätze zu verstehen:

1. Auf der X-Achse wird die Zeit abgetragen.
   Wasserfalldiagramme sind chronologisch aufgebaut: Anhand der X-Achse kannst du genau ablesen, wann ein Element zu laden beginnt und wie lange es dazu braucht. Gerade dieser chronologische Aufbau macht ein Wasserfalldiagramm so wertvoll. Denn so siehst du genau, wo Ladezeit verloren geht und an welchen Prozessen du ansetzen musst, um deine Ladegeschwindigkeit zu optimieren.
   
2. Auf der Y-Achse wird jeder HTTP-Request festgehalten.
   Bei den meisten Wasserfalldiagrammen kannst du die Elemente auf der Y-Achse anklicken, um zusätzliche Informationen darüber zu erhalten.
   
3. Eine Legende zeigt an, welche Art von Ressource geladen wird.
   Webpagetest markiert HTML, CSS, Bilder, Flash etc. farblich, Pingdom benutzt hierfür Symbole.
   
4. Ein zusätzliches Codiersystem gibt Aufschluss darüber, wie einzelne Anfragen ausgeführt werden – etwa, wie lange es braucht, um sich mit dem Server zu verbinden oder ob HTTPS eingesetzt wird.

WordPress optimieren mit der 7 Sekunden Analyse

Jetzt ist also klar, wie du ein Wasserfalldiagramm liest – aber welche Erkenntnisse kannst du daraus ziehen?

Bei der Performance-Analyse hat sich bei uns die 7 Sekunden Analyse bewährt: Das Diagramm gibt dir auf nur einen Blick Aufschluss über sieben wichtige Faktoren für die Ladegeschwindigkeit. Diese sieben Hacks helfen dir, genau zu verstehen, wie und wie schnell deine Webseite gerendert wird. Und sie zeigen, wo Potenzial besteht, um sie schneller zu machen, Probleme zu beheben oder weiter zu verbessern.

Tipp #1: Auf die Größe kommt es an

Je länger der Wasserfall ist (also je mehr Elemente auf der Y-Achse abgetragen werden), desto mehr Anfragen müssen bearbeitet werden und desto langsamer lädt die Seite. Trotzdem muss ein langer Wasserfall nicht zwingend schlecht sein. Es gibt Features und externe Ressourcen, auf die du schlicht nicht verzichten kannst oder möchtest. Bei uns ist beispielsweise der Live-Chat ein solches Tool. Das Laden des Chatprogramms verlangsamt natürlich unsere Seite. Allerdings ist der schnelle Support über den Chat ein zentraler Bestandteil unseres Hostings. Verzichten können wir auf das Plugin also nicht.

Auch HTTP/2 sorgt dafür, dass der bloßen Anzahl an Requests nicht mehr dieselbe Bedeutung zukommt, wie noch vor ein paar Jahren.

Denn mit dem neuen Webstandard können Requests gleichzeitig bearbeitet werden, statt wie zuvor nacheinander. Darüber hinaus schickt der Server unter HTTP/2 bereits vorsorglich HTML-Dateien an den Browser. Der neue Standard kompensiert also Nachteile, die dir eventuell aus einer großen Anzahl von HTTP-Requests entstehen. Um von HTTP/2 zu profitieren, muss deine Webseite allerdings über HTTPS geladen werden, also über ein SSL-Zertifikat verfügen.

Ohnehin hat bei uns die Erfahrung gezeigt, dass keine direkte Korrelation zwischen der Länge eines Wasserfalls und der tatsächlichen Ladegeschwindigkeit besteht. Zumindest bis zu einem gewissen Limit: Bei deutlich über 100 Anfragen gibt es in den meisten Fällen durchaus Einsparpotenzial.

Wenn deine Webseite diese Schwelle überschreitet, solltest du dich einmal en Detail mit deinen HTTP-Requests auseinandersetzen. Unserer Startseite lädt bspw. mit über 130 HTTP-Requests. Hier gibt es also Optimierungspotenzial.

Wenn dein Wasserfall mehr als 100 Anfragen enthält, schau dir genau an, auf welche davon du verzichten kannst.

Tipp #2: Ladezeit erkennen

Der maximale Wert auf deiner X-Achse ist essentiell für die Analyse der Ladegeschwindigkeit: Hier kannst du ablesen, wie viel Zeit verstreicht, bis deine Webseite komplett gerendert ist. Je kleiner dieser Wert ausfällt, desto besser.

Wenn der maximale Wert deiner X-Achse über 10 liegt, solltest du dich definitiv mit der Ladegeschwindigkeit deiner Seite auseinandersetzen.

Die Gesamtladezeit deiner Seite sollte unter 10 Sekunden liegen

Tipp #3: Gefühlte Ladezeit erkennen

Den meisten Usern ist es ziemlich egal, welche Werte Analyse-Tools ausspucken. Das einzige, was für sie zählt, ist: wie schnell lädt die Seite gefühlt.

Für dich als Seitenbetreiber kommt es deshalb darauf an, dieses Gefühl von Geschwindigkeit so weit zu verbessern, wie möglich. Das erreichst du etwa durch optimales Caching, eine Above-the-Fold-Optimierung oder – wenn deine Kunden im Ausland sitzen – den Einsatz eines Content Delivery Networks (CDN).

Glücklicherweise kommt man aber auch dieser gefühlten Ladezeit über Wasserfalldiagramme sehr gut auf die Schliche. Unseres Wissens nach ist Webpagetest das einzige kostenlose Tool, das zwischen der technisch gemessenen Ladezeit und der vom User wahrgenommenen Ladezeit unterscheidet.

Das gesamte Diagramm stellt die – weniger wichtige – technische Ladezeit dar. Die gefühlte Ladezeit versteckt sich zwischen den blauen und grünen Linien im Diagramm.

Die grüne Linie gibt an, wann das erste visuelle Element der Webseite geladen wird (man spricht hier vom “Start Render”-Punkt). Die blaue Linie gibt Aufschluss darüber, wann der User die Seite als vollständig geladen wahrnimmt – ab diesem Punkt steigt die Wahrscheinlichkeit erheblich, dass er mit der Seite interagiert. Diese beiden Linien sollten so weit links und so nah beieinander wie nur möglich sein.

Webpagetest ist das einzige Tool, das dir diese Daten liefert. Von den Pingdom Tools oder GTMetrix ist uns das nicht bekannt. Diese Regel gilt deshalb nur, wenn du Webpagetest nutzt:

Die grüne Linie sollte nach rund 2 bis 3 Sekunden erscheinen, die blaue Linie nach spätestens 7 Sekunden.

Tipp #4: HTTP/2 vs. HTTP/1

HTTP/2 bietet im Vergleich zu HTTP/1 einen entscheidenden Vorteil: Mit dem neueren Webstandard laden Seiten wesentlich schneller. Allerdings bist du, neben einem SSL-Zertifikat, auch darauf angewiesen, dass dein Hoster dir diesen Service bereitstellt. Viele Seitenbetreiber sind sich aber darüber im Unklaren, ob das bei ihnen tatsächlich der Fall ist oder nicht.

Einer der größten Vorteile von HTTP/2 ist die gleichzeitige Verarbeitung mehrerer Anfragen. Und genau diese kannst du deutlich in deinem Wasserfalldiagramm erkennen. Da hier die Anfragen ja chronologisch abgetragen werden, beginnen mehrere Balken am gleichen Punkt der X-Achse, wenn HTTP/2 zum Einsatz kommt.

Laden einzelne Requests parallel, läuft deine Seite mit HTTP/2.

Tipp #5: Zu große Bilder erkennen

Bei rund 30 Prozent der Webseiten, die wir analysieren, finden wir noch Potenzial in puncto Bildgröße. Und das, obwohl die meisten Webmaster davon ausgehen, hier schon das Optimum rausgeholt zu haben.

Bilder sind – unserer Erfahrung nach – nach dem Caching der wichtigste Faktor der Seitenladezeit. Für jedes Bild, das du im Backend hochlädst, legt WordPress automatisch eine ganze Reihe weiterer Dateien, die Thumbnails oder Featured Images, an. Die richtige Komprimierung dieser Dateien ist eine der effektivsten Methoden, die Größe und damit Ladegeschwindigkeit deiner Seite zu reduzieren.

Wie du deine Bilder vernünftig optimierst zeigen dir zum Beispiel:

• WPMU DEV: “How To Properly Compress And Resize Images For WordPress“
• Unser Vergleich von 5 Bildoptimierungs-Plugins für WordPress
• Der Plugin-Hersteller Optimus erklärt die grundlegenden Unterschiede zwischen lossy und lossless compression

Im Wasserfalldiagramm lassen sich Bilder anhand der Legende schnell identifizieren: Webpagetest stellt sie mit violetten Balken dar, Pingdom mit einem Icon. Nur GTMetrix zeichnet Bilder nicht separat aus. In jedem Fall gilt: Sind die entsprechenden Balken wesentlich länger als die Balken der restlichen Requests, deutet das auf eine lange Bildladezeit hin.

In einem solchen Fall wie oben, solltest du dir deine Bilder also einmal ganz genau ansehen. Durch einen Klick auf den entsprechenden Request, kannst du dir in einem Wasserfalldiagramm meist ganz genau anzeigen lassen, um welche Dateien es sich handelt. Das erleichtert die Suche nach Ladezeitbremsen ungemein.

Lange Ladebalken für Bildressourcen weisen auf Komprimierungspotezial hin.

Tipp #6: Weiterleitungen aufspüren

Ein Wasserfalldiagramm hilft dir nicht nur dabei zu verstehen, welche Elemente wann und wie schnell geladen werden, sondern auch, wie viele Weiterleitungen eingerichtet wurden und wo diese hinzeigen.

Anfragen mit Weiterleitungen werden normalerweise farblich hervorgehoben. Das Diagramm gibt dir zusätzlich Aufschluss darüber, welche Weiterleitung eingerichtet ist und wo sie hinführt.

Mit einem Wasserfalldiagramm erkennst du also auf einen Blick, wie viele und welche Weiterleitungen gesetzt wurden. Das hilft übrigens auch beim Aufspüren von Weiterleitungsschleifen nach einer DNS-Änderung. Dank der gelben Markierungen konnten wir schon mehrfach unnötige oder sogar schädliche Weiterleitungen aufdecken.

Gelbe Zeilen markieren Weiterleitungen.

Tipp #7: Fehler auf einen Blick erkennen

Gelegentlich kommt es vor, dass Elemente einer Webseite nicht richtig gerendert werden. Das kann zum Beispiel AdSense-Frames, aber auch eingebundene Karten und Schriften betreffen.

In diesem Fall wirft das Wasserfalldiagramm eine Fehlermeldung aus und markiert die Zeile mit der betreffenden Anfrage rot. Außerdem gibt das Diagramm an, um welchen Fehler es sich dabei handelt und welche Ressource den Fehler produziert.

Rote Zeilen zeigen Fehler beim Rendern der Seite an.

Mit dem Cheat-Sheet alle Tipps im Blick

Ein Wasserfalldiagramm ist vermutlich die wertvollste Auswertung, die du für deine WordPress-Seiten erhalten kannst. Hier werden diverse Daten kombiniert, die du als Seitenbetreiber im Auge behalten solltest: Die Ladezeiten, die Reihenfolge des Renderns und Fehlermeldungen. Gewappnet mit den Tipps aus diesem Artikel erkennst du schnell und effektiv, wo noch Optimierungspotenzial zu heben ist:

• Ist der Wasserfall zu lang (über 100 Anfragen)?
• Ist der Maximalwert der X-Achse zu groß (größer als 10)?
• Laden Anfragen parallel (via HTTP/2)?
• Sind die Bilder zu groß (die Bilder also schlecht optimiert)?
• Sind die grüne und die blaue Linie zu weit rechts oder zu weit auseinander (nimmt der User die Seite also als langsam wahr)?
• Gibt es unerwartete gelbe Zeilen (Weiterleitungen)?
• Gibt es rote Zeilen (Fehler)?

Zugegeben: Beim ersten Mal wirst du für diese Analyse vielleicht noch länger brauchen. Mit etwas Erfahrung ermöglichen es dir Wasserfalldiagramme aber, deine WordPress Projekte wesentlich besser zu verstehen und gründlicher zu optimieren.