Browser-Cache: Neuladen von CSS und Javascript erzwingen

Neuladen trotz Browser-Cache erzwingen

Wer Wordpress richtig optimiert, der nutzt unter anderem auch eine stark angepasste .htaccess, die dafür sorgt, dass Inhalte im Browser-Cache landen. So etwas ist enorm wichtig, denn nur so kann eine nahezu perfekte Performance garantiert werden, da oft genutzte Inhalte direkt auf dem jeweiligen Gerät des Besuchers gespeichert und auch von da aus abgerufen werden. Doch der Browser-Cache hat auch seine Nachteile, denn er lässt sich später nicht einfach verändern. Wer beispielsweise einstellt, dass CSS-Dateien und Javascript für ein ganzes Jahr beim Nutzer gespeichert werden, kann diese Einstellung später nicht widerrufenen.

Falls er also Änderungen an den Dateien vornimmt, sieht der entsprechende Nutzer diese nicht sofort, weil er noch die alten Dateien gesichert hat. Die liegen für ein Jahr im Browser-Cache und werden erst nach Ablauf dieser Zeit, oder wenn der Nutzer den Cache manuell leert, beim Aufruf des Blogs erneuert. Nun ist es aber so, dass zwischendurch oft kleine Anpassungen in der CSS-Datei vorgenommen werden, oder ein bisschen Javascript hinzukommt. Gleichzeitig ist der Browser-Cache aber eben ziemlich nützlich, solche Dateien dürfen also ruhig einen Monat oder sogar ein Jahr beim Besucher gespeichert werden.

Doch wie bekommt der entsprechende Nutzer dann die Änderungen zu sehen? Es gibt dafür zwei bzw. sogar vier Möglichkeiten, das Neuladen bei Änderungen zu erzwingen, ganz egal wie der Browser-Cache eingestellt wurde.

Browser-Cache umgehen und Datei neu Laden

1. Erste Möglichkeit: Ihr nennt die Datei ganz einfach um. Beispiel: Wenn aus der scripts.js eine scripte.js wird, muss der Besucher diese neu laden, da der Browser sie als neu ansieht, die alte Datei im Cache wird hinfällig. Das ist natürlich etwas nervig, weil ihr dann bei jeder Änderung Dateinamen und eventuelle Verlinkungen komplett anpassen müsst.

2. Der klügere weg ist es, einfach einen kleinen Zusatz an die Datei anzuhängen. Der ist “offiziell” gar nicht vorhanden, denn die Datei wurde nicht umbenannt, er reicht aber, um den Browser-Cache zum Neuladen zu zwingen. So könnt ihr dafür sorgen, dass auch die Besucher die Neuerungen sehen, die die alte Datei noch in ihrem Browser-Cache liegen haben. Aus der scripts.js oder der style.css bzw. deren Verlinkungen, wird dann so etwas wie:

<link href="style.css?v=1">

Der Vorteil dieser Lösung? Ihr selbst fügt die Zahl an die Verlinkung im Head oder Footer an. Durch die Versionierung ensteht sogar eine wunderbare Übersicht. Bei weiteren Änderungen könnt ihr dann ein “?v=1.1”, anschließend ein “?v=1.2” etc. anfügen. Praktisch und eine saubere Lösung, die nicht viel Performance frisst, weil sie handgemacht ist und nicht automatisiert läuft.

3. Bei der dritten Lösung braucht ihr nicht viel zu tun. Ihr nutzt einfach eine Zeitangabe, die automatisch angefügt wird. Ihr könnt jede Sekunde eine Änderungen erzwingen, jede Stunde, ihr könnt den Dateinamen auch nur täglich ändern, indem jeweils der Tag angehängt wird. Je nach Einstellung, wird dann die neue Datei genutzt. Praktisch ist das nicht und auch nur dann zu empfehlen, wenn ihr zusätzlich noch normales Caching verwendet, weil sonst ständig das Datum generiert werden muss.

<link href="style.css?v=<?php echo time(); ?>">

4. Die sauberste automatische Lösung ist es, die “filetime” hinzuzufügen, also das Änderungsdatum des Servers. Dann wird nicht ständig ein neues Datum angehängt, sondern automatisch nur dann, wenn die Datei auf dem Server auch wirklich verändert bzw. neu gespeichert wurde. Filetime hängt dann den Key an die Datei, wie es auch die Snippets oben tun, allerdings nur dann, wenn sich wirklich etwas geändert hat, was effizient ist und automatisiert funktioniert. Soll heißen: Ihr braucht nichts mehr zu beachten. Sobald ihr die Datei neu speichert, ändert sich auch die automatisch angehängte Zahl und der Besucher bzw. dessen Browser muss die Datei neu laden. Das erste Snippet nutzt die style.css  und den Template-Ordner-Befehl “get_template_directory”. Je nachdem wo eure Dateien liegen, müsst ihr das Snippet entsprechend anpassen.

<link href="<?php bloginfo('template_directory'); echo '/style.css?' . filemtime( get_template_directory() . '/style.css'); ?>">

Vier Wege, aber nur zwei zu empfehlen

Ihr merkt schon, es gibt wie immer mehrere Wege zum Ziel. Wirklich empfehlenswert sind dennoch nur zwei von den vier Möglichkeiten. Am besten ist immer die manuelle Steuerung, also Schritt Nummer zwei. Dort müsst ihr zwar selbst aktiv werden, schont damit aber die Ressourcen und könnt ganz gezielt wählen, wann eine Datei erneuert wurde und beim Nutzer neu geladen werden soll. Wer darauf keine Lust hat, zu faul ist oder schlichtweg ständig kleine Änderungen macht und nicht jedes mal von Hand die Verlinkung verändern möchte, der nutzt Schritt Nummer vier.

Die Filetime ist sehr solide und wird eben nur dann verändert, wenn die Datei auf dem Server tatsächlich editiert, also neu gespeichert wurde. So läuft das ganze automatisiert, aber eben auch nur dann ab, wenn sich wirklich etwas getan hat. Welche Lösung ihr nutzt, bleibt am Ende euch überlassen und kommt auf euer Projekt an. Der Browser-Cache selbst ist jedenfalls sehr wichtig und ständig solltet ihr die Dateien nicht ändern, denn sonst ist er auch ziemlich nutzlos. Vollzieht lieber geplante Updates am Theme, dann ändert sich auch nicht ständig etwas.

Wichtige Suchbegriffe:

html Seite neuladen, Safari automatisch aktualisieren, Browser aktualisieren