Skip to main content

WordPress Ladezeit Optimierung: So wird WordPress schneller

Kennen Sie das Problem von langsam ladenden Webseiten auch? Nichts ist nerviger, wenn man nach Informationen sucht und dann noch warten muss, bis die Webseite fertig geladen hat. Und auch beim rumklicken auf dieser, muss ständig gewartet werden. Das hier einige User die Webseite wieder schließen, ist kein Wunder. Deshalb ist es von Vorteil, wenn die eigene Webseite schnell lädt. Hier erfahren Sie, wie Sie WordPress schneller machen können.

 

Inhaltsverzeichnis

 

Software zur PageSpeed Überprüfung

Wenn Sie in Erfahrung bringen möchten, wie der PageSpeed der eigenen Webseite ist, so können Sie einige Tools dafür verwenden. Wichtig zu wissen sind nicht nur die nackten Zahlen, sondern auch, wo es klemmt und welches Element blockt und die Ladezeit nach oben treiben lässt. Ergebnisse in Form eines Wasserfallmodells sind hierfür besonders gut geeignet. Mit den nachfolgenden Werkzeugen können Sie dies überprüfen:

Mit beiden Hilfswerkzeugen können Sie herausbringen, wie die Server Response Zeit ist, welche Elemente wie lange brauchen und Tipps wo Sie was und wie optimieren können. Somit sind das sehr hilfreiche Werkzeuge, die Sie bei der PageSpeed Optimierung Ihrer WordPress Seite auf jeden Fall heranziehen sollten. Anbei ein Screenshot aus gtmetrix:

Wasserfallmodell Pagespeed

Wenn Sie Tests durchführen, dann sollten Sie auf jeden Fall einen Standort auswählen, der Ihrem Serverstandort am nächsten ist. Andernfalls wird das Ergebnis verfälscht, da der Testserver zu weit weg ist und damit eine zu hohe Latenzzeit entsteht.

Sie können außerdem das PageSpeed Insights Tool von Google verwenden. Damit wird außerdem noch nach Elemente ausschau gehalten, welche das Rendering im above the fold Bereich blockieren. Des Weiteren wird auch die Geschwindigkeit für mobile Endgeräte geprüft.

 

Bilder optimieren

An einer zu hohen Ladezeit sind nicht selten auch die Bilder schuld. Denn Bilder sind oft zu groß oder werden zwar verkleinert dargesteltl, aber in voller Größe hochgeladen. Deshalb ist es wichtig, dass auch hier geprüft und nach Möglichkeit eine Optimierung vorgenommen wird. Auch wenn die Bilder die Webseite auflockern und das Geschriebene leichter verstehen lassen, so ist es kein Grund, diese in einem unkomprimierten Format zu verwenden. Bei der Komprimierung können Sie die folgenden Tools verwenden:

 

 

Prüfen Sie außerdem, ob Sie die Bilder, welche Sie hochladen möchten, auch tatsächlich in der derzeitigen Größe benötigen. Sollte dies nicht der Fall sein, so passen Sie die Bilder auf jeden Fall auf die benötigte Größe an. Damit tragen Sie viel zu Ladezeit Optimierung bei.

Achten Sie aber, wenn Zahlen oder Statistiken enthalten sind, dass diese nicht zu klein sein dürfen, damit die Besucher diese noch gut lesen können, andernfalls bringt das Bild nichts, da es seine Aussagekraft verliert.

Wenn Sie viele kleine Bilder verwenden, dann kann es hilfreich sein, wenn ein CSprite verwendet wird. Hier werden die einzelnen kleinen Bilder, welches davon je einen HTTP Request generiert, zu einem ganzen größeren Bild zusammengefügt. Wenn die Bilder benötigt werden, so wird die Position des benötigten Elements in dem großen Bild abgefragt und das entsprechende Element ausgegeben. Damit lässt sich die Ladezeit verkürzen, aber nur, wenn mehrere bzw. viele kleine Bilder auf der jeweiligen Seite verwendet werden. Andernfalls wird der Effekt umgekehrt und ist nicht vorteilhaft für den PageSpeed.

 

CSS minimieren

Mittels CSS können Sie Ihre Webseite schöner machen und entsprechend Ihrer Vorgaben gestalten. Allerdings lässt sich auch hier in der Regel einiges einsparen und die Ladezeit verbessern. Denn oft sehen die CSS Dateien wie folgt aus:

CSS Datei

Hier ist ersichtlich, dass einiges eingespart werden kann, wenn die Leerzeichen und Absätze entfernt werden. Die Gewinnung des Speicherplatztes ist dadurch zwar minimal, aber die Menge macht es wieder. Nach einer Optimierung könnte die obige CSS Datei wie folgt aussehen:

