Skip to main content

WordPress PageSpeed Optimierung: So machst du WordPress raketenschnell

Wie oft bist du auf Webseiten gewesen und hast dir gedacht „Lade endlich fertig!“? Bestimmt schon des Öfteren, korrekt? Hast du aber auch deine Webseite auf den PageSpeed überprüft? Willst du diesen ebenfalls erhöhen? Wenn ja, dann solltest du den Artikel weiterlesen. Hier werden die einzelnen Schritte beschrieben, wie du deinen Blog – insbesondere auf WordPress Basis – schneller machen kannst und somit deinen PageSpeed verbesserst.

Inhaltsverzeichnis

 

Wieso ist PageSpeed so wichtig?

PageSpeed - ZeitBevor mit den tatsächlichen Doings zur Verringerung der Ladezeit begonnen werden kann, möchte ich die Frage in den Raum stellen, „Wieso PageSpeed so wichtig ist!“. Wie zu Beginn schon angeregt, stelle dir vor, du liest eine interessante Überschrift oder suchst nach etwas Bestimmten und wirst zunächst laut den Suchergebnissen fündig. Du klickst auf diese Webseite, bzw. das Suchergebnis und die Seite ladet zunächst eine gewühlte Ewigkeit, so ca. 5 Sekunden. Wie reagierst du darauf? Bleibst du auf der Webseite und lässt diese zu Ende laden oder verlässt du sie und wählst ein anderes Suchergebnis aus?

In der Tat verlassen viele User die Webseite, noch bevor diese zu Ende geladen hat, wenn die Ladezeit zu hoch ist. Denn niemand wartet wirklich gerne, vor allem in der Zeit, wo schnelles Internet sich ausbreitet, wenn auch nicht überall. Dennoch erhalten wir viele Informationen von allen Seiten, welche wir nicht mehr verarbeiten können. Deshalb ist es nur umso verständlicher, dass wir aufgrund der zahlreichen Fülle an Informationen nicht noch lange warten wollen und unsere kostbare Zeit mit zu langen Ladezeiten verplempern möchten.

Schon allein aufgrund der User Experience ist eine niedrige Ladezeit sehr wichtig. Wenn du also deine Conversion Rate und Bounce Rate verbessern, bzw. verringern möchtest, dann solltest du die Ladezeit deiner Webseite prüfen und diese ggf. optimieren. Dazu auch ein Video von Matt Cutts von Google:

 

Was hat PageSpeed mit SEO zu tun?

Auf die Frage „Was PageSpeed und SEO gemein haben“ kann man nur sagen „mehr als du denkst“. Das Ziel von Google ist es, den Usern relevante Suchergebnisse anzubieten mit Webseiten, welche den Usern einen Mehrwert bieten. Dabei ist der Mehrwert nicht nur in Form von Content zu sehen, sondern auch von der Usability. Und zu einer guten Usability gehört eben auch eine niedrige Ladezeit der Webseite dazu.

Außerdem, wenn die Ladezeit deiner Seite zu lange ist (ab 2 Sekunden), dann frisst dies auch die Ressourcen von Google und anderen Suchmaschinen, bzw. beansprucht diese stärker als andere Webseiten mit niedriger Ladezeit. Es ist oft so, dass Webseiten, welche niedrigere Ladezeiten haben, sich auch eher in den vorderen Rankings befinden.

 

Tools zur Ladezeit Überprüfung

Um zu erfahren, wie der PageSpeed der eigenen Webseite ist, ist es wichtig, diese zu messen. Außerdem ist es von Vorteil zu wissen, an welchen Stellen es klemmt und was genau die Ladezeit so hoch erscheinen lässt. Um nicht mit der Stoppuhr die Seitenladezeit zu messen und anschließend alles von Hand zu überprüfen, gibt es eine Reihe Tools, welche dir dabei helfen, den PageSpeed zu erfahren, sowie die Stellen, welche blockieren in Erfahrung zu bringen. Dazu eignen sich vor allem Tools, welche das Ergebnis in Form eines Ablauf-, bzw. Wasserfalldiagramms darstellen, wie z. B. die folgenden Tools:

Beide Tools zeigen dir an, wie lange der Server benötigt zum Antworten, was das Laden der Seite so verlangsamt und geben außerdem Tipps, wie man dies verbessern kann. Diese Tools solltest du auf jeden Fall bei deinen Arbeiten bzgl. PageSpeed Verbesserung verwenden. Nachfolgend ist solch ein Wasserfallmodell aus gtmetrix zu sehen:

Wasserfallmodell Pagespeed

Achte bei der Verwendung darauf, dass du nach Möglichkeit den nähesten Standort auswählst, da ansonsten die Entfernung zu weit ist und damit die Latency zu hoch ist, was den Wert bzgl. der Ladezeit künstlich nach oben treibt.

