WordPress Performance
Über Webperformance gibt es viele viele Bücher. Dieser Artikel ist alles andere als vollständig und erklärt nur, was man im Kleinen, kostenfrei selber machen kann. Für diesen Artikel solltest du wissen was ein „Webhoster“ ist, deine eigene WordPress Installation haben und wissen wie ein Plugin installiert wird.
Warum eigentlich?
Es wird immer wichtiger Webseiten für eine schnelle Auslieferung an den Kunden zu optimieren. Der erste Eindruck ist der wichtigste und zu dem gehört die Performance. Wenn du eine halbe Stunde auf dein Bier warten musst in einer Bar bist du schnell weg. Nicht umsonst ist die Webseitengeschwindigkeit einer der wichtigsten Kriterien für das Google-Ranking. Du tust also gleichzeitig etwas für deine User und für deine Suchmaschinenoptimierung, wenn du deine WordPress Webseite schneller machst.
Ein guter Server allein reicht dafür nicht aus, ist aber natürlich hilfreich. Es gibt viele super WordPress-Hoster in Deutschland. Gehe besser zu diesen und nicht zu den Großen, die Fernsehwerbung machen. Ich möchte jedoch weniger auf die Serveroptimierung eingehen, sondern eher auf die Optimierung, die man selber durchführen kann. Hier heißt es auch: Ausprobieren, Testen, Ausprobieren, Testen.
Wie teste ich die Geschwindigkeit?
Hierzu gibt es einige kostenlose Seiten, die dir genau sagen können, wie schnell deine Seite zur Zeit ist, und vielleicht sogar schon Anregungen geben, was du verbessern kannst. Falls möglich, wähle eine Testlocation möglichst nah an deinem Wohnort (z.B. Frankfurt). Mach so drei bis vier Durchläufe und schreibe dir die Testergebnisse auf! Normalerweise testet man erstmal seine Startseite.
Wichtig sind:
- „Requests“ – Anfragen an den Server, z.B. eine Skriptdatei=eine Anfrage
- „Load Time“ – Gesamtladezeit der Seite in Sekunden oder Millisekunden
- „Page Size“ – Webseitengröße in Kilobyte oder Megabyte
Das sind die drei Faktoren, die du minimieren willst. Die Ergebnisse können direkt variieren, deshalb ist ein Durchschnitt besser zum Vergleich. Gerade bei Shared Webhosting kann das Ergebnis auch noch stark nach Tageszeit variieren. Hier einige Seiten zur Auswahl:
http://www.webpagetest.org/
Braucht etwas Zeit der Test, gibt aber eine gute Übersicht und verteilt Noten (A gut, bis D schlecht)
http://tools.pingdom.com/fpt/
Bei Pingdom unbedingt die „Settings“ unter dem Eingabefeld beachten.
https://developers.google.com/speed/pagespeed/insights/
Googles Pagespeed Insights gibt dir einen Score und sagt dir auch gleich, was du verbessern kannst.
https://gtmetrix.com/
GTmetrix gibt dir Pagespeed- und YSLOW-Score und sagt die was du verbessern kannst.
Tools zum Testen
Am schönsten wäre es an mehreren echten Geräten zu echten Bedingungen zu Testen und gleich die Werte dazu zu sehen. Ist aber viel zu umständlich. Du kannst auf deinem eigenen Rechner Testen. Das ist praktisch, um die Requests und Page Size zu optimieren, bevor du wieder die Online-Tools zur Hilfe nimmst. Tests auf echten Geräten kann ich trotzdem empfehlen, um zu wissen wie es sich anfühlt, wenn die Seite fünf Sekunden braucht.
Am Rechner nimmt man sich die Entwickler-Tools von Chrome oder Firefox. Hier wählst du „Network“ oder „Netzwerk“. Du kannst auch live sehen wie lange deine Seite z.B. mobile mit 3G zum laden braucht. Sehr praktisch. Neben dem Ladewasserfallchart stehen unten links in der Ecke die harten Fakten. Achte darauf das Häkchen bei „Disable Cache“ zu setzen, denn du willst ja wissen, was passiert, wenn jemand zum ersten Mal auf deine Seite kommt.Das Häkchen deaktiviert den Browsercache auf deinem Rechner. Achte auch darauf, dass du aus WordPress ausgeloggt bist beim Testen! Du willst ja Testen wie sich die Seite für normale Besucher der Seite verhält.
WARNUNG
Bevor du irgendwelche Plugins testest, Skripte änderst oder sonstige Anpassungen vornimmst, mache ein komplettes Backup deiner Webseite und deiner Datenbank. Nicht jedes Plugin kann/muss sich mit deinem Server oder auch deinem Theme vertragen. So kannst du im schlimmsten Fall alles wieder herstellen. Im einfachsten Fall brauchst du einfach nur das Plugin deaktivieren und löschen. Ausprobieren heißt hier die Devise.
Server
Sagte ich du kannst selber nichts am Server ändern? Doch! Wenn du kannst schau bei deinem Webhoster nach welche PHP Version dein Server nutzt und verwende die neueste Version. Vorher aber nochmal die Warnung lesen!
Theme & Bilder
Als erstes sollte man darauf achten, dass man kein Theme benutzt, dass siebenhundert Ansichten, Funktionen und Slider darstellen kann. Diese haben von Haus aus ein Performance-Problem, da sehr viel HTML, CSS und sehr viel Javascript ausgeliefert wird. Das wirkt sich sowohl auf die Anzahl der Anfragen, als auch auf die zu ladende Datenmenge aus und somit auf die Geschwindigkeit.
Das Theme an sich sollte möglichst wenig Bilder und Grafiken beinhalten, um hier schonmal die Byte-Zahl gering zu halten. Die Bilder kann man nochmal optimieren mit einem Programm wie z.B. ImageOptim (nur optimieren) oder Gimp (auch bearbeiten).
Dein Content sollte so gestaltet sein wie du es möchtest. Da kannst du nicht unbedingt auf Bilder verzichten, optimieren solltest du diese trotzdem vor dem hochladen. Lade die Bilder nie in Originalgröße hoch. Wer hier auf Nummer sicher gehen möchte nimmt so etwas wie den Optimus Image Optimizer , ShortPixel oder WP Smush , die das für dich automatisch erledigen. In den Entwicklertools kannst du genau sehen für wie viel der Ladezeit deine Bilder verantwortlich sind indem du im Network-Fenster auf „Images“ klickst.
Lazy Load
Ein Skript, dass nur die Bilder lädt, die auch im Viewport des Users zu sehen sind. Alles was er noch nicht sehen kann, wird auch noch nicht geladen. Scrollt der User herunter werden auch erst die Bilder geladen, die dann gebraucht werden. Ein einfaches Plugin hierfür ist z.B. Crazy Lazy oder BJ Lazy Load. Man muss immer ein wenig rumprobieren, was mit dem eigenen Theme am Besten funktioniert.
Schriften
Du solltest auch darauf achten möglichst wenige Schriftschnitte zu verwenden, denn auch diese müssen geladen werden. Viele Themes bieten die Möglichkeit ganz einfach Google Fonts zu implementieren. Das ist zwar praktisch, führt aber oft dazu, dass du natürlich mehrere Schriften lädst. Das kann die kleine Fußzeile sein in der nur „Copyright“ steht und schon eine Schrift mehr geladen +50kb.
Des Weiteren werden bei dieser Methode regulär vier verschiedene Versionen von jedem dieser Schnitte geladen, um die Schrift in allen Browsern richtig darzustellen. Moderne Browser laden wirklich nur die Schriften, die auch dargestellt werden, aber einmal fett oder italic oder italic & fett im Text und es werden direkt diese Schriftschnitte hinzugeladen. Für mehr Performance könntest dich entscheiden, z.B. nur die .woff-Datei der Schrift einzubinden, die auf den meisten Browsern dargestellt wird. Falls dann ein Browser dies nicht darstellen kann, wird eine Ersatzschrift angezeigt.
Wenn du etwas fit bist in HTML und CSS kannst du die Google-Schriften selber über https://google-webfonts-helper.herokuapp.com/fonts einbinden. Das ist richtig angewendet performanter als die Einbindung per Google-Script. Zusätzlich hat es den Vorteil, dass Google nicht jedes mal nach Hause telefoniert.
Caching
Caching wird dir viel Performance bringen. Caching kennst du von deinem eigenen Browser, der bereits besuchte Seiten „cached“. Das heißt, er merkt sich die Dateien die geladen wurden, speichert diese auf deinem Rechner und hat diese direkt bei einem Neuaufruf bereit.
Caching für dein WordPress läuft etwas anders ab. Normalerweise fängt der Server bei Seitenaufruf an deine Seite zusammen zu bauen und benötigt nun die Inhalte aus deiner Datenbank. Diese sucht er sich jetzt mühsam nach und nach aus den Datenbankeinträgen heraus, vom Logolink, über deinen Text, bis zu den Links in deinem Footer, oder was sonst noch so in deiner Datenbank gespeichert ist. Das dauert natürlich und dein Server hat viel Arbeit damit.
Also setzen wir Caching ein. Nach dem allerallersten Aufruf der Seite merkt sich der Server, welche Inhalte er aus der Datenbank „eingebaut“ hat und braucht von nun an nicht mehr bei jedem Aufruf alles aus der Datenbank heraussuchen. Das komplette HTML-Dokument mit den Informationen aus der Datenbank wird quasi zwischengespeichert und kann ohne Umwege direkt geladen werden.
Für Anfänger empfiehlt sich das Plugin Cachify, dass diese Aufgabe gut erledigt. Fortgeschrittene können sich an den zahlreichen Einstellungen von WP Fastest Cache oder WP Super Cache die Zähne ausbeißen, um das Bestmögliche heraus zu holen. Es gibt auch Bezahlplugins wie z.B. WP Rocket, die dir mit einem guten Support helfen alles optimal einzurichten.
Möglichst wenig Skripte
Dein Theme, deine Plugins und WordPress selber, alle laden Skripte. Setze also ein schlankes Theme ein und möglichst wenig Plugins. Wenn du kannst lade Skripte nur dort, wo sie gebraucht werden. Zum Beispiel ein Skript für ein Kontaktformular wird nur dort gebraucht, wo es auch auftaucht; ebenso ein Skript für eine Google Map, einen Kalender oder ähnliches. Je weniger Skripte, desto weniger Ladezeit. Manchmal wird für eine kleine Funktion viel zuviel Skript geladen. Wenn du darauf Einfluss hast, reduziere die Skriptmenge.
Skripte zusammenlegen (merge / concatenate)
Wenn du aus 4 Javascripten und 7 CSS-Dateien eine Javascript und eine CSS-Datei machst, muss der Server weniger Anfragen (Requests) bearbeiten. Simpel und effektiv. Autoptimize kann das natürlich, es gibt aber auch Plugins wie Merge+Minify+Refresh, die das für dich erledigen.
Skripte Minifizieren (minify)
Neben der Reduzierung der Skriptanzahl an sich, kannst du die Skripte selbst auch noch optimieren. Sowohl dein Hauptdokument, als auch die geladenen Skripte enthalten Leerzeichen, Umbrüche und Tabs, die kein Webbrowser braucht, um deine Seite richtig darzustellen. Hierfür gibt es zahlreiche Plugins wie Merge+Minify+Refresh. Einfach mal in den Plugins suchen und testen.
Skripte in den Footer
Um deinen Usern möglichst schnell die Seite zu zeigen, kannst du einige Skripte erst am Ende deines Dokuments laden. Mit einem Tool wie Async JavaScript kann das z.B. Nichts für Anfänger! Du solltest genau wissen, welche Sachen der User direkt beim Laden braucht und welche nicht.
Critical CSS
Die Vollprofis laden nur das CSS direkt, dass man auch für die erste Ansicht braucht. Der Rest wird im Footer geladen.
Und?
Puha. Wenn du das alles gemacht hast, können schonmal zwei/drei lange Abende vorüber sein. Im Idealfall brauchst du aber an deinen Einstellungen nichts mehr zu ändern und hast nun eine dauerhaft optimierte Seite! Glückwunsch!
Reicht noch nicht? Dann Google mal was ein CDN ist, Domain Sharding, was Expire header, HHVM oder nginx ist. Schneller geht immer!
[EDIT] W3 Total Cache wurde aus dem Beitrag vollkommen entfernt, weil es in letzter Zeit einige Sicherheitslücken gab und es offiziell nicht kompatibel ist mit WordPress 4.7