Performance-Steigerung bei WordPress
Gerade in Zeiten wo die Netzwerkanbindungen immer besser, und die Bandbreiten immer höher werden, sind schnelle Webseiten Standard. Doch um die Geschwindigkeit und Performance entsprechend bereitstellen zu können, müssen auch die passenden Maßnahmen dafür getroffen werden. Studien zufolge liegt die Aufmerksamkeitsspanne von Menschen derzeit bei ca. 9 Sekunden. Das bedeutet, der Besucher muss in dieser kurzen Zeitspanne vom Inhalt der Website überzeugt werden, sodass er mehr Zeit damit verbringt. Durch langsame Ladezeiten steigt jedoch die Wahrscheinlichkeit, dass der Besucher die Website verlassen wird, rapide an! Des Weiteren haben Google und auch andere Suchmaschinen damit begonnen, Webseiten mit schnelleren Ladezeiten weiter vorne in den Suchergebnissen zu reihen.
Vereinfacht ausgedrückt: möchte man höhere Zugriffszahlen, mehr Besucher und damit verbunden Umsätze steigern, so ist eine schnelle Website PFLICHT! In diesem Tutorial möchte ich ein paar Schrauben zeigen, an denen in WordPress zur Performance-Steigerung gedreht werden kann.
Die Performance messen
Wenn du dir jetzt Gedanken über deine eigene Webseite machst, wirst du vielleicht denken, dass diese eh schnell ist. Doch das ist leider ein sehr großer Fehler. Moderne Browser „merken“ sich die Inhalte von häufig besuchten Webseiten, und speichern die Daten in deren Cache. Wenn du also erneut auf eine solche (vom Browser) gecachte Webseite gehst, wird diese auch unmittelbar – beinahe ohne irgendwelche Ladezeiten – geöffnet. Du bekommst also das subjektive Gefühl einer blitzschnellen Website.
Wenn jedoch ein Besucher das erste Mal auf deine Seite kommt, hat sein Browser noch keine Daten davon gecacht, wodurch sich die Ladezeit für ihn erhöht.
Ein weiterer, nicht ganz unwichtiger Faktor, ist die geographische Lage deines Besuchers: je weiter dieser entfernt ist vom Serverstandort, wo deine Website gehostet wird, desto höher wird auch die Ladezeit. Dies liegt daran, dass die Daten physikalisch bedingt einen wesentlich weiteren Weg zurücklegen müssen (Latenz-Problem).
Aus diesem Grund gibt es im Internet zahlreiche unabhängige Tools, mit denen du die Performance einer Website messen kannst. Ein Beispiel für solche Services wären beispielsweise GTmetrix oder Pingdom. Hierbei handelt es sich um kostenlose Online-Tools, die deine Seite analysieren, und dir dadurch Schwachstellen aufzeigen.
Gründe für langsame Websites
Wenn du mit den oben genannten Tools einen solchen Test durchgeführt hast, wirst du auch gleich einige Verbesserungsvorschläge bekommen haben. Doch vieles davon ist oftmals für den Laien nicht bzw. nur schwer verständlich. Jedoch ist gerade das Verständnis für die Gründe, warum deine Website langsam ist, eine Grundvoraussetzung um entsprechende Gegenmaßnahmen einzuleiten. Aus diesem Grund werde ich dir hier nun mal die wesentlichen Auslöser für langsame WordPress-Websites erklären:
- Webhosting: schlechte bzw. suboptimale Konfiguration des Hosting-Servers
- WordPress-Konfiguration: wenn kein Caching-Plugin installiert ist, muss der Server die Seite für jeden einzelnen Zugriff immer wieder von Neuem zusammenbauen
- Seitengröße: in den meisten Fällen durch zu große bzw. nicht optimierte Bilder
- Schlechte Plugins: wenn ein Plugin schlecht programmiert wurde, kann dies schnell signifikante Auswirkungen auf die Leistungsfähigkeit der gesamen Website haben
- Externe Scripts: beispielsweise Werbung oder sonstige externe Ressourcen
Wenn du nun mal diese Faktoren verstanden hast, beginnen wir mal damit, deine Website entsprechend zu optimieren.
Die wichtigsten Maßnahmen zur Performance-Steigerung
Mittel und Wege, wie man Webseiten optimieren kann, gibt es fast wie Sand am Meer. Die wichtigsten und effektivsten davon werde ich dir nachfolgend zeigen, und auch welche Plugins für dich nützlich sein könnten.
1. Caching: die wohl wichtigste Maßnahme
Wenn ein Besucher auf deine Webseite zugreift, beginnt der Webserver normalerweise damit, die einzelnen Inhalte Schritt für Schritt zusammen zu suchen und so die Seite aufzubauen. Erst wenn er damit fertig ist, bekommt der Besucher die Seite zu sehen. Beim Caching funktioniert das jedoch anders: wenn der Webserver die Seite erst einmal zusammengebaut hat, wird die fertig gerenderte Seite am Server für eine bestimmte Zeit zwischengespeichert.
Greift nun jemand auf deine Website zu, schaut der Server zuerst nach, ob er eventuell schon ein solches zwischengespeichertes („gecachtes“) Abbild der gewünschten Seite hat, und liefert dieses aus. Der Server braucht nun bei neuen Zugriffen keine Inhalte mehr zusammen zu suchen, da er das Ergebnis bereits „kennt“.
Prinzipiell gibt es zwei mögliche Caching-Prinzipien: entweder über ein Caching-Plugin oder ein serverseitiges Caching. Letzteres muss jedoch von deinem Hosting-Anbieter bereitgestellt werden. Dies könnte z.B. mittels Varnish-Cache realisiert werden.
Der einfachere Weg ist hier jedoch, dies mittels Plugin zu lösen. Ich empfehle dir hier WP Super Cache. Um das Caching mit WP Super Cache einzurichten, installierst du es direkt über dein WordPress-Backend und aktivierst es. Beachte, dass du das Caching nun erst konfigurieren musst.
Konfiguration:
Klick dazu beim Plugin auf „Einstellungen“ oder direkt im Menü „Einstellungen“ auf den Punkt „WP Super Cache“.
Wähle dann im Reiter „Easy“ ganz oben die Option „Caching an (empfohlen)“ und speichere die Einstellung mit einem Klick auf „Update-Status„.
Wenn du nun deine Website (am besten in einem „privaten“ bzw. „Inkognito“-Fenster) öffnest, wirst du merken, dass deine Website nach dem ersten Aufruf schon um einiges schneller geladen werden wird.
2. Unnötige Plugins entfernen
Überladene WordPress-Websites können sich ebenfalls negativ auf die Geschwindigkeit auswirken. Wenn du also Plugins hast, welche du nicht (mehr?) benötigst, reicht es leider nicht aus, diese einfach nur zu deaktivieren. Entferne diese bitte vollständig. Grundsätzlich gilt hier: je weniger Plugins, desto mehr Leistung.
Plugins sind wichtig, aber hin und wieder solltest du vielleicht schon mal nachschauen, welche davon du wirklich benötigst. Jedes deiner Plugins und Themes bindet eine größere Menge an weiterem PHP-Code an deine Seite an. PHP ist jedoch eine nicht sehr schnelle Scriptsprache. Je weniger davon also vorhanden ist, desto schneller wird dein WordPress werden.
3. Bilder, die unterschätzten Geschwindigkeitsbremsen
Wenn du nun einen Schritt weiter gehen möchtest, versuch die Datenmenge, welche zur Anzeige deiner Website notwendig ist, zu reduzieren. Sehr effektiv ist es hier, sich die Bilder vorzunehmen. Bei einer „verlustfreien Kompression“ kannst du die Dateigröße deiner Bilder erheblich verringern, sodass insgesamt wesentlich weniger Daten übertragen werden müssen. Gleichzeitig wird der Besucher auch keine Einbußen feststellen, da dabei keine sichtbaren Qualitätsverluste verursacht werden. Entweder du komprimierst also Bilder händisch oder du entscheidest dich für die Nutzung eines entsprechenden Plugins. Für Letzteres empfehle ich dir hier EWWW Image Optimizer.
Konfiguration:
Dazu installierst du das Plugin und aktivierst es anschließend. Gehe nun zu den Einstellungen.
Im Reiter „Erweiterte Einstellungen“ wählst du die Option „Mediathek-Ordner inkludieren“ aus und bestätigst dies mit einem Klick auf „Änderungen speichern„.
Optimierung starten:
Klick nun in der WordPress-Sidebar bei „Medien“ auf „Massenoptimierung„. Hier führst du eine Optimierung der bereits hochgeladenen Bilder durch. Starte diese Aktion nun mittels eines Klicks auf den Button „Nach unoptimierten Bildern scannen„, und bestätige anschließend mittels Klick auf „Optimierung starten„.
EWWW Image Optimizer wird nun alle deine Bilder optimieren, so dass du jeweils die bestmöglichen Ergebnisse erzielst. Verlasse diese Seite bitte nicht, bevor dieser Prozess abgeschlossen ist!
4. CSS und Javascript optimieren
Neben den Bildern stellen CSS- und Javascript-Dateien ebenfalls eine große Datenmenge dar. Wenn deine Seite diese Dateien im Quellcode relativ weit oben hat, beispielsweise im Head, lädt der Browser zuerst all diese Dateien herunter, ehe er mit dem weiteren Verarbeiten des Quellcodes weitermacht. Das daraus resultierende Problem kannst du vielleicht schon erahnen: das Rendern deiner Website wird für diese Zeitspanne völlig blockiert.
Ziel ist es also, diese Dateien erst möglichst spät zu laden, und auch dafür zu sorgen, dass nicht 20 einzelne Dateien, sondern vielleicht nur eine größere geladen wird. Der Browser kann Dateien nicht parallel bzw. immer nur eine sehr limitierte Menge davon möglichst zeitgleich laden.
Was ist die Lösung:
- Einzelne CSS- und Javascript-Dateien zusammenfassen
- Datenmenge reduzieren
- Dateien komprimieren
Dazu empfehle ich dir das Plugin Fast Velocity Minify.
Wie üblich, installierst du dieses einfach und aktivierst es anschließend.
Solltest du danach eventuell Probleme feststellen, wodurch z.B. Schriftarten nicht korrekt geladen werden oder andere negative optische Nebeneffekte auftreten, dann wechsle bitte in die Einstellungen von Fast Velocity Minify.
Im Reiter „Settings“ kann du dann bei den „CSS Options“ die Option „Disable CSS processing“ auswählen.
Weitere Maßnahmen
Es gibt eine schier unendliche Anzahl an Optimierungsmaßnahmen, wobei der effektive Nutzen davon mehr oder weniger gut sein kann.
- Wenn die Website auch in anderen geographischen Regionen die bestmögliche Leistung erzielen soll, ist eventuell der Einsatz eines sogenannten Content Delivery Networks (CDN) durchaus eine Überlegung wert.
Bei einem CDN werden die statischen Dateien auf dezentral verteilte Server und Infrastrukturen der jeweiligen Anbieter gepsiegelt und verteilt. Je nachdem, von wo der Besucher nun auf die Webseite zugreift, werden die Ressourcen nun über dieses CDN geladen – kommen dabei aber vom geographisch am nächsten gelegenen Server. Dadurch sind die Ladezeiten für diese Daten relativ gering. - Eine weitere relativ effektive Methode, ist die Nutzung von HTTP/2 anstatt HTTP 1.0 oder HTTP 1.1 als Überstragungsstandard. Dadurch wird es möglich, dass Ressourcen (wie beispielsweise CSS- und Javascript-Dateien) parallel vom Server geladen werden können. Dies setzt jedoch eine entsprechende Konfiguration direkt am Hosting-Server voraus und daher dem jeweiligen Anbieter obliegt, ob er dieses Protokoll untersützt oder nicht.
Bei Managed Hosting ist es in der Regel am einfachsten, solche individuellen Konfiguration nutzen zu können.
Fazit
Performance und Geschwindigkeit bei Webseiten ist das A und O, um damit erfolgreich sein zu können – vor allem dann, wenn man bedenkt, dass man nur wenige Augenblicke Zeit hat, den Besucher von den eigenen Inhalten zu überzeugen.
Die hier vorgestellten Plugins und Tools dienen lediglich als persönliche Empfehlung von mir, wir benutzen sie aber auch immer wieder bei vielen Webseiten-Projekten unserer Kunden.
Bevor du aber irgendwelche Plugins installierst oder updatest, solltest du vorher unbedingt ein Backup deiner Webseite vornehmen – für den Fall, dass es im Zuge von solchen Optimierungen zu etwaigen Problemen bzw. Beschädigungen kommen sollte!
Wenn du gerade im Hosting-Bereich Performance-Steigerung erreichen willst, ist es oft sinnvoll eine Managed-Hosting-Lösungen zu wählen. Dort stellen die Experten alle Regler für dich ein, um deine Webseite so performant als möglich zu machen. Meine Kollegen haben hier weitere Infos über die Managed Hosting für dich:
Mehr Infos zu Managed Hosting >