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
- 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.
Über den Autor
Software 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
Website Performance: Caching und Expires Header von Bildern, CSS und JavaScript
Tutorial | 0 Kommentare
Website Performance: Javascript und CSS komprimiert ausliefern und Ladezeiten verkürzen
Tutorial | 0 Kommentare
Mouseover Buttons mit CSS ohne Nachladen
Tutorial | 0 Kommentare
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Kommentar
XAMPP: SSL/HTTPS für lokale Projekte einrichten
Tutorial | 8 Kommentare
CSS Hacks für den Internet Explorer
Tipp | 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.
Super Hinweis. Funktioniert auch nach fast 10 Jahren einfach und wirkungsvoll.
14.02.2022 um 11:28
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