Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache

Das Cachen von Inhalten durch den Browser ist sehr nützlich und sinnvoll, um nicht immer wieder die gleichen Dateien übertragen zu müssen. Manchmal kann dieses Feature aber auch störend sein. Zum Beispiel wenn wir einzelne Webseiten, Bilder, Stylesheets, JavaScript-Files, Schriften oder sonstige Dateien aktualisiert haben und wir möchten, dass diese Dateien auf jeden Fall neu geladen werden und der Nutzer keine alte Version der Datei aus dem Cache des Browsers angezeigt bekommt.

Schnell und einfach lösen wir dieses Problem, indem wir den betreffenden Ressourcen einfach einen willkürlichen Parameter anhängen. In den nächsten Abschnitten findet ihr Erklärungen und einige Beispiele anhand verschiedener Ressourcen dafür - im letzten Abschnitt schauen wir uns noch eine alternative Methode an:

• Bilder
• Links zu Internetseiten
• Stylesheets, Fonts, JavaScript- und andere externe Dateien
• Alternative Methode

Bilder

Schauen wir uns dazu zunächst ein Beispiel für eine Bilddatei an, die wir aktualisiert haben und nun bei erneuten Aufrufen neu laden möchten:

<img src="bild.png" alt="Altes Bild">
<img src="bild.png?v=2" alt="Aktualisiertes Bild">

Bisher hatten wir das Bild, wie es in der ersten Zeile des Beispiels zu sehen ist, einfach unter dem Namen "bild.png" eingebunden, so wie die Bilddatei auch auf unserem Server benannt ist.

Nun haben wir das Bild aktualisiert und bekommen das folgende Problem: Die Nutzer, die unsere Seite bereits besucht haben, haben die alte Datei "bild.png" im Cache Ihres Browsers gespeichert und wenn wir das Bild weiterhin als "bild.png" einbinden würden, bekämen diese Nutzer immer noch das alte Bild zu sehen, da der Browser das ihm bekannte Bild anzeigen würde ohne mitzubekommen, dass sich das Bild unter dem Namen "bild.png" längst geändert hat und nicht mehr das alte ist.

Nun kommen wir aber zu unserem Trick. Nach der Änderung des Bildes hängen wir einfach einen beliebigen Parameter an den alten Namen der Bilddatei an. In unserem Beispiel benutzen wir den Parameter "v=2", wir könnten aber auch jeden anderen Parameter wie beispielsweise "x=1" oder "neu=ja" verwenden. Da der Browser denkt, der Parameter hätte eine Relevanz und einen Einfluss auf das Bild, wird der Browser das Bild neu laden und nicht aus dem Cache beziehen. Dass der Parameter in Wirklichkeit überhaupt keine Bedeutung hat, weiß der Browser natürlich nicht.

Links zu Internetseiten

Natürlich funktioniert dieser Trick auch für Links zu Internetseiten:

<a href="seite">Alte Seite</a>
<a href="seite?q=2">Aktualisierte Seite</a>

Die alte Seite war unter der URL "seite" verfügbar und befindet sich vielleicht npch im Cache des Browsers einiger Besucher. Wenn wir nun einen beliebigen Parameter wie hier "q=2" an die URL anhängen und statt "seite" in der Form "seite?q=2" verlinken, merkt der Browser, dass er diese URL nicht im Cache hat und lädt die Seite neu. Aktualisieren wir die Seite ein weiteres Mal können wir einfach einen anderen Parameter wie "q=3" nutzen.

Im Falle von Internetseiten müssen wir nur aufpassen, dass der Parameter nicht wirklich einen Einfluss auf den Inhalt der Seite hat und daher einen Parameter wählen, der nicht in irgend einer Form bei der Erstellung der Seite eine Relevanz hat.

Stylesheets, Fonts, JavaScript- und andere externe Dateien

Die Methode können wir für beliebige Dateien anwenden, also auch zum Beispiel für CSS-Stylesheets, JavaScripts...

<link rel="stylesheet" href="style.css?p=1" type="text/css">
<script src="script.js?x=3"></script>

...oder Schriftdateien:

@font-face {
   font-family: 'Test';
   url(/fonts/font.woff?w=17) format('woff');
}

Der Parameter - was wir nehmen spielt auch hier keine Rolle - sorgt dafür, dass die Dateien nicht aus dem Cache sondern neu geladen werden. Bei Bildern, Seiten und Dateien, die sich nicht geändert haben, lassen wir den Parameter einfach weg und können so den Cache nutzen.

Alternative Methode

Eine alternative Methode, um den Browser-Cache zu umgehen, ist einer Datei mit jedem Update der Datei einen neuen Namen zu geben. Also zum Beispiel:

<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="style1.css" type="text/css">
<link rel="stylesheet" href="style2.css" type="text/css">
<link rel="stylesheet" href="style3.css" type="text/css">

Unsere ursprüngliche Datei "style.css" haben wir hier beim ersten Update in "style1.css" umbenannt, danach in "style2.css" und so weiter.

Welche der beiden Methoden die bessere Wahl ist, hängt von dem Anwendungsfall ab und davon, welche Methode einfacher und mit weniger Aufwand zu implementieren ist.