WordPress Performance optimieren

Heute zeige ich dir am Beispiel der Landing-Page meines neuen 7 Tage Business Online-Kurses, wie ich die Performance einer WordPress-Seite optimiert habe.

Update: Die Seite gibt es nicht mehr, aber die Informationen sind aktuell und das Thema extrem wichtig.

Studien zeigen, dass erhöhte Ladezeiten von nur einer Sekunde, die Bounce-Rate (Die Anzahl der Leute die deine Seite innerhalb kurzer Zeit wieder verlassen) um bis zu 113% steigern können. Insbesondere bei mobilen Seiten ist das Datenvolumen und die Geschwindigkeit ja noch oftmals reduziert.

In konkreten Zahlen am Beispiel von Amazon, gibt es eine Untersuchung die zeigt, das nur 1 Sekunde längere Ladezeit, Amazon 1.6 Milliarden Umsatz kosten würde.  Da musst du mit deiner Seite natürlich erstmal hinkommen 😀

Da ich auf meiner Landing-Page und während der Navigation immer wieder Probleme mit den Ladezeiten hatte, zeige ich dir heute ein paar Tricks, wie du deine Webseite schneller machen kannst und die Webseiten Performance optimierst.

Die Geschwindigkeit einer Webseite messen

Lighthouse

Das messen der Geschwindigkeit kannst du auf verschiedene Arten machen. Ich verwende dazu meist Lighthouse. Im aktuellen Chrome-Browser unter Windows ist das bereits enthalten. Du machst dazu einen Rechtsklick irgendwo auf den Hintergrund deiner Webseite und gehst auf „Untersuchen“. Dann erscheint unten, wie im Bild zu sehen, ein neuer Bereich. Dort gehst du auf „Audits“ und „Audit starten“. Du erhältst dann die Ergebnisse wie im Bild dargestellt.

Hinweis: ich mache solche Messungen immer im Incognito Modus (im Browser dazu auf Datei → Neuer Incognito Tab). Dadurch sind alle vorherigen Cookies und Caches gelöscht und die Ladezeit wird nicht verfälscht durch Admin Ressourcen, die eventuell geladen werden, wenn du eingeloggt bist.

Dort kannst du dann auch auf „Network“ gehen und siehst, wieviele Server-Anfragen gestellt wurden und wie groß deine Seite ist. Wichtig ist dafür das du die Webseite mit der „Shift“ + F5 Tastenkombination neu lädst. So werden die Daten direkt vom Server geladen und nicht aus dem lokalen Cache auf der Festplatte.

PageSpeed Insights

Das zweite Tool das oft nutze, um die Geschwindigkeit einer Webseite zu messen kommt direkt von Google und nennt sich PageSpeed Insights.

Du findest es unter dieser URL: https://developers.google.com/speed/pagespeed/insights

Das Ergebnis der Analyse sah vor den Verbesserungen wie folgt aus:

Meist führe ich den Test gleich ein zweites mal durch, um zu sehen, ob ich stark abweichende Ergebnisse habe. Das war hier nicht der Fall. Also beginnen wir mit den Optimierungen. Ziel ist es in erster Linie, dass sich die Webseite “schneller” anfühlt und die Verzögerungen beim laden weg sind. Die konkreten Messwerte sind dazu gar nicht so wichtig, aber natürlich ein guter Indikator.

Der Google Page Speed Score von 100 mit WordPress

Oft kommt die Frage, ob ein Score von 100 möglich ist, insbesondere auch mit WordPress. Ja es ist möglich aber die meisten Seiten haben einen Pagespeed Score von 50-70.

Dazu die Geschichte von zwei Freunden die durch den Wald spazieren gehen als sie auf einmal einen Bären sehen. Der Bär sieht die beiden ebenfalls und kommt bedrohlich auf die beiden Freunde zu. Der eine schnürt seine Schnürsenkel zu und macht sich bereit wegzulaufen. Da fragt der andere Freund ihn: „Warum machst du deine Schuhe zu, du kannst doch eh nicht schneller laufen als ein Bär??“, der Freund antwortet nur, „Das muss ich auch nicht, ich muss nur schneller sein als DU ;)“

