Willst du deine Website schneller machen, benötigst du Caching. Falls du mit diesem Begriff eher weniger anfangen kannst, lies trotzdem weiter. Ich erkläre dir in diesem Artikel
- was Caching ist
- wie du Caching einrichtest
- warum du Caching unbedingt einsetzen solltest
- wie viel Performance-Gewinn durch Caching möglich ist
- was das ganze mit Burgern zu tun hat ;-)
Denn – soviel sei schon verraten – Caching macht deine Website schneller. Und nur eine schnelle Website ist attraktiv für deine Besucher!
Die Geschichte vom langsamen Fast Food Burger
Stell dir vor du gehst in dein Lieblings-Fast Food Restaurant und bestellst dir einen Burger.
Das ganze läuft folgendermaßen ab:
Du (1) stehst vor der Theke und willst einen Burger. Also sagst du das der freundlichen Dame hinter der Theke (2). Sie startet daraufhin den Prozess in der Küche (3). Der Koch holt sich die Zwiebel vom Regal, nimmt das Fleisch aus dem Kühlschrank (4) und brät es. Dann geht er noch zum anderen Kühlschrank und holt sich den Salat sowie die Zwiebel (5). Anschließend schneidet er die Zwiebel, “baut” den Burger zusammen, verpackt ihn und gibt in der Dame an der Kasse, die ihn an dich weitergibt.
So weit, so klar.
Gleich nach dir kommt aber der nächste Kunde, der auch einen Burger will. Die freundliche Dame hinter der Theke startet den Prozess erneut. Sie informiert den Koch. Der holt die Zwiebel und das Fleisch, schneidet die Zwiebel, brät das Fleisch. Dann organisiert er den Salat, baut alles zusammen und verpackt den Burger.
Du erkennst schon, bei mehreren Kunden, ist diese Vorgehensweise nicht sehr effizient.
Schneller Burger zubereiten dank Caching
Viel besser wäre es doch, wenn der Koch beim ersten Mal gleich mehrere Zwiebel mitnehmen und aufschneiden würde. Dasselbe gilt auch für das Fleisch und den Salat – ein Gang zum Kühlschrank sollte nicht nur für ein einziges Salatblatt erfolgen.
Liegt also alles fertig und griffbereit neben der Arbeitsfläche, kann der Burger schneller zubereitet und verpackt werden.
Noch viel besser wäre es aber, wenn der Koch gleich mehrere Burger zubereitet und (schon verpackt) warm hält. So muss die freundliche Dame hinter der Theke nur mehr nach hinten greifen und kann die fertigen Burger sofort an den hungrigen Kunden übergeben.
Der Kunde hat dann dank Caching schneller seinen Burger in der Hand und wurde vor dem Hungertod gerettet.
Und wie ist das jetzt bei deiner Website?
Bei deiner Website läuft der Prozess sehr ähnlich ab:
- Um die Startseite deiner Website auszuliefern fragt der Browser (1) deinen Server (2) bei deinem Hosting-Provider nach der Startseite.
- Dieser Server startet daraufhin WordPress (3), welches aktuell aus über 1.800 Dateien (4) besteht und führt den (PHP-)Code aus.
- Um deine Startseite zu laden greift WordPress auch 100te Male auf die Datenbank (5) zu – um die Menüs, Widgets und den Inhalt der Seite zu laden.
- Dann schickt der Webserver die Antwort in Form einer HTML-Datei an den Browser zurück, welcher im nächsten Schritt den Server um alle Bilder, Stylesheets (=Farben und Formen) und Scripts bittet – was den Prozess wieder von vorne startet.
- Erst wenn der Webserver alle diese Dateien an den Browser geschickt hat, kann dieser die Seite anzeigen.
Beim nächsten Seitenaufruf müssen ebenfalls wieder all diese Schritte abgearbeitet werden. Dabei wäre es effizienter, wenn Daten, die WordPress schon aus der Datenbank geladen hat, nicht noch einmal geladen werden müssen.
Dank Caching werden diese “Zwischenergebnisse” genau wie der geschnittene Zwiebel oder das gebratene Fleisch im “Cache vorgehalten”.
Wasserdichte Angebote schreiben in nur 10 Minuten?
Hol dir die ultimative Angebotsvorlage für Webdesigner, Web-Programmierer und Online-Marketer.
Welche Arten von Caching gibt es?
Wie im Beispiel mit dem Fast Food Restaurant, kannst du auch bei deiner WordPress Website an verschiedenen Stellen ansetzen, um mit Caching die Performance deiner Website massiv zu erhöhen.
Hinweis: die hier aufgelisteten Methoden sind nicht die einzigen Möglichkeiten, aber die mit der meisten Verbreitung und der Möglichkeit, sie einfach umzusetzen.
Client Side Caching / Browser Cache (1)
Bleiben wir noch kurz beim Fast Food Restaurant. Sitzt du gerade zu Hause auf der Couch und bekommst Hunger, wäre es doch am besten , wenn die warmen Burger bereits fertig bei dir in der Küche liegen würden. Das entspricht “Client Side Caching”.
Umgelegt auf deine Website bedeutet dies, dass die Website am schnellsten geladen wird, wenn alle Bilder, aber auch Stylesheets und Scripte schon im Browser vorhanden sind.
Das kannst du durch sogenannte HTTP-Header beeinflussen – dann bleiben nach dem ersten Aufruf der Seite genau die oben genannten Dateien im Browser gespeichert. Besuchst du noch einmal die selbe Seite müssen diese Daten nicht mehr vom Server geladen werden und die Website wird blitzschnell angezeigt.
Idealerweise bleiben also alle statischen Elemente (Bilder, Scripts, Stylesheets) im Client-Cache und werden nur beim ersten Aufruf der Seite geladen.
Dasselbe gilt auch für die Seiten selbst. Auf kleineren Blogs ändert sich der Inhalt nicht jede Stunde, daher kann auch die Seite selbst im Browser im Cache bleiben. Hier kannst du nachlesen, wie du den Browser-Cache löschen kannst.
Page Cache (2)
Hast du leider keine fertigen Burger zu Hause, musst du dich auf den Weg ins Restaurant machen. Hat die freundliche Dame hinter der Theke mitgedacht und kann sie dir die bereits fertig verpackten Burger geben, entspricht dies Page Caching.
Der große Vorteil – nicht nur du sondern auch andere Besucher des Restaurants profitieren von dieser Optimierung und bekommen ihre Burger schneller ausgehändigt.
Im Restaurant wird dir das noch egal sein, aber bei deiner eigenen Website erhöht sich so wieder die Geschwindigkeit. Und zwar für alle Besucher, nicht nur für einen einzelnen.
Die Auslieferung deiner Seite wird damit gleich schnell wie die einer statischen Datei, denn die Seite wird ohne Umweg über WordPress ausgeliefert. Hier das Beispiel einer WordPress-Installation mit Divi*:
Ist kein Page-Cache aktiv, benötigt WordPress 875ms um die Startseite zu erstellen (was kein schlechter Wert ist!):
In diesen 875ms lädt der Server WordPress (1.800 Dateien!), greift 100te Male auf die Datenbank zu, lädt alle Widgets, Menüs und so weiter…
Ist der Page-Cache aktiv und die Seite im Cache, werden aber nur mehr rund 22ms benötigt, um die Seite zu erstellen. Das ist über 40x schneller!
Die gesamte Auslieferung der Seite an den Browser wird damit rund 6,5x schneller.
Der Grund ist, dass der Server nur mehr EINE Datei von der Festplatte laden muss. Es gibt keine Datenbankzugriffe mehr und kein WordPress, das ausgeführt wird.
WordPress Object Caching (3)
Schneidet der Koch für jeden Burger die Zwiebel, ist das nicht sehr effizient. Schneidet er aber mehrere Zwiebel auf einmal, muss er nicht erneut zum Messer greifen und spart sich Zeit.
Dasselbe gilt für WordPress. Nicht immer lässt sich die ganze Seite im Cache halten. Sind aber auf mehreren Seiten die selben Widgets vorhanden, so muss dieses nur einmal erstellt werden. Ein anderes Beispiel sind Produkte im WordPress-Shop. Dank Object Caching muss das Produkt nur einmal von der Datenbank geladen und erstellt werden.
Datenbank Caching (5)
Auch beim Salat kann der Koch noch etwas optimieren. Geht er wegen jedem Salatblatt extra zum Kühlschrank in der hinteren Ecke macht er zwar Bewegung, es wird aber lange dauern bis das Essen auf den Tisch kommt. Jeder schlaue Koch holt sich daher gleich eine ganze Schüssel mit Salat – das entspricht Datenbank Caching.
Auch WordPress speichert die Resultate von der Datenbank am Server und führt (relativ langsame) Datenbankabfragen nicht nochmals aus.
Der Unterschied zu Object Caching ist rein technischer Natur und liegt darin, dass Objekte auch aus mehreren Datenbankabfragen erstellt werden können.
Warum du Caching unbedingt einsetzen solltest
Der größte Vorteil – durch Caching lädt deine Website schneller. Schnellere Ladezeiten bedeuten wiederum, dass deine Kunden zufriedener sind – denn wer wartet heutzutage schon gerne lang?
Eine schnelle Website bedeutet auch ein besseres Ranking bei Google. Wird deine Website weiter vorne angezeigt, bedeutet dies, dass auch mehr potentielle Kunden deine Website besuchen.
Wie du Caching in WordPress einrichtest
Das ganze klingt jetzt furchtbar kompliziert, oder?
Aber ich bin ein Fan der 80:20-Regel und mit 20% Aufwand, hast du deine Seite schon um 80% verbessert. Daher sind für Websites ohne spezielle Performance-Ansprüche die meisten Caching-Anforderungen schon durch die Installation eines Plugins abgedeckt.
Nur: eine Suche im WordPress Repository nach “caching” liefert 49 Seiten! mit Plugins… uff.
Aus diesem Grund, hier eine kurze (alphabetische) Liste der Plugins, die ich kenne und die meiner Meinung nach sehr gut funktionieren:
Achtung! Aktiviere immer nur EIN Caching-Plugin! Wenn du mehrere aktivierst, kommen sich diese gegenseitig in die Quere und im schlimmsten Fall funktioniert deine Website somit nicht mehr! Zu viele Köche verderben eben den Brei bzw. den Burger ;-)
Bei einem auf WordPress spezialisierten Hoster wie RAIDBOXES* benötigst du kein zusätzliches Caching-Plugin.
Wie viel Performance-Gewinn du dir durch Caching erwarten kannst
Wie du weiter oben schon gelesen hast, hat alleine Page Caching unter Umständen dramatische Auswirkungen auf die Ladezeit einzelner Seiten. Doch die gesamte Ladezeit einer Website ist noch von weiteren Faktoren abhängig.
Eine generelle Aussage lässt sich daher nicht treffen. Ist dein Hoster beim Ausführen von PHP sehr langsam, wird ein Page Cache vermutlich mehr bewirken, als bei einem Premium Hoster*.
Sind deine Bilder nicht optimiert, hilft dir auch ein schnelles WordPress nicht viel.
Meiner Erfahrung nach, kannst du aber durch die Installation eines der oben genannten Caching-Plugins merkliche Performance-Gewinne in der Größenordnung von 30-70% erreichen. Wie du diesen Gewinn richtig misst, erfährst du in Kürze in diesem Blog.
Vorsicht Stolperfallen!
Ein Problem entsteht bei Caching in Kombination mit eingeloggten Benutzern und Warenkörben. Seiten mit Inhalten von nur einem Benutzer (wie eben der Warenkorb) sollten nicht im Cache landen, sonst sieht der zweite Benutzer – unter Umständen – die (gecachte) Variante des Warenkorbs vom ersten Benutzer…. Das ist nicht gerade ideal ;-)
Gute Caching-Plugins erkennen dieses Problem, zumindest für WooCommerce und andere gängige Shopping-Plugins, anderenfalls musst du hier sonst selbst nachbessern.
Willst du deine Website vom Profi auf Geschwindigkeit überprüfen und optimieren lassen, dann ist der Website Check genau das Richtige für dich.
Lass uns einfach Websites bauen,
Michael
3 Antworten
SUUUUPER. Vielen Dank – ich hab’s kapiert, hab es endlich kapiert. DANKE!
Ich nutze bisher Autoptimize, das steht nicht in deiner obigen Liste. Da werde ich mal wechseln und schauen :)
Was ich nicht verstehe ist folgendes: Warum sollte ich den Cache des Plugins denn zwischendurch leeren? Das ist doch dann eher kontraproduktiv, wenn ich alles wieder in den Kühlschrank packe? Oder hat es damit zu tun, dass ich den Cache leeren sollte, wenn ich an der Seite gearbeitet habe – es quasi neue Zutaten gibt?
Herzliche Grüße, Devi
Hallo Devi,
freut mich, wenn der Artikel bei dir zu einer kleinen Erleuchtung geführt hat :-D
Autoptimze optimiert die Assets, ist aber kein Cache. Daher findest du es auch nicht in der obigen Liste. Ein gutes Caching-Plugin macht aber auch die Optimierung, daher setze ich Autoptimize nicht mehr ein – doppelt heißt in dem Fall nämlich nicht, dass es besser funktioniert.
Du musst den Cache leeren, wenn es neue Inhalte gibt. Die Plugins machen das meist automatisch, aber ab und an erkennen sie das nicht… und du hast recht, wird der Salat welk wirfst du ihn weg (=Cache leeren) und holst frischen aus dem Kühlschrank…
lg Michael
super!