Browser Caching verstehen und sinnvoll einsetzten

Caching bis ans Limit

Wer ein Wordpress Caching Plugin nutzt, der sorgt zumindest schon einmal dafür, dass sein Blog nicht bei jedem Aufruf erst dynamisch generiert werden muss. Das bringt Performance, doch das Ende ist damit noch lange nicht erreicht. Mit dem sogenannten Browser Caching kann nämlich dafür gesorgt werden, dass die Seiten direkt beim Nutzer zwischengespeichert werden. Der Vorteil ist schnell erklärt, denn wenn die Seite vom Browser selbst gespeichert wird, braucht es keinen echten Kontakt mehr zum Server. Das wiederum bedeutet, dass der Nutzer die Seite quasi ohne echte Ladezeit angezeigt bekommt. Genial, oder etwa nicht? Wer mehr über das Caching selbst erfahren möchte, sollte in meinen anderen Artikel zum Thema nachschauen, wo ich selbiges noch einmal detailliert erkläre. Hier geht es nun um das Browser Caching.

Browser Cache: Ein Beispiel

Doch Moment. Am besten ist es, ich erkläre euch den Vorgang ganz einfach anhand eines Beispiels. Nehmen wir an, ihr schaut euch eine Seite mit 10 Bildern an. Eine Liste schöner Kunstwerke, Fotos oder was auch immer. Beim ersten Aufruf der Seite, lädt nun jedes Bild einzeln und sehr langsam nach, denn die Bilder wurden in höchster Qualität hinterlegt, brauchen also einiges an Speicher und müssen erst vom Server heruntergeladen werden. So baut sich eine Grafik nach der anderen auf, bevor sie endlich komplett angezeigt werden. Bestimmt hat das 10 bis 20 Sekunden gedauert. Richtig nervig also.

Bei aktiviertem Browsercache dauert der erste Aufruf zwar ebenso lange, der zweite aber nicht mehr. Der Browser speichert alle 10 Fotos auf der Festplatte des Nutzer und je nach Gültigkeit, behält er sie eine gewisse Zeit lang im Browser Cache, vielleicht sogar über mehrere Wochen oder Monate. Das bedeutet: Wenn ihr jetzt noch einmal auf den Blog geht, zum Beispiel weil ihr eines der Fotos euren Freunden präsentieren wollt, werden alle Fotos blitzschnell und direkt angezeigt. Das dauert nicht einmal 1 Sekunde, da alles im Browser Cache, also auf der eigenen Festplatte hinterlegt wurde. So müssen auch die zuvor langsam ladenden Bilder, nicht erneut und langwierig heruntergeladen werden, da sie schon im Cache des Browser liegen.

Da sich der Browser Cache nicht nur auf Bilder bezieht, sondern auch auf HTML-Seiten selbst, sowie CSS- und Javascript-Dateien, die auf allen Seiten eines Blogs zum Einsatz kommen, sorgt die Zwischenspeicherung allgemein für mehr Speed. Ist die CSS-Datei beispielsweise einmal im Cache gelandet, muss sie auch beim Aufruf einer Unterseite etc. nicht mehr erneut geladen werden. Das gilt dann auch für Logos, Scripte und viele weitere Elemente, die oft auf allen Blogseiten geladen werden. So spart ihr Ressourcen und der Nutzer hat die wichtigsten Dateien bereits auf der Festplatte liegen, weshalb ein erneuter Download überflüssig ist.

Browser Cache: Das Problem

Nun ergibt sich beim Thema Browser Cache aber leider ein Problem. Nämlich, das gecachte Inhalte nicht automatisch erneuert werden. Hat der Nutzer die Bilder für ein Jahr im Cache, werden sei ihm auch ein Jahr lang so angezeigt (abgesehen vom Neuladen bzw. Cache Reload im Browser), selbst wenn sich die Grafik verändert hat. Versteht ihr? Was im Browser Cache liegt, merkt nicht, ob auf dem Server etwas geändert wurde, da der Server nicht mehr kontaktiert werden muss. Doch auch dafür gibt es ein Beispiel:

