Website-Cache einfach erklärt

TL;DR – Das Wichtigste in Kürze

• Browser-Cache = Campingwagen: Was du einmal mitgebracht hast (Bilder, CSS, Fonts), liegt beim nächsten Besuch schon bereit – die Seite lädt schneller.
• Server-Cache = vorgepacktes Auto: Der Server hält statische Inhalte im Speicher, statt sie bei jedem Aufruf neu zusammenzusuchen.
• CDN = Campingplätze weltweit: Kopien deiner Daten liegen auf Servern rund um den Globus – Nutzer bekommen sie vom nächstgelegenen Standort.
• Seiten-Cache = fertiges Auto: CMS wie WordPress speichern fertig gebaute HTML-Seiten, statt sie bei jedem Request neu zu erzeugen.
• DNS-Cache = gespeicherte Navi-Adresse: Die IP-Adresse einer Domain wird lokal gespeichert, damit der DNS-Lookup nicht jedes Mal wiederholt werden muss.
• Fazit: Alle Caches sparen Zeit und Datentransfer – aber wenn etwas klemmt, muss man wissen, welchenCache man leeren muss.

Caching ist ein Mysterium für sich. Und auch für mich als Techie ist es nicht immer ganz verständlich wo genau etwas gerade “im Cache hängt” und warum eigentlich. Wie soll es dann erst Menschen gehen, die nicht so tief in der Technik stecken? Vereinfacht gesagt ist ein Cache eine Art Zwischenspeicher von Dateien. Um dieses Konzept besser zu veranschaulichen, habe ich im Laufe meiner Zeit in der Beratung eine Allegorie gebildet.

Caching ist wie Camping

„Caching ist wie campen“ klingt etwas abstrakt, aber ich verspreche, gleich wird’s einleuchtend. Wenn man einen festen Campingplatz hat, macht man am Ende der Saison den Campingwagen sauber und nimmt alles mit nach Hause.

Wenn man jetzt im Frühjahr das erste mal auf den Campingplatz fährt, macht man etwas, das nennt sich “Ancampen”.

Browser-Cache – Der Campingwagen

Bei der ersten Anreise nach dem Winter, muss man alles erst einmal mitbringen oder vor Ort einkaufen. Man räumt Lebensmittel und Gewürze in den Schrank, bezieht die Bettwäsche, stellt die Gasflasche für den Grill in den Schuppen und so weiter und so fort.

Der große Vorteil ist, beim nächsten Mal, wenn man zum Campingplatz fährt, muss man nur die Hälfte mitnehmen. Denn vieles ist schon da.

Wenn wir den Campingwagen jetzt mit unserem Browser vergleichen, dann haben wir eine Menge Ressourcen bereits im Cache vorrätig. Bei der nächsten Anreise haben wir nicht so viele Sachen im Auto, das Auto ist leichter und dadurch sind wir schneller und verbrauchen weniger Sprit. So ist das dann eben auch bei einer Website. Wenn schon viele der benötigten Ressourcen im Browser-Cache liegen, ist die Seite beim nächsten Aufruf deutlich schneller, weil nicht alle Bilder, CSS- und JS-Dateien und Fonts neugeladen werden müssen, sondern effizient aus dem Cache geholt werden.

Okay, jetzt haben wir den Browser-Cache, aber es gibt ja auch noch andere Arten von Cache. Dran bleiben lohnt sich!

Server-Cache – Das bereits gepackte Auto

Der Server-Cache lässt sich am besten, um in diesem Bild zu bleiben, mit dem bereits gepackten Auto vergleichen. Nur für den Fall, dass einen die Lust packt auf den Campingplatz zu fahren, lohnt es sich, das nötigste und das was sich nicht oft ändert, bereits im Auto zu haben. Damit meine ich die Basics, wie Zahnbürste, Unterwäsche, Badehose, Ladekabel, Schlappen und ein Paket Wasser. Dadurch verkürzt sich die Zeit des Packens bereits und man vermeidet, die Ladekabel erst nochmal suchen zu müssen. Alles, was man häufiger mal erneuert, wie Hosen, Jacken und Pullover, packt man frisch zusammen und schmeißt die Tasche ins Auto.