In dem Sinne, mach deine Webseite ein bisschen schneller als die der Konkurrenz und dann passt das. Speedwerte von über 80 sind gut genug.

Den Extra Aufwand für die letzten 20% machen wir uns gemäß dem Pareto Prinzip nicht 🙂 Die ersten 4 Schritte die ich beschreibe sind für die meisten WordPress-Seiten ausreichend, um eine deutlich bessere Performance zu erreichen. Alles weitere kannst du machen, wenn du trotzdem noch Probleme hast.

Schritt 1: Alle unnötigen WordPress-Plugins entfernen

Das hilft nicht nur der Performance deiner Webseite, sondern macht diese auch sicherer. Jedes Plugin enthält verschiedene Stylesheet Dateien, Javascript Dateien, Bilder und ähnliches, welche bei jedem Laden der Seite mitgeladen werden. Für jede dieser Dateien muss der Browser deines Webseitenbesuchers wieder eine Anfrage an den Server stellen und diese Extra herunterladen. Das kostet natürlich wertvolle Ladezeit.

Bei mir waren noch diverse Testplugins und Features aktiviert die ich während der Einrichtung mal ausprobiert habe und ein paar Templates die ich nicht mehr brauchte. In Schritt 1 habe ich die alle gelöscht.

Insbesondere der Wechsel zwischen den einzelnen Seiten wurde dadurch schon wesentlich schneller. Auf die Ladezeit der Startseite hat es sich jedoch nicht weiter ausgewirkt, so dass die PagespeedInsights werte gleich blieben.

Die Anzahl der Network Requests hat sich aber um 20 reduziert und die Größe der Webseite ebenfalls. Aktuell ist die Startseite noch 1.1 MB groß und benötigt 3.79 Sekunden zum laden.

Schritt 2: Unnötige Features im WordPress-Template deaktivieren

Ich hatte die von Anfang an deaktiviert, aber sieh dir dazu mal die Optionen in deinem verwendeten WordPress-Template an. Ich nutze das Divi Template und dort kann z.B. Google Maps deaktiviert werden oder diverse Social Media Icons und Codes, die ich ohnehin nicht benutze. Divi selbst nutzt auch bereits Compression und Coaching der Dateien, von daher sind dort nicht viele weitere Schritte notwendig. Bei anderen Templates kann das anders aussehen.

Schritt 3: Ein Caching-Plugin für WordPress installieren

WordPress ist eine sogenannte dynamische Webseite, die in PHP programmiert wurde. Das funktioniert einfach gesagt so: Der Browser des Besuchers deiner Webseite fragt deine Webseite an. Dort berechnet dieser PHP-Code die Webseite, das heißt die ganzen Inhalte aus der Datenbank werden gesammelt und zu einer HTML-Seite zusammengebaut. Diese wird dann an den Browser des Besuchers ausgeliefert. Für den nächsten Besucher würde wieder das gleiche passieren. Datenbank abfragen und HTML-Dateien generieren die der Besucher sich ansehen kann.

Ein Caching-Plugin speichert jetzt diese generierte HTML-Datei, so das der Server viel weniger zu tun hat, weil jetzt diese direkt ohne Datenbankanfragen ausgeliefert werden kann.

Ein Cache ist also ein Zwischenspeicher für Dateien meist im Arbeitsspeicher, manchmal auch auf der Festplatte.

Wenn du dann doch mal Datenbankinhalte änderst, weil du beispielsweise einen Artikel aktualisierst, wird auch der Cache, also die zwischengespeicherte Version aktualisiert.

Hinweis zur Benutzung von Cache-Plugins mit WordPress: Wenn du Design Änderungen machst oder sich Inhalte nicht aktualisieren wie gewünscht, dann kannst du bei fast allen Cache-Plugins immer auch von Hand den Cache im Administrationsdashboard von WordPress löschen. Ein Caching-Plugin solltest du deshalb meist erst installieren, wenn du die Seite grundlegend fertig hast. Und immer wenn du Probleme hast, dass Änderungen nicht übernommen werden, dann probiere mal den Cache zu löschen.