Um 15:00 Uhr kommt ein Nutzer auf euren Blog. Um 15:30 Uhr veröffentlicht ihr einen neuen Artikel. Als der Nutzer, um 15:45 Uhr wieder auf euren Blog kommt, sieht er diesen neuen Artikel aber noch nicht, da sein Browser Cache für HTML-Seiten (1 Stunde im Beispiel) ihm noch die alte Version anzeigt. Erst um 16:00 Uhr würde er den neuen Artikel sehen, da erst dann der Cache seine Gültigkeit von einer Stunde verliert. Ist das jetzt schlimm? Eigentlich nicht, der Vorteil in Sachen Performance ist aber enorm und so rate ich immer zu möglichst langen Cache-Zeiten, wenn es nicht gerade um zeitkritische News geht. Denn was macht es auf einem normalen Blog schon, wenn einige Nutzer den neuen Artikel ein wenig später sehen? Eben, eigentlich gar nichts.

Wer das nicht möchte, kann aber immer noch die Bilder, CSS- und Javascript-Dateien in den Browser-Cache laden und für HTML-Seiten eine Ausnahme erstellen, sodass diese eben nicht zwischengespeichert werden. So profitieren zumindest die Ressourcen vom Cache des Browsers. Für mich persönlich gibt es aber keinen Grund, warum der Browser Cache für die HTML-Seiten nicht mindestens eine Stunde lang gültig sein sollte, schließlich ändert sich auf den meisten Blogs höchstens ein, zwei mal am Tag etwas und vom Cache profitiert allgemein die Performance.

Am Ende gibt es natürlich dennoch einen Trick, mit dem ihr das Neuladen von Dateien im Browser Cache erzwingen könnt, falls ihr doch mal spontan etwas geändert habt und wollt, dass Nutzer die neue Version sehen. Entweder ihr benennt die Datei ganz einfach um, sodass diese erneut geladen werden muss, oder ihr setzt dynamische Werte an die Datei. Wie das geht habe ich vor langer Zeit schon einmal erklärt. Eigentlich nicht schwer, aber eigentlich auch überflüssig, wenn zuvor bereits mit Überlegung optimiert wurde.

Cache-Control Headers nutzen

Die am häufigsten verwendete Methode (und auch die effektivste) für das Browser Caching, sind die sogenannten Cache-Control Headers. Diese legen den genauen Ablauf einer Datei fest, sodass sie zum Beispiel nur für eine Woche, einen Monat, ein Jahr, oder vielleicht auch nur für eine Stunde im Browser Cache des jeweiligen Besuchers verbleibt. Hier solltet ihr euch also vorher überlegen, wie oft sich Inhalte bei euch ändern und den Wert entsprechend anpassen.

Das Beispiel unten kann im Grunde genau so in eure .htaccess-Datei übertragen werden. Im Beispiel werden Grafiken jeglicher Art für ein ganzes Jahr, CSS- und Javascript-Dateien für einen Monat und alles andere für eine Stunde in den Browser Caches des Nutzers gelegt. Diese Voreinstellung ist für eine perfekte Wordpress Performance durchaus empfehlenswert, da sich Bilder eigentlich gar nicht, CSS- und Javascript-Dateien nur sehr selten und alles andere sich meist auch nicht besonders häufig ändert. So wird der Browser Cache genutzt, um den Server komplett zu entlasten und die Ladezeiten in die Höhe zu katapultieren.

<IfModule mod_headers.c>

<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>

<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

Header set Cache-Control "max-age=3600, public"

</IfModule>

Keine Angst vor dem Browser Caching

Viele Blogger haben regelrecht Angst vor dem Browser Cache, da sich dieser eben nicht einfach so leeren lässt. Das ist unbegründet, wie ich finde, denn der Browser Cache ist mit die sinnvollste und stärkste Optimierungsmaßnahme, die den Server noch dazu extrem entlasten kann und bei den Nutzern für perfekte Ladezeiten sorgt. Gerade wenn sich Bilder und CSS-Dateien etc. nicht verändern, kann hier auf einfache Art und Weise für mehr Leistung gesorgt werden, weil sie einmal abgelegt, immer von der eigenen Festplatte aus abgerufen werden können. Am besten einfach mal ausprobieren.

Viele weitere Informationen zum Thema Caching, zum Beispiel wie genau der Wordpress Cache eigentlich funktioniert, findet ihr auf der Unterseite zur Wordpress Performance. Dort gibt es noch eine menge weiterer Tipps und auch weitere Hinweise zum Caching (weiter unten auf der Seite). Einfach mal reinschauen.