Auch Google selbst bietet ein kleines Tool dazu an:

Mit dem PageSpeed Insight Tool von Google kann geprüft werden, ob das Rendering beim above the fold geblockt wird oder nicht. Außerdem wird hier auch die Darstellung und Ladezeit für mobile Endgeräte geprüft.

 

PageSpeed bei Bildern optimieren

Wenn du deine WordPress Seitengeschwindigkeit optimieren möchtest, dann beginne zunächst bei den Bildern, denn diese sind meistens ein großer Brocken. Die Verwendung von Bildern ist wichtig, um Dinge zu veranschaulichen. Bilder lockern außerdem die Webseite auf und helfen, dem User das Geschriebene besser zu verstehen. Dennoch können Bilder, vor allem bei einer großen Anzahl von Bildern, die Ladezeit negativ beeinflussen. Bei der Optimierung der Bilder solltest du darauf achten, dass du die Bilder in der entsprechenden Größe verwendest. Sprich, schneide die Bilder bereits zu Beginn so zu, wie du diese in deinem Artikel, bzw. auf deiner Webseite benötigst. Sicher, du kannst die Bilder in der Originalgröße hochladen und anschließend die Größe ändern, dabei verschenkst du allerdings Punkte in Sachen Seitengeschwindigkeit und Speicherplatz.

Wenn es um Zahlen und Statistiken geht, schneide oder verkleinere diese so, dass man die Zahlen und die Statistik noch gut lesen kann. Du sollst zwar optimieren und verkleinern, aber nicht um jeden Preis. Denn wenn die Daten aus dem Bild nicht mehr herausgelesen werden können, dann hilft dir auch der gute PageSpeed nichts.

Nachdem du die Bilder zurechtgeschnitten hast, solltest du diese nochmal komprimieren lassen. Dies kannst du z. B. mit den folgenden Tools machen:

Wenn du deine Bilder damit optimiert hast, sollten schon einige Kilobyte oder Megabyte eingespart worden sein.

Wenn du viele kleine Bilder verwendest, dann kann es sinnvoll sein, diese in ein CSprite hinzuzufügen. Dann werden die vielen kleinen Bilder zu einem größeren Bild, was die HTTP Requests verringert und damit die Seitengeschwindigkeit erhöht. Dies muss ausprobiert und getestet werden, da dies nicht überall sinnvoll ist.

 

CSS Code minimieren

Mit CSS kannst du deine Webseite entsprechend gestalten, sodass diese gut aussieht und eine gute Usability bietet. Oft sind die CSS Dateien so erstellt, dass diese gut lesbar sind, wie z. B. auf dem nachfolgenden Screenshot:

CSS Beispiel

Aber genau hier liegt das Optimierungspotenzial und es können hier einige Kilobytes eingespart werden, was die Ladezeit nochmals verringert, wen auch minimal. Eine Optimierungsmöglichkeit wäre, die Leerzeilen zu entfernen und die jeweilige Klasse in eine Zeile zu schreiben, wie etwa auf dem folgenden Bild:

CSS optimiert

Damit wurde einige eingespart und die Lesbarkeit ist weiterhin gegeben. Einen Schritt weiter gehen könnte man, indem versucht wird, alles in eine Zeile zu packen. Dann ist aber die Lesbarkeit hinüber und eine Anpassung ist ohne weiteres nicht möglich. Optimal ist es also, eine Balance zwischen Lesbarkeit und Optimierung zu finden. Damit diese Aufgabe nicht von Hand gemacht werden soll, gibt es hierfür einige Tools, die diese Arbeiten übernehmen:

Außerdem kann überprüft werden, ob einige CSS Dateien kombiniert werden können oder direkt in den HTML Code implementierbar sind.

 

JS Code minimieren

Mittels JavaScript lassen sich kleine Skripte einbinden, welche einige Funktionen bieten und somit die Webseite nochmal herausstechen lassen. Oder sie bieten Funktionen an, die nicht unbedingt sichtbar sind, wie z. B. Google Analytics oder Piwik Code für das Usertracking. Allerdings ist der Nachteil der JavaScript Dateien der, dass weitere HTTP Requests, also Anfragen an den Webserver gerichtet werden. Dies wiederum erhöht die Ladezeit der Webseite. Damit dem entgegengewirkt werden kann, ist auch hier eine PageSpeed Optimierung bei WordPress möglich, indem der JavaScript Code angepasst, zusammengefasst oder minimiert wird. Auch hierfür gibt es Tools, welche dabei helfen:

 

HTML Code optimieren

Mit HTML beschreibst du deine Webseite, bzw. den generellen Aufbau, ohne jeglicher Formatierung. Halte deinen HTML Code möglichst schlank und entferne nicht benötigten Code. Dies kann unter anderem der Fall sein, dass du dir noch ältere Dinge aufgehoben und diese auskommentiert hast. Entferne die Kommentare, sodass du dir auch hier einige Kilobytes einsparen kannst. Außerdem kann der Code ggf. auch minimiert werden. Die folgenden Tools helfen dir dabei:

 

HTTP Requests minimieren

HTTP Requests sind Anfragen an den Webserver. Je mehr HTTP Requests erzeugt werden, desto mehr Anfragen gehen an den Webserver, was das Laden der Webseite deutlich verlängert. Deswegen ist es also wichtig, diese HTTP Anfragen möglichst zu reduzieren. Dies kannst du tun, indem du bestimmte JavaScript Dateien entfernst, (falls nicht auf jeder Seite notwendig), diese kombinierst oder diese Optimierungsmaßnahmen mit Plugins vornehmen lässt.

Um herauszufinden, wieviele HTTP Requests deine Webseite produziert und wann welcher an den Webserver gestellt wird, kannst du mit den entsprechenden Tools herausfinden. Diese findest du unter dem Kapitel Tools zur Ladezeit Überprüfung aufgelistet.

 

Above the fold Optimierung

Above the fold ist der sichtbare Bereich einer Webseite, ohne dafür scrollen zu müssen. Sprich, dies ist also der oberste Bereich. Bei der WordPress PageSpeed Optimierung ist dies oft ein Problem. Denn hier werden oft JavaScript sowie CSS Dateien angemeckert, welche das schnelle Laden blockieren. Um dies zu entgehen bzw. die Ladezeit dennoch zu verbessern, ist es wichtig, das Laden von bestimmten Codeteilen zu beschleunigen, bzw. zu priorisieren.above the fold

Dazu ist es notwendig, dass du den kritischen CSS Pfad ermittelst. Dies kannst du mit dem folgenden online Tool machen:

Gebe dazu einfach die URL deiner Webseite sowie deinen CSS Code ein und das Tool ermittelt anschließend, den kritischen CSS Pfad. Dieser wird dir ausgegeben und du kannst ihn zuerst laden lassen. Entweder selbstständig an die entsprechende Stelle kopieren (header) oder du verwendest entsprechende Plugins in deinem CMS. Entsprechende Plugins für WordPress erfährst du unter dem Kapitel WordPress PlugIns.

 

Weitere PageSpeed Optimierungsmöglichkeiten

Zahlreiche Möglichkeiten zum Optimieren der Ladezeit deiner WordPress-Webseite wurden dir nun aufgezeigt. Aber neben diesen Sachen, gibt es noch weitere. So solltest du schauen, dass du einen Provider hast, bei dem der Server nicht zu stark ausgelastet ist. Dies ist natürlich nicht immer möglich und schwierig herauszufinden, aber generell gilt, dass bei BilligHostern die Auslastung etwas höher ist. Schnelle Webserver bieten unter anderem die folgenden Webhosting Anbieter an:

Wenn du einen eigenen Webserver, bzw. vServer hast, dann solltest du die Einstellungen überprüfen, sodass sich eine möglichst kurze Reaktionszeit ergibt. Des Weiteren solltest du deine .htaccess Datei überprüfen und schauen, dass dort die richtigen Einträge enthalten sind, welche das Laden der Webseite nicht behindern. So ist unter anderem die Weiterleitung von non-www auf www nach Möglichkeit ganz nach oben zu stellen, damit dies sofort geschieht und danach nicht erst gesucht werden muss.

Ein weiterer Punkt, welcher die Ladezeit nach unten korrigieren lässt ist es zu überprüfen, ob du alle installierten Plugins tatsächlich benötigst. Entferne die nicht verwendeten PlugIns, damit auch die HTTP Requests, JS und CSS Dateien aus deinem HTML Code entfernt werden. Damit kannst du deine Webseite nochmals beschleunigen.

Bei langen Artikeln, vor allem, wenn auch einige Multimedia Objekte wie z. B. Bilder und Videos verwendet werden, kann es durchaus lukrativ sein, LazyLoading Plugins / Module einzubauen. Diese ermöglichen es, dass die Bilder und Videos erst dann geladen werden, wenn zu der entsprechenden Passage gescrollt wird. Andernfalls sind diese komprimiert und werden zunächst nicht geladen, was eine geringere Ladezeit verschafft.

 

WordPress PlugIns

Das CMS welches am meisten verbreitet und am meisten beliebt ist, ist WordPress. Deshalb möchte ich hier ein paar nützliche PlugIns auflisten, welche du bei der Ladezeit Optimierung deiner WordPress-Webseite verwenden kannst. Damit ist eine schnellere Webseite garantiert:

Mit diesen verschiedenen PlugIns kannst du dein WordPress deutlich schneller machen. Bereits die Installation von W3 Total Cache bringt deutliche Vorteile. Mit Autoptimize und WP deferred JavaScripts ist die Webseite deutlich schneller. Je nach Theme, Plugins etc, um das Doppelte.

 

W3 Total Cache richtig konfigurieren

Mit W3 Total Cache kannst du bereits gute Ergebnisse erzielen und den PageSpeed deutlich verbessern. Aber Vorsicht, nicht bei jedem Theme funktioniert das so einfach. Je aufwendiger das Theme ist, desto „zickiger“ ist es auch, wenn auch kein Muss. Es kann also passieren, dass wenn du einige Funktionen aktivierst, deine Webseite anschließend nur noch weiß ist oder es zu Darstellungsfehlern kommt.

W3 Total CacheBei der initialen Konfiguration kannst du zunächst auch die Optione „Minify“ aktivieren. Sollte es zu dem „Weiße-Seite“-Phänomen kommen, dann muss hier nachgeholfen werden. Deaktiviere Minify und teste erneut. Nun sollte die Webseite wieder funktionieren. Dies kann damit zusammenhängen, dass die Minify-Funktion zu viel am CSS, JS und HTML Code komprimiert, sodass es zu Darstellungsfehlern, respektive der weißen Seite kommt.

Um dennoch weiter am PageSpeed zu optimieren, kann das Plugin Autoptimize verwendet werden, was nachfolgend beschrieben ist.

 

Autoptimize richtig konfigurieren und nutzen

Autoptimize hilft dir dabei, deinen Code für CSS, JS und HTML zu komprimieren, damit hier das Maximum herausgeholt werden kann. Aber auch hier gilt es, sich langsam schrittweise am Maximum heranzutasten. Bestenfalls kannst du alle drei Optionen aktivieren und dich so über eine gute Seitengeschwindigkeit freuen. Sollte dies nicht möglich sein, so aktiviere immer nur eins, bis es wieder zum Problem kommt. Diese Option solltest du anschließend meiden und nur diejenigen verwenden, welche zu keinen Darstellungsproblemen oder zur weißen Seite führen. Best Case wäre also wie folgt:

Autoptimize richtig konfigurieren

Wenn du die weiße Seite dann angezeigt bekommst, wenn du die JavaScript Optionen aktivierst, dann solltest du versuchen, da jenige Skript / diejenigen Skripte ausfindig zu machen und in das vorletzte Feld unter JavaScript Optionen eintragen. Damit wird dieses Skript nicht komprimiert und das Problem kann sich so in Luft auflösen. Ausprobieren und testen ist also angesagt.

 

Wichtiges zu beachten bei der PageSpeed Optimierung

Nun hast du einige Tipps und Tools zur Verbesserung der Ladezeit deiner Webseite bekommen. Allerdings möchte ich noch ein paar abschließende Worte dazu geben. Bedenke bitte immer, dass die Webseite vorrangig für den User erstellt werden soll. Natürlich musst du gefunden werden und damit sollte die Suchmaschine auch befriedigt werden. Allerdings generiert die Suchmaschine keinen Umsatz. Des Weiteren ist ein Wert von 100 beim PageSpeed sicherlich sehr gut und lobenswert, aber wenn die Webseite deshalb nicht mehr richtig dargestellt werden kann, weil einige Teile nicht geladen oder zu spät geladen werden, ist dies ebenfalls nicht zielführend.

Bei der Komprimierung von CSS und JS Dateien sowie HTML Code kann es passieren, dass die Webseite anschließend nicht mehr richtig funktioniert. Hier solltest du ausprobieren, testen und ggf. auch einen Schritt zurückgehen, damit die Webseite ordnungsgemäß funktioniert und alles einwandfrei dargestellt werden kann. Deshalb, optimiere so viel wie möglich, aber beachte, dass weiterhin alles tadellos funktioniert, sonst hat es einen negativen und umkehrenden Effekt, was du sicherlich nicht als Ziel hast.

 

Weitere SEO Tools um Ladezeit, Serverantwortzeit und weitere Fehler zu analysieren:

Oder hier auch der SEO Tool Vergleich.

Eine Anzeige von Clixado

Hochwertige Backlinks kaufen

Durch Kooperationen mit unzähligen und unabhängigen Seitenbetreibern stehen uns über 4000 Blogs und Magazine zu verschiedenen Themen zur Verfügung, auf denen wir Artikel mit einem DoFollow Link zu deiner Seite veröffentlichen können.

  • Kein SEO-Netzwerk, verschiedene Seiteninhaber (kein PBN! oder ähnliches)
  • Keine abgestraften oder blackisted Seiten
  • Unterschiedliche Qualitäts- und Preisklassen
  • Einmalzahlung, keine laufenden Kosten

Jetzt kostenlos und unverbindlich Beispiele anfordern
 



Ähnliche Beiträge