1515 Stimmen

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

Tipp von Stefan Trost | Letztes Update am 13.01.2023 | Erstellt am 22.04.2012

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

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.

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.

AntwortenPositivNegativDatumStimmen
55 Stimmen

Super Hinweis. Funktioniert auch nach fast 10 Jahren einfach und wirkungsvoll.
14.02.2022 um 11:28

AntwortenPositiv Negativ
44 Stimmen

Danke, Danke, Danke!

Endlich muss ich keinem User mehr erklären, wie er seinen Cache löscht, wenn ich etwas geändert habe :-)
04.09.2022 um 16:25

AntwortenPositiv Negativ
Antworten

Über den Autor

AvatarSoftware von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen

 

Ähnliche Themen

CSS-Stylesheets in HTML einbinden

Tutorial | 0 Kommentare

jQuery: CSS Stylesheet Switcher

Tutorial | 1 Kommentar

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.