Es gibt mit WP-Rocket, WP-Supercache, W3- Total Cache verschiedenste Caching-Plugins mit sehr vielen Optionen. Die einfachsten und schnellsten Varianten sind jedoch Cache Enabler und WP-Super Cache. Ohne große Einstellungen erhältst du sofort die oben beschrieben Funktionen der statischen HTML-Seiten und deine Seite wird merklich schneller. Beide Plugins sind außerdem kostenlos.

Ich habe mich für Cache Enabler entschieden und das Plugin installiert:

Das Ergebnis des Caching-Plugins:
Die Anzahl der Requests hat sich weiter reduziert auf 59 und die Ladezeit ist auf unter 2 Sekunden bei mehreren Durchläufen gesunken. Im Schnitt waren es ca. 1.9 Sekunden für einen neuen Besucher für die ganze Startseite. Ein Reload benötigte nur noch knapp 1 Sekunde.

Ein Caching-Plugin ist also die effektivste und einfachste Lösung, wenn dein WordPress schneller werden soll.

Schritt 4: Autooptimize Plugin

Die Seite läd jetzt schon wesentlich schneller, aber die Pagespeed-Werte sind noch nicht viel besser geworden. Das liegt an Scripten, die das Rendern blockieren.

Auf der Google Pagespeed Seite steht dazu meist: „Ihre Seite enthält X blockierende Skript-Ressourcen“, dass bedeutet so viel wie, die Seite kann nicht im Browser angezeigt werden, weil noch auf bestimmte Dateien gewartet werden muss. Diese Dateien sind aber für die reine Darstellung der Webseite manchmal gar nicht wichtig. Eine Javascript Funktion für einen Button z.B. wird eigentlich erst benötigt, wenn der Button geklickt wird. Also reicht es auch, wenn die Datei geladen wird, nachdem der Benutzer die Seite schonmal sieht.

Als Lösung schlägt Google Pagespeed vor: „Entfernen Sie JavaScript, das das Rendering blockiert:“ und genau das macht das kostenlose Autooptimize Plugin.

Das Autooptimize Plugin verkleinert deine Scripte, indem es z.B. unnötige Leerzeichen und Kommentare entfernt oder Variablennamen verkürzt. Alles wird also kleiner und schneller. Außerdem werden diese Scripte, die das Laden blockieren, an das Ende der Seite gesetzt.

Nach der Plugin Installation gehst du auf die Einstellungen und aktivierst alle Optimierungen unter Main, unter Extras entferne ich immer die WordPress Smilies, dann aktiviere ich die „Remove Query Strings“ Funktion. Du kannst oben Rechts auf „Hide Advanced Settings klicken“. Dann siehst du mehr Optionen unter anderen kannst du unter „Exclude Scripts from Autooptimize“ auch jQuery dort entfernen, damit das ebenfalls optimiert wird. So kannst du in der Regel alle blockenden Javascript Warnungen entfernen.

Gibt noch viele weitere Funktionen, aber gucken wir uns lieber mal das Ergebnis an 🙂

Die komplette Ladezeit für Besucher ist auf ca. 1,2 Sekunden gesunken und bei wiederkehrenden Besuchern, sind wir bei nur noch 773 ms. Auch Google gibt uns ein grün und 96 als Optimierungswert für die Webseite und damit reicht es für mich auch an Optimierungen.

Wer die 100 will oder zu viel Zeit hat, kann trotzdem weiter lesen 😉

Schritt 5: Bilder Optimieren

Google Pagespeed beschwert sich oft darüber, dass die Bilder zu groß sind: „Durch eine korrekte Formatierung und Komprimierung von Bildern können viele Datenbytes gespart werden.“
Ich verwende auf der Webseite kaum Bilder, von daher ist das nicht so wichtig. Aber wenn du viele Bilder auf deiner Webseite hast, solltest du das „Optimus – WordPress Image Optimizer“ Plugin installieren. Dann werden automatisch alle deine Bilder bereits beim Upload optimiert.

