Sieben Tipps wie Sie die Ladezeit Ihrer WordPress-Seite verbessern

Um die Ladezeit etwas optimieren zu können, muss vorher erst mal analysiert werden, was noch nicht optimal ist. Oft haben selbst Seiten die perfekt optimiert scheinen, noch ungenutztes Potenzial. Dafür bietet der Markt inzwischen einige Tools, die innerhalb von Sekunden genau sagen können, wo noch Optimierungsbedarf besteht. Natürlich sollten Sie bei der Wahl Ihres Tools genau wissen, wie Sie diese anwenden und wonach Sie genau suchen müssen.

Wasserfalldiagramm

Um die Performance Ihrer WordPress-Seite verbessern zu können, sollten Sie sich die Ladezeiten der Unterseiten und Landingpages anschauen. Tools wie GTMetrix, Webpagetest oder Pingdom können Ihnen die benötigten Informationen liefern. Neben den ganzen anderen hilfreichen Informationen stellen diese Tools außerdem ein Wasserfalldiagramm zur Verfügung. Dieses Diagramm mag auf den ersten Blick unbedeutend wirken, gibt Ihnen aber einige nützliche und interessante Informationen. Es gibt Ihnen Aufschluss darüber, wie gut Ihr Hoster ist, wie schnell Ihre Seite lädt und wo noch Optimierungsbedarf besteht.
Sollten Sie bei Ihren Optimierungsmaßnahmen bisher auf Caching, Bildoptimierung, Komprimierung von CSS und JavaScript-Dateien und Hosting gesetzt haben, ist das schon eine gute Grundlage für die Performance Ihrer Seite. Dennoch bleiben mit den oben genannten Maßnahmen einige Lücken. Mithilfe des genannten Wasserfalldiagramms können Sie diese schließen. Das Diagramm zeigt Ihnen wie Ihre Seite bzw. die einzelnen Elemente laden und wie lange es dauert.

Wie lesen Sie ein Wasserfalldiagramm?

Wasserfalldiagramme können im ersten Moment ziemlich verwirrend aussehen: Es wird Ihnen ein ganzer Haufen Informationen geboten, den Sie erst mal durchblicken müssen. Doch kommt man einmal dahinter, bietet so ein Diagramm tolle Möglichkeiten. Mit diesen vier Informationen wird es für Sie ganz leicht, so ein Diagramm zu verstehen.

x-Achse

Wasserfalldiagramme sind chronologisch aufgebaut. An der x-Achse lässt sich ablesen, wann ein Element zu laden beginnt und wie lange es dauert, bis es fertig geladen hat. So können Sie feststellen, wo Ihnen Ladezeit verloren geht. Mit dieser Info wissen Sie nun, wo Sie noch optimieren können. Die x-Achse sollte den Wert nicht überschreiten.

y-Achse

Auf der y-Achse können Sie jeden HTTP-Request nachvollziehen. Außerdem bekommen Sie beim Klick auf die einzelnen Elemente detailliertere Informationen angezeigt.

Legende

Die Legende verrät Ihnen, welche Arten von Ressourcen geladen wurden. Die Darstellung variiert bei den verschiedenen Tools: Manche setzen auf Symbole und andere unterscheiden durch Farben.

Codiersystem

Ein zusätzliches Codiersystem verrät Ihnen außerdem, wie die einzelnen Anfragen ausgeführt werden. Unter anderem erfahren Sie hier auch, ob HTTPS angewandt wird und wie lange Ihre Seite benötigt, um eine Verbindung mit dem Server herzustellen.

Sieben Tricks die sich daraus für die Optimierung der Ladezeit ergeben

1. 1. Anzahl der Anfragen

   Je mehr Elemente die y-Achse aufweist, desto mehr Anfragen gibt es. Je mehr Anfragen, desto langsamer wird Ihre Seite. Das bedeutet für Sie, dass Sie entscheiden müssen welche Features eventuell weggelassen werden können. Doch die Anzahl der Anfragen ist nicht allein ausschlaggebend – auch HTTP/2 ist mitverantwortlich. Dieser kann Anfragen parallel bearbeiten und der Server sendet HTML-Dateien an den Browser. Das ist allerdings nur möglich, wenn Sie ein SSL-Zertifikat besitzen.
   Zur Orientierung können Sie sich merken, dass ca. ab 100 Requests Optimierungsbedarf besteht.