Server machen das auch. Damit statische Inhalte nicht erst aus verschiedenen Quellen zusammengesucht werden müssen, gibt es einen Server-Cache. Bilder kommen aus dem einen System, CSS- und JavaScript aus einem anderen und die HTML-Seite aus dem CMS. Wenn der Server alles, was sich nicht geändert hat, bereits im eigenen Speicher hat, muss er nicht erst noch alles zusammensuchen, sondern kann die Dateien direkt auf die Reise zum Browser schicken. Schnellere Auslieferung der Webseite = glücklicher User.

CDN – Campingplätze auf der ganzen Welt

Ein CDN macht am Ende auch nichts anderes mehr. Der Unterschied ist, dass die Server über die ganze Welt verteilt sind. Je nachdem, von wo man eine Website aufruft, bekommt man die zwischengespeicherten Daten vom nächstgelegenen Server. Alle Server weltweit haben dabei eine identische Kopie aller Ressourcen im Zwischenspeicher. Im Camping-Bild wäre das so, als hätte ich in verschiedenen Regionen der Welt Campingplätze. An jedem der nächstgelegenen Flughäfen stünde ein identisches, vorgepacktes Auto bereit. Ich habe dann nur meinen Rucksack dabei und kann vom Flughafen mit meinem Handgepäck direkt zum Campingplatz fahren und es fehlt mir an nichts.

Seiten-Cache – Was wir nicht wollen, ist das Auto auch noch zusammenbauen zu müssen

Auf vielen Websites entsteht die eigentliche Seite in einem CMS, wie beispielsweise TYPO3 oder WordPress. Diese Systeme bauen die HTML-Seiten erst mit PHP zusammen. Damit die Seite, die ein User anfragt, nicht jedes Mal neu zusammengebaut werden muss, haben diese Systeme Seiten-Caches. Ist eine Seite gebaut, wird diese im Seiten-Cache gespeichert, bis zu dem Zeitpunkt, wo sie geändert wird. Dann wird diese beim nächsten Request wieder neu gebaut.

Gäbe es diesen Seiten-Cache nicht, wäre das so, als würde man bei jedem Trip zum Campingplatz, erst einmal das Auto zusammenbauen müssen. Das dauert viel zu lange und am Ende fahren wir gar nicht.

DNS-Cache – Der Adressspeicher im Navi

Der Vollständigkeit halber sei an dieser Stelle noch der DNS-Cache erwähnt. Dieser speichert zwar keine Dateien oder Ressourcen zum Bau der Seite zwischen, hilft aber dabei, den Server beim nächsten Aufruf einer bereits besuchten Website schneller zu finden.

Wenn man eine Website aufruft, wird ganz schnell im Hintergrund ein DNS-Lookup vollzogen. Der Domain-Name wird auf die IP-Adresse des Servers aufgelöst. Im Prinzip ist das so, als würde die Adresse eines Gebäudes in Koordinaten aufgelöst. Damit dieser DNS-Lookup nicht bei jedem Aufruf einer Seite dieser Website vollzogen werden muss, wird die IP-Adresse auf dem Gerät gespeichert.

Vergleichbar ist das mit der Adresse, die man im Navigationssystem eingibt. Beim ersten Mal muss man die ganze Adresse eingeben, und beim nächsten Mal ist diese bereits gespeichert.

Was alle Caches gemeinsam haben

Und so ist es eben auch beim Cache. Egal, welchen Cache wir nehmen, sie alle dienen dazu, Zeit und den Transfer von Daten zu sparen. Alles was man beim Aufruf einer Seite mehrmals benötigt, kann man zwischenspeichern.

Und was tun, wenn’s mal klemmt? Wir alle kennen es. Wir ändern etwas an der Seite und es wird einfach nicht angezeigt. Dann kann man die einzelnen Caches auch gezielt löschen, bzw. invalidieren. Ich hoffe, diese Allegorie konnte ein bisschen Licht ins Dunkel bringen und dabei helfen, besser einschätzen zu können, wo es bei Problemen mit dem Cache hakt. Denn es bringt nichts, wenn es im Auto stinkt, den Kühlschrank im Campingwagen zu reinigen. Manchmal muss man einfach mal die Schlüpper waschen 😉