Schritt 6: Google Fonts Optimieren

Ich habe Google Fonts deaktiviert und dann manuell unter Custom CSS hinzugefügt im Divi Theme. Dadurch war dann auch die „Ihre Seite enthält 1 blockierende CSS-Ressourcen. „ Fehlermeldung für die Google Fonts weg.

Dazu kopiert ihr einfach aus dem Seitenquelltext die Zeile in der eure Google Font eingebunden wird:

<link rel=‘stylesheet‘ id=‘et-builder-googlefonts-cached-css‘ href=‘https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic%7COpen+Sans%3A300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic&#038;ver=4.9.5#038;subset=latin,latin-ext‘ type=‘text/css‘ media=‘all‘ />

Und fügt diese dann später manuell ein, nachdem ihr die Google Fonts in Autooptimize oder eurem Template deaktiviert habt.

Schritt 7: Browser Caching nutzen in WordPress

Google PageSpeed Insights zeigt euch vermutlich eine Fehlermeldung an wie: “Browser Caching nutzen” und “

 <filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">
 Header set Cache-Control "max-age=84600, public"
 </filesMatch>

Nicht Schritt 8:  Eine eigene Jquery-Version in WordPress laden (bitte vermeiden)

Jquery ist eine Javascript Bibliothek, die auf vielen Webseiten verwendet wird und unter anderem auch zu den Kernfunktionen von WordPress gehört. Die Ladezeit ärgert mich ein wenig, aber ihr solltet diese auf keinen Fall von Google oder anderen Cloud-Seiten nachladen. Das Problem ist, das WordPress jQuery im sogenannten noConflict Modus läd, der so ziemlich genau das tut, was er sagt: Konflikte und Probleme vermeiden.

Häufig kommt es sonst zu Fehlermeldungen wie „Uncaught ReferenceError: jQuery is not defined and Uncaught SyntaxError: Unexpected token <“ und ähnlichem. Weiterhin kann es zu Versionskonflikten und anderem unerwarteten Verhalten führen. Auch wenn dieser Tipp häufig zu lesen ist, rate ich dringend davon ab.

Wer trotzdem unbedingt eigene Versionen von jQuery oder anderen Javascript Bibliotheken in seiner WordPress Installation nutzen will, sollte das mit Hilfe des “Use Google Libraries” Plugins tun. Das Plugin läd die Bibliotheken im noConflict-Modus direkt von Google nach und erspart euch hoffentlich unnötige Fehlermeldungen.

p.s. jquery-migrate kannst du guten Gewissens entfernen. Wenn du jQuery im Frontend nicht benötigst, kannst du das da auch deaktivieren.

Fazit: Die WordPress Seite ist deutlich schneller

Mit den Optimierungen konnte die Ladezeit der Webseite deutlich reduziert werden. Das spürt man beim betrachten auch ganz unabhängig von den Zahlen und Messwerten. Von daher bin ich damit soweit sehr zufrieden.

Man könnte jetzt noch weitere Optimierungen machen, von Hand analysieren welches Javascript oder CSS sich noch deaktivieren lässt, wo man noch mehr Code Inline verwenden kann, man kann das Caching von Ressourcen weiter aktivieren und auch an den Einstellungen vom Apache-Server optimieren. Für unser kleines Beispiel und die paar Besucher auf meiner Kursseite ist das alles jedoch nicht notwendig.

In dem Sinne, viel Erfolg. Bei Fragen oder Hinweisen meldet euch!

Thomas

Moin. Ich bin Thomas und ich mache Online-Business. Ich hab in den letzten 10 Jahren über 100 digitale Geschäftsmodelle aufgebaut und begleitet. In meinem Newsletter und meinem Podcast “Wunderliche Weltklugheit” teile ich meine Fortschritte mit dir. Aktuell habe ich mehrere Bestseller-Bücher im Bereich Finanzen/Online-Business und die Online-Business-Akademie, die dir zeigt, wie du ebenfalls erfolgreich ein Online-Business mit digitalen Produkten starten kannst.