2. 2. Tatsächliche Ladezeit

   Beim Betrachten der x-Achse gibt der größte Wert Aufschluss darüber, ob Optimierungsbedarf besteht. Der Wert gibt die Zeit genau an, die Ihre Seite braucht, um komplett gerendert zu sein. Der Wert sollte unter 10 liegen.

3. 3. Gefühlte Ladezeit

   So wie bei der Temperatur gibt es auch bei der Ladezeit einen Unterschied zwischen der tatsächlichen und der gefühlten Ladezeit. Für die Besucher ist die tatsächliche Ladezeit irrelevant. Für sie ist es nur wichtig, ob es sich anfühlt, als müssten sie lange warten. Natürlich gilt es, die Nutzer zufriedenzustellen. Dieses Gefühl lässt sich auch optimieren. Voraussetzung hierfür ist optimales Caching oder eine Above-the-Fold-Optimierung. Auch das Wasserfalldiagramm gibt Ihnen Informationen über die tatsächliche und die gefühlte Ladezeit. Diese Information finden Sie versteckt zwischen den blauen und grünen Linien in dem Diagramm.
   Hat das erste visuelle Element auf Ihrer Seite geladen, können Sie das an der grünen Linie sehen. Die blaue Linie sagt aus, wann Ihre Besucher die Seite als vollständig wahrnehmen. Wartet der Besucher das Laden vollständig ab, ist die Wahrscheinlichkeit höher, dass er anschließend auch mit Ihrer Seite kommuniziert. Die beiden Linien sollten also bestmöglich weit links und nah beieinander sein.

4. 4. HTTP/2 vs. HTTP/1

   HTTP/2 bringt den Vorteil von schnelleren Ladezeiten mit. Natürlich ist das nur möglich, wenn Ihr Hoster das auch anbietet. Wie bereits oben erwähnt kann HTTP/2 mehrere Anfragen auf einmal verarbeiten. Das können Sie daran erkennen, dass auf der x-Achse mehrere Balken an einem Punkt erscheinen.

5. 5. Bilder trotz Optimierung häufig noch zu groß

   Bei ca. 30% aller Webseiten besteht Optimierungsbedarf bei den Bildern. Bilder sind neben dem Caching hauptverantwortlich für lange Ladezeiten. WordPress legt beim Upload eines Bildes weitere Dateien, wie Thumbnails oder Featured Images, an. Außerdem bietet das CMS einige Plug-Ins zur Optimierung von Bildern. Im Wasserfalldiagramm erkennen Sie die übermäßige Ladezeit von Bildern an den violetten Balken. Sind hier ein oder mehrere Balken länger, sollten die entsprechenden Bilder optimiert werden, um die Ladezeit zu verkürzen.

6. 6. Weiterleitungen

   Ein weiteres Element in dem Wasserfalldiagramm sind Weiterleitungen. Sie können dem Diagramm entnehmen, wie viele und wohin Sie Weiterleitungen eingerichtet haben. So können Sie erkennen, welche Weiterleitungen unnötig oder sogar schädlich sind.

7. 7. Fehler sofort erkennen

   Rot steht, wie in so vielen Fällen, auch hier für Fehler. Beispiele für Fehler sind zum Beispiel nicht richtig gerenderte Elemente wie AdSense Frames, Karten oder sogar Schriften auf Ihrer Seite. Außerdem werden die Fehler klar benannt und der Entstehungsort genannt.

Zusammenfassung

Betrachten Sie das Wasserfalldiagramm zu Ihrer Seite und stellen Sie sich dabei folgende Fragen:

• Ist das Diagramm zu lang (100 Anfragen oder mehr)?
• Gibt es auf der x-Achse einen Wert über 10?
• Können Anfragen über HTTP/2 geladen werden?
• Gibt es schlecht komprimierte Bilder?
• Befindet sich die blaue Linie zu weit rechts?
• Wie weit sind die blaue und die grüne Linie auseinander?
• Gibt es gelbe Zeilen, die auf schlechte Weiterleitungen hindeuten?
• Gibt es rot gekennzeichnete Fehlermeldungen?

Lesen Sie hier außerdem, welche Fehler häufig beim Retargeting gemacht werden.