Analysieren Sie Ihre Webseite in einfachen und schnellen Schritten 

Für die Optimierung von WordPress gibt es natürlich Google PageSpeed Insights und Co. Doch wir schauen heute genauer hin, da öfter Seiten, die perfekt optimiert scheinen, doch noch verstecktes Potenzial haben. 

Der Markt liefert ganz hervorragende Performance-Tools, die Ihnen in kürzester Zeit genau aufzeigen können, wo Sie noch Luft nach oben haben. Die Google-Tools Test My Site oder Google PageSpeed Insights geben Ihnen bei der Analyse umfangreiche Handlungsvorschläge. Allerdings muss man wissen, wie diese Tools anzuwenden sind und wonach man sich auf die Suche begeben muss.

Nicht mit Erfindungen, sondern mit Verbesserungen macht man Vermögen.

Henry Ford

Stiefkind Wasserfalldiagramm

Wenn man WordPress-Seiten sinnvoll optimieren möchte, dann sollten Sie sich mit den einzelnen Ladezeiten der Unterseiten oder auch Landingpages beschäftigen. Für die Informationen, wie Ihr Blog, Ihr Shop oder Ihre Unternehmensseite performt, sind beispielsweise die Tools GTMetrix, Webpagetest oder Pingdom relevant. Diese Tools beinhalten ein sogenanntes Wasserfalldiagramm, das leider nicht viel Beachtung findet, aber ganz interessante und nützliche Informationen ausgibt. Denn nichts kann so gut aufzeigen, wie gut Ihr Hoster ist, wie schnell Ihre Seite lädt und wo genau der Hase im Pfeffer liegt.

Wenn Sie Ihre Optimierungsmaßnahmen bis dato auf Ihr Caching, Ihre Bildoptimierung, das Komprimieren von CSS und JavaScript und Ihr Hosting ausgelegt haben oder schon auf CDN migriert sind, dann haben Sie schon eine gute Grundlage für Ihre Performance. Doch glauben Sie uns, es gibt versteckte Fallstricke. Hier kommt nun das Wasserfalldiagramm ins Spiel. denn dieses zeigt genau auf, wie Ihre Seite und vor allem die einzelnen Elemente laden und wie schnell das geht. Wir empfehlen und beschreiben auch am Beispiel von Webpagetest.

Wie lesen Sie ein Wasserfalldiagramm?

Ein Wasserfalldiagramm füttert Sie geballt mit Informationen und erscheint für Neulinge im ersten Moment recht unübersichtlich. Doch so schwer ist es gar nicht. Man muss vier Sachen verstehen, um hinter die Datensätze schauen zu können:

X-Achse

Ein Wasserfalldiagramm besitzt einen chronologischen Aufbau. Die X-Achse zeigt auf, wann genau ein Element mit dem Laden beginnt und welche Zeit es dafür benötigt. Somit wissen Sie genau, wo Ihnen Ladezeit verloren geht. Parallel wissen Sie, wo genau auf der Seite nun Optimierungsbedarf besteht. Die X-Achse sollte den Wert 10 nicht überschreiten. 

Y-Achse

Die Y-Achse hält jeden HTTP-Request fest. Hier gibt es oft die Möglichkeit, das man die einzelnen Elemente anklicken kann, um an detailliertere Informationen zu kommen.

Legende

Hier erhalten Sie die Auskunft, welcher Ressourcen-Typ geladen wurde. Manche Plugins benutzen hierfür Symbole, mache unterscheiden farblich.

Codiersystem

Wie die einzelnen Anfragen ausgeführt werden, darüber erhalten Sie Aufschluss über ein zusätzliches Codiersystem. Das weist unter anderem aus, wie lange Ihre Seite benötigt, um sich mit dem Server zu verbinden. Sie erfahren auch, ob HTTPS angewendet wird.

7 Erkenntnisse und Hacks für Optimierungen

1. Anzahl der Anfragen

Umso mehr Elemente auf Ihrer Y-Achse erscheinen, desto mehr Anfragen. Diese machen Ihre Seite langsamer. Nun müssen Sie überlegen, auf welche Features Sie nicht verzichten können. Auch HTTP/2 ist mitverantwortlich, dass die Anzahl nicht allein ausschlaggebend ist, denn hier können Requests parallel bearbeitet werden und Ihr Server sendet HTML-Dateien an den Browser. Für diese Vorteile müssen Sie allerdings ein SSL-Zertikikat besitzen.

Über den Daumen gepeilt kann man als Orientierungsgröße sagen, dass ab 100 aufgelisteten Requests Optimierungspotenzial besteht.

2. Tatsächliche Ladezeit