optimierte CSS Datei

Bei dem obigen Bild wurde auf eine Balance zwischen Lesbarkeit und Optimierung acht gegeben. Denn es könnte auch alles in eine Zeile geschrieben werden, was die Optimierung maximiert, allerdings kann anschließend nichts mehr gelesen und verändert werden, was also nicht sinnvoll ist. Die nachfolgenden Online Tools können bei der CSS Code Minimierung behilflich sein:

Sie können aber auch einige CSS Dateien kombinieren, sodass weniger HTTP Requests notwendig werden. Und wenn die CSS Datei nur wenig Inhalt hat, dann können die CSS Definitionen auch direkt in den HTML Code eingetragen werden.

 

JS Minimierung

Egal ob es kleine Skripte sind, welche weitere Funktionen für die Webseite bieten oder ob es die Einbindung von Tracking Tools wie Google Analytics, Piwik oder anderer sind, ohne JS Code geht es kaum. Aber auch diese kleinen Skripte generieren HTTP Requests, was die Ladezeit nach oben schnellen lässt. Außerdem kann die Webseite teilweise erst dann geladen werden, wenn das jeweilige JavaScript durchlaufen wurde, was die Seitengeschwindigkeit deutlich einhemmt. Um den JS Code zu optimieren können die nachfolgenden Hilfswerkzeuge verwenden werden:

 

HTML Code minimieren

Auch am HTML Code kann man etwas einsparen. Denn oft sind Kommentare und Leerzeilen enthalten, welche nicht mehr benötigt werden und somit entfernt werden können. Sollte alter HTML Code enthalten sein, so kann dieser ebenfalls gelöscht werden. Online Software, welche Ihnen bei der Optimierung und Minimierung des HTML Codes hilft:

 

Anzahl HTTP Requests minimieren

Je mehr Anfragen an den Webserver gestellt werden, desto langsamer wird das Laden der Webseite. Denn die Antwort-Frage Spielchen benötigen einfach Zeit, sodass bei bestimmten Schritten eine Anfrage an den Webserver gestellt wird und auf eine Antwort von diesem gewartet wird. Versuchen Sie also, die Anzahl der HTTP Requests zu minimieren. Dies können Sie mit den oben bereits beschriebenen Sachen erreichen.

 

Above the fold

Der sichtbare Bereich, welcher sofort sichtbar ist, ohne dafür scrollen zu müssen, wird above the fold genannt. Wenn eine Überprüfung mit dem Google PageSpeed Insight Tool durchgeführt wird, wird hier meist eine Meldung ausgegeben, dass das Rendering von CSS und JS Dateien blockiert wird, so wie auf dem nachfolgenden Bild zu sehen:

Above the fold Beispiel

Um diese Blockade zu umgehen, bzw. aufzuheben, ist es notwendig, dass du den kritischen CSS Pfad ermittelst und diesen dann entsprechend in den Header einfügst. Der kritische CSS Pfad lässt sich mit dem folgenden Tool ermitteln:

Einfach die URL zu Ihrer Webseite und den gesamten CSS Code eingeben und die Software spuckt anschließend den kritischen CSS Pfad heraus. Diesen können Sie entewder selbst im Header einfügen oder ein entsprechendes Plugin für Ihr CMS verwenden.

 

Weitere PageSpeed Optimierungen

Wenn Sie die oben aufgeführten Dinge umgesetzt haben, dann gibt es noch einige weitere Stellen, an denen geschraubt werden kann, um die Ladezeit Ihrer Webseite zu reduzieren. Den PageSpeed können Sie verbessern, wenn Sie die Antwortzeit Ihres Webservers reduzieren. Wenn Sie einen eigenen Webserver haben, dann sollten Sie sich mit den Apache bzw. Nginx oder Windows IIS Einstellungen vertraut machen und wie Sie diese optimieren können. Möglicherweise sind nur wenige Handgriffe notwendig, um den Server richtig zu konfigurieren oder es müssen noch einige Module nachinstalliert werden. Prüfen Sie dies, verändern Sie die Einstellungen und testen Sie dies. Aber seien Sie vorsichtig. Wenn Sie sich nicht sicher sind, dann sollten Sie Experten oder Ihren Provider fragen oder entsprechend recherchieren. Machen Sie in jedem Fall ein Backup von den Einstellungen und Ihren Daten, bevor Sie mit der Veränderung der Konfiguration beginnen.

Die andere Möglichkeit ist es, auf einen Webhosting Anbieter zu setzen, welcher von Haus aus gute Leistung anbietet und dessen Webserver nicht bis zum Anschlag ausgereizt sind. Die nachfolgenden Webhosting Anbieter können empfohlen werden:

