WordPress-Performance optimieren: Drehen Sie an diesen Schrauben!

Die WordPress-Performance optimieren – immer wieder ein relevanter Punkt bei unseren Kunden: Wie reduziere ich meine Seitenladezeit? Das Internet ist voll von guten Ratschlägen, doch uns als WordPress-Agentur fällt immer wieder auf, dass bei der Reihenfolge der Maßnahmen oft Planlosigkeit herrscht. Welchen Schritten muss man welche Relevanz zuordnen? Wir versuchen hier etwas Logik in die Reihenfolge der Optimierungen zu bringen, sodass Sie schnell zum gewünschten Erfolg gelangen.

Erst einmal vorab: Den größten Gewinn bei der Ladezeit erreichen Sie mit leicht umzusetzenden Methoden. Sie müssen sich nicht als erstes von den Google PageSpeed Insights verwirren lassen. Eine Ladezeitoptimierung führt zu einer besseren User Experience und erhöht zudem Ihre Sichtbarkeit bei Google. Die ersten Schritte, die wir Ihnen empfehlen, sind allerdings auch die Schritte, die Ihnen bei den Insights zur Verbesserung vorgeschlagen werden.

Es ist nicht genug zu wissen, man muss auch anwenden; es ist nicht genug zu wollen, man muss auch tun.

Johann Wolfgang von Goethe

Tipp 1: Caching

Hierbei handelt es sich um den wichtigsten Punkt bei Optimierung Ihrer WordPress Performance überhaupt. Chaching heißt, dass Ihre Webseite nicht erst beim Server angefragt werden muss und sich danach in Schritten aufbaut. Ihre Webseite befindet sich in einem Zwischenspeicher, sodass man sie aus diesem direkt fertig gerendert aufrufen kann. Da WordPress nun nicht jedesmal bei einem Aufruf die Seite neu berechnen muss, was auch gerade bei PHP (auf das WordPress basiert) elementar wichtig ist.

Möglichkeit 1: Caching-Plugin
Die meisten Nutzer haben ein Plugin, die man allerdings auch installieren können muss. Es gibt W3 Total Cache oder WP Super Cache – bei beiden ist etwas Programmierarbeit nötig. Gerne sind wir Ihnen als Agentur für die Digitalisierung Ihrer Unternehmensprozesse bei der Programmierung behilflich.

Möglichkeit 2: Caching über Ihren Hoster
Es besteht auch die Möglichkeit ein Caching über den Server zu konfigurieren. Hier können Sie dann auf Plugins verzichten.

Tipp 2: Schaffen Sie Ordnung

Wenn Kunden wegen eines Relaunches / Redesigns zu uns kommen, dann fällt uns bei einer ersten Analyse immer wieder auf, dass die bestehende WordPress-Installation viel zu überladen ist. Das bedeutet, es sind Plugins installiert, die nicht wirklich erforderlich sind.

Unsere WordPress-Programmierer räumen diese Plugins auf, säubern das Template und die optimieren die Datenbank. Sie auf – denn je weniger Plugins Sie haben, desto schneller ist Ihre Seite. Hinsichtlich der WordPress-Plugins ist von besonderer Bedeutung, diese auch zu löschen, nur deaktivieren genügt nicht. Denn dann wird trotzdem noch PHP-Code ausgeführt. Und beschränken Sie sich auf ein Theme, man benötigt so gut wie nie mehrere. Dieser Punkt wird übrigens nicht in den Insights erwähnt…

Tipp 3: Optimieren Sie unbedingt Ihre Bilder

Immer wieder gesagt und immer wieder vergessen: Komprimieren Sie Ihre Bilder! Diese machen in den meisten Fällen die größte Datenmenge einer Webseite aus. Also liegt hier eines der am einfachsten und effektivsten umzusetzenden Potenziale zur Verringerung Ihrer Ladezeit.

Bilder können Sie manuell komprimieren oder aber Sie verwenden ein Compression-Plugin. Ein Plugin komprimiert nicht nur neue Bilder, sondern auch deren Thumbnails und es bedient auch alle vorhandenen Bilder automatisch mit.

Tipp 4: Kümmern Sie sich um CSS und Java Script

Klingt technisch, ist aber eigentlich nicht schwer zu optimieren. Es handelt sich um drei essenzielle Schritte, die Sie hier vornehmen müssen. Bedenken Sie dabei, dass wir bei diesem Thema von der zweitgrößten Datenmenge auf Ihrer Internetseite nach den Bildern reden.

Fassen Sie zuerst die einzelnen Dateien zusammen, denn das verringert die zu ladenden Dateien und somit auch die der Requests. Dafür gibt es ein Plugin.

Danach sollten Sie den Code reduzieren. Menschen benötigen zum Schreiben und Verstehen des Codes mehr als Computer. Plugins wie „Autoptimize“ können von für Menschen lesbaren Code in nur für Maschinen lesbaren Code umwandeln und Ihre Performance erhöhen.

Tipp 5: Komprimieren der Datenpakete

Die Datenpakete, die Sie an den Browser Ihrer Webseitenbesucher senden, sollten möglichst klein sein. Dafür muss Ihr Server die Größe der Datei bei einem Request minimieren, bevor der Browser die Daten entpackt und berechnet. Dies gibt Ihnen nochmals einen „Boost“ Ihrer Seitenladezeit.

Sie können dies über Caching-Plugins einrichten, es gibt manuelle Möglichkeiten oder Ihr Hoster hat das schon in seinen Serveraktivitäten hinterlegt. An dieser Stelle können wir versichern, dass Sie schon die entscheidendsten Schritte für eine deutlich bessere Performance unternommen.

Tipp 6: Prüfen Sie Ihr Hosting

Wenn Sie die oben erwähnten Schritte alle unternommen haben und Ihre Geschwindigkeit immer noch zu wünschen übrig lässt, dann könnte das an Ihrem Hosting liegen. Und zwar daran, dass Ihr Hoster es nicht möglich machen kann, WordPress zu optimieren. Achten Sie für performantes Hosten auf die aktuelle PHP-Version, auf ein PHP Memory-Limit von mindestens 64 MB, darauf, dass das Rechenzentrum in Deutschland liegt und Ihnen eine SSD-Festplatte zur verfügung steht sowie ein kostenloses SSL-Zertifikat und HTTP/2.

Tipp 7: Falsche Ladereihenfolge

Bei den Google PageSpeed Insights wird immer wieder auf eine Reihenfolge beim Laden hingewiesen, die das Rendern ausbremst. Beispielsweise entsteht ein Slider durch Bilder, die mit einem Animationsbefehl zum Rotieren gebracht werden. Falls nun zuerst der Befehl vor den Bildern erscheint, ist der Slider zuerst als Funktion ohne Bilder angelegt. Tauschen Sie hier die Reihenfolge.

Tipp 8: Optimieren der gefühlten Ladezeit

Zwischen der tatsächlichen Ladezeit und der Zeit, in der der Besucher die Seite wahrnimmt, können kleine Tricks den Eindruck beschleunigen, dass die Seite schon geladen ist, im Hintergrund aber noch fleißig gerechnet wird. Optimieren Sie „Above th Fold“, d. h., dass der erste sichtbare Bereich mit priorisierten Inhalten und Funktionen punktet.

Tipp 9: Zu große Datenbank

Auch eine Datenbank kann zu groß werden und die Ladezeit ausbremsen. Mit dem Plugin WP-Optimize haben Sie Ihre Datenbank im Griff.

Tipp 10: Verhindern Sie Hotlinking

Wenn irgendjemand auf ein Bild verlinkt, das auf Ihrem Server liegt und quasi Ihre Bandbreite klaut, oder auch pdf-Dateien von Ihnen verlinkt, dann nennt man das Hotlinking. Dies können Sie durch bestimmt Blockaden, die Sie in Ihren Code schreiben, verhindern.

Es geht bei der Optimierung Ihrer Ladezeit hauptsächlich um eine Reduktion der Webseitengröße, des HTTP-Requests, eine Komprimierung der Datenpakete und last but not least um die Optimierung Ihrer User Experience. Doch wie können Sie Optimierungspunkte an Ihrer Webseite ganz schell und einfach erkennen? Wir verraten es Ihnen.

Das Wasserfalldiagramm: Analysieren Sie Ihre Webseite in einfachen und schnellen Schritten

Für die Optimierung Ihrer WordPress Performance 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 zur Performancesteigerung

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. Ihre WordPress-Webseite hat Optimierungsbedarf? Dann sind wir Ihr Ansprechpartner. Als WordPress-Agentur mit über 10 Jahren Erfahrung in der Entwicklung neuer und Optimierung bestehender WordPress-Webseiten sind wir Ihre Experten.

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