Wenn Sie Ihre X-Achse betrachten, gibt Ihnen der größte ausgewiesene Wert Aufschluss. Dieser zeigt Ihnen genau die Zeit auf, die Ihre Webseite benötigt, um komplett gerendert zu sein. Hier geben wir Ihnen den Richtwert, dass ab einer maximalen Ausprägung von 10 Ihre Seite zu langsam lädt. Bringen Sie den Wert unter 10.

3. Gefühlte Ladezeit

Es gibt einen Unterschied zwischen der tatsächlichen und gefühlten Ladezeit. Und genau auf diese kommt es Ihren Nutzern an. Also müssen Sie auch auf das Gefühl der Besucher Rücksicht nehmen. Tatsächlich können Sie auch dieses Gefühl optimieren. Voraussetzung bildet hier ein optimales Caching oder eine Above-the-Fold-Optimierung, aber auch das Wasserfalldiagramm kann eine Unterscheidung zwischen der tatsächlichen und der gefühlten Ladezeit treffen. Diese finden Sie versteckt zwischen den blauen und grünen Linien in Ihrem Wasserfalldiagramm.

Wenn das erste visuelle Element auf Ihrer Seite geladen ist, sehen Sie das an der grünen Linie. Die blaue Linie gibt an, wann Ihr Besucher die Seite als komplett geladen wahrnimmt. Hat er das Laden quasi durchgehalten, haben Sie eine vielfach höhere Wahrscheinlichkeit, dass der Besucher mit Ihrer Seite kommuniziert. Das heißt also, dass die Linien möglichst links liegen und der Abstand dazwischen idealerweise gering ist.

4. Vorteil von HTTP/2 zu HTTP/1

HTTP/2 hat den entscheidenden Vorteil wesentlich schneller zu laden. Voraussetzung ist, dass Ihr Hoster dieses auch bereitstellt. Hier herrscht oft Unklarheit bei den Webseitenbetreibern. Ein Trumpf von HTTP/2 ist, dass es mehrere Anfragen gleichzeitig bearbeiten kann. Und genau diese sind im Diagramm zu erkennen, indem hier mehrere Balken am gleichen Punkt der X-Achse erscheinen.

5. Trotz Optimierungen: Bilder oft noch zu groß

Bei ungefähr 30 Prozent aller Webseiten besteht noch Potenzial im Optimieren der Bilder, auch wenn man davon ausgeht, hier schon alles in die Wege geleitet zu haben. Doch Bilder sind neben dem Caching hauptentscheidend für die Ladezeit. Wenn Sie ein Bild hochladen, dann legt WordPress weitere Dateien an (Thumbnails oder Featured Images). WordPress bietet eine Reihe Bildoptimierungs-Plugins. Das Wasserfalldiagramm zeigt Ihnen eine übermäßige Ladezeit (Webpagetest) mit violetten Balken an. Sind hier jetzt hier ein oder mehrere der Balken länger, dann ist hier deutlich, dass Sie optimieren / komprimieren müssen, um Ihre Seitenladezeit zu verringern.

6. Wohin gehen Ihre Weiterleitungen?

Ein Wasserfalldiagramm gibt Ihnen Aufschluss darüber, wie viele Weiterleitungen Sie eingerichtet haben und wo diese hinweisen. Denn Anfragen mit Weiterleitungen werden farblich akzentuiert. Sie sehen also, wie viele Weiterleitungen sie eingerichtet haben und wohin diese führen. Weiterleitungen werden gelb angezeigt und Sie können hier nicht nötige oder auch schädliche Weiterleitungen aufspüren.

7. Fehler auf einen Blick erkennen

Alles, was im Diagramm rot erscheint, weist einen Fehler aus. Das mag sein, wenn manche Elemente nicht richtig gerendert sind, beispielsweise AdSense Frames oder eventuell auch Karten auf der Webseite oder sogar Schriften. Das Diagramm sagt Ihnen auch genau, welcher Fehler im Spiel ist und wo er entsteht.

Fazit in Kürze

  • Ist Ihr Diagramm zu lang, d. h. über 100 Anfragen?
  • Weist Ihre X-Achse ein Maximum über 10 aus?
  • Anfragen können über HTTP/2 parallel geladen werden?
  • Haben Sie noch schlecht komprimierte Bilder?
  • Befindet sich die blaue Linie zu weit rechts?
  • Sind die blaue und die grüne Linie zu weit auseinander?
  • Tauchen gelbe Zeilen für schlechte Weiterleitungen auf?
  • Haben Sie rot angezeigte direkte Fehlermeldungen?

Ein Wasserfalldiagramm kann Ihnen dabei helfen, Ihre WordPress-Webseite schnell auf ihren Optimierungsbedarf zu testen und auch dabei, wertvolles Potenzial zu erkennen und umzusetzen.

0 Kommentare

Beitrag kommentieren

Wir freuen uns auf Ihr Feedback!

Schreibe einen Kommentar

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

Diesen Beitrag bewerten