Außerdem sollten Sie prüfen, ob Sie alle installierten Plugins tatsächlich benötigen und verwenden. Wenn dem nicht so ist, dann sollten Sie die nicht benötigten Plugins deinstallieren und entfernen. Dies spart nicht nur Speicherplatz, sondern kann zur Optimierung der Seitenladezeit beitragen. Denn die von den Plugins integrierten CSS und JS Dateien werden so aus dem HTML Code entfernt, was schon mal die Anzahl der HTTP Requests reduziert.

 

WordPress Plugins

WordPress ist das CMS, welches am häufigsten verwendet wird. So ist es nur verständlich, dass hier sehr viele verschiedene Plugins angeboten werden. Deshalb kannst du die folgenden Plugins für deine PageSpeed Optimierung verwenden:

Verwenden Sie die oben aufgeführten Plugins, um Ihr WordPress schneller zu machen. Damit können Sie bei Ihrem WordPress Blog eine deutlich bessere Ladezeit erreichen. Die Suchmaschinen und die User freuen sich darüber und Sie natürlich auch.

 

W3 Total Cache richtig konfigurieren

W3 Total CacheW3 Total Cache ist ein wichtiges Plugin. Denn damit können Sie die Ladezeit der Seite richtig gut optimieren. Allerdings gibt es auch Probleme mit diesem Plugin, vor allem bei einigen Themes. Das Problem ist, dass das Plugin CSS, JS oder HTML Code „zu stark“ komprimiert. Um dies also zu umgehen, sollte bei der Konfiguration einiges beachtet werden.

Zu Beginn können Sie Page und Browser Cache sowie Minify aktivieren. Sollte es zu Darstellungsproblemen oder zu einer weißen Seite führen, dann deaktivieren Sie Minify wieder. Die Webseite sollte nun wieder funktionieren. Dies kommt daher, weil Minify zu viel am JS, CSS oder HTML komprimieren könnte. Dafür kann aber das Autoptimize Plugin verwendet werden.

 

Autoptimize konfigurieren

Mit Autoptimize kann CSS, JS und HTML komprimiert werden, um eine kürzere Ladezeit zu erreichen. Aber auch hier gilt es, sich langsam heranzutasten. Aktivieren Sie immer nur eines der Optionen und testen Sie anschließend die Webseite auf Funktionalität. Sollte es nach der Aktivierung einer Option zum Problem führen, dann sollten Sie die letzte Aktion rückgängig machen. Wenn das Problem nach der Aktivierung der JavaScript Option auftritt, dann können Sie diese entweder deaktiviert lassen oder versuchen, das entsprechende Skript ausfindig zu machen und in die vorletzte Zeile bei der JS Option einzutragen, wie im nachfolgenden Bild:

Autoptimize

Damit kann sich das Problem mit der weißen Seite gelöst haben.

 

PageSpeed Optimierung: Chancen und Risiken

Nachdem Sie einige Tipps, Tools und Plugins vorgestellt bekommen haben, können Sie diese verwenden, um Ihre Webseite schneller zu machen, insbesondere WordPress beschleunigen. Ihre Chancen liegen also darin, dass die Webseite schneller geladen wird, die User länger darauf verweilen und die Rankings aufgrund der gesteigerten Zufriedenheit der User und somit der Suchmaschine steigen.

Allerdings gibt es auch Risiken. Denn eines müssen Sie beachten. Ein PageSpeed Wert von 100 bringt Ihnen nichts, wenn Teile der Webseite nicht oder nicht mehr richtig funktionieren. Deshalb ist es wichtig, dass Sie Ihre Webseite nach der Optimierung ständig auf Funktionalität überprüfen. Denn schnell kann es passieren, dass man ewas übersieht und schon hat man den Salat, dass einiges nicht mehr funktioniert oder richtig dargestellt wird und die Fehlersuche beginnt.

Die Webseite sollte außerdem vorrangig für den Besucher erstellt werden und nicht für die Suchmaschine, auch wenn diese Sie in den Suchergebnissen listet und damit für die Besucher sorgen kann.

Passen Sie bei der Komprimierung und Minimierung von CSS und JS Dateien auf. Auch bei der Minimierung des HTML Codes kann es zu Problemen kommen. Denn je nach verwendetem Theme und Plugins, kann durch die Minimierung etwas kaputt gehen und die Webseite wird nicht richtig angezeigt und funktioniert womöglich nicht mehr richtig. Hier ist also ausprobieren und testen angesagt.

 



Ähnliche Beiträge