Sie korrigieren einen Text auf Ihrer Website, tauschen ein Bild aus oder aktualisieren eine Farbe; wenn Sie die Seite jedoch im Browser öffnen, erscheint der alte Zustand. Die Änderung wurde tatsächlich vorgenommen, die Datei auf dem Server ist neu, und dennoch ist sie auf dem Bildschirm nicht zu sehen. Der Grund dafür sind fast immer die Cache-Schichten (Zwischenspeicher). Ein Cache bedeutet, dass eine Kopie des Inhalts gespeichert wird, damit die Seite schneller lädt; das Problem ist, dass diese Kopie veraltet, sobald Sie eine Aktualisierung vornehmen. Im Folgenden behandeln wir das Problem „Ich habe es geändert, aber es sieht alt aus” Schicht für Schicht.
Ein Cache ist nichts Schlechtes; im Gegenteil, er ist einer der grundlegenden Wege, damit eine Website schnell lädt. Würden bei jedem Aufruf durch jeden Besucher alle Dateien von Grund auf neu erzeugt und erneut heruntergeladen, würde sowohl die Serverlast steigen als auch die Seite langsamer werden. Deshalb werden Kopien des Inhalts an verschiedenen Stellen vorgehalten. Das Problem entsteht dadurch, dass diese Kopien bei einer Aktualisierung nicht automatisch aufgefrischt werden. Deshalb geht es nicht darum, den Cache vollständig abzuschalten, sondern dafür zu sorgen, dass die betreffende Kopie erneuert wird, sobald Sie eine Aktualisierung vornehmen.
Cache-Schichten: Wo sammelt sich das Problem?
Eine Webseite durchläuft mehrere Stellen, bis sie den Besucher erreicht, und jede Stelle kann eine Kopie des Inhalts vorhalten. Wenn trotz durchgeführter Änderung weiterhin der alte Inhalt erscheint, ist die Kopie in einer dieser Schichten hängengeblieben.
- Browser-Cache (browser cache): Wird auf dem Computer des Besuchers gespeichert. Der Browser hält zuvor heruntergeladene CSS-, JavaScript- und Bilddateien auf der Festplatte vor, um sie nicht erneut herunterladen zu müssen.
- Server-Cache: Auf der Hosting-Seite wird eine fertig erzeugte Kopie der Seite gespeichert; die Seite wird nicht bei jeder Anfrage neu erstellt.
- CDN-Cache: Ein Content Delivery Network (CDN) kopiert die Dateien auf Server weltweit. Dem Besucher wird die nächstgelegene Kopie ausgeliefert; wird diese Kopie nicht aktualisiert, erscheint die alte Datei.
- WordPress-Cache-Plugins: In WordPress erzeugen Cache-Plugins eine statische HTML-Kopie der Seiten. Selbst wenn sich der Inhalt ändert, kann das Plugin weiterhin die alte Kopie ausliefern.
Der Sonderfall von CSS- und JavaScript-Dateien
Die am meisten irreführende Schicht ist der Cache von CSS- und JavaScript-Dateien. Sobald der Browser den Namen dieser Dateien einmal heruntergeladen hat, betrachtet er eine Datei mit demselben Namen als unverändert und fragt den Server nicht erneut. Selbst wenn Sie den Inhalt der Datei ändern, verwendet der Browser die alte Version von der Festplatte, weil der Dateiname gleich geblieben ist. Ergebnis: Ihre Designänderung ist im Code vorhanden, aber auf dem Bildschirm nicht sichtbar.
Dasselbe gilt für Bilder, die innerhalb von CSS über url() aufgerufen werden. Wenn Sie ein Hintergrundbild unter demselben Dateinamen erneut hochladen, zeigt der Browser weiterhin das alte Bild an, weil sich die Adresse nicht geändert hat. Dies ist besonders bei großen Hintergrundbildern wie dem Hero-Bereich irreführend: Sie erneuern das Bild, auf dem Server liegt die neue Datei, aber der Besucher sieht weiterhin das zugeschnittene oder alte Bild.
Dieses Verhalten ist eigentlich eine bewusste Geschwindigkeitsoptimierung. Der Browser nimmt an, dass eine Datei mit derselben Adresse sich nicht geändert hat, und lädt sie nicht erneut herunter; so lädt die Website schneller. Das Problem entsteht nur dadurch, dass die Adresse konstant bleibt, obwohl sich der Inhalt geändert hat. Die Lösung besteht daher nicht darin, den Cache zu deaktivieren, sondern dem Browser bei jeder Änderung die Nachricht „Dies ist nun eine andere Datei” übermitteln zu können.
Dauerhafte Lösung: Versionsparameter (Versionierung)
Den Cache bei jeder Änderung von Hand zu leeren ist nicht nachhaltig; die eigentliche Lösung besteht darin, der Dateiadresse einen Versionsparameter hinzuzufügen. Bei jeder Änderung der Datei ändert sich dieser Parameter automatisch, und der Browser betrachtet sie als neue Datei und lädt sie erneut herunter.
- Eine feste Version reicht nicht: Bei einer festen Version wie style.css?ver=1.0 liefert der Browser weiterhin die alte Datei aus, weil die Nummer gleich bleibt, auch wenn sich die Datei mehrfach ändert.
- filemtime-Methode: Der Version wird der Zeitpunkt der letzten Änderung der Datei hinzugefügt (style.css?ver=1.0.1787157120). Bei jeder Änderung der Datei ändert sich dieser Wert von selbst; der Browser lädt die neue Version herunter, ein manueller Eingriff ist nicht erforderlich.
- Bilder innerhalb von CSS: Für url()-Bilder, die sich nicht direkt versionieren lassen, wird die Bildadresse in eine Variable ausgelagert und dieser Variablen derselbe Zeitstempel hinzugefügt; so wird auch das Bild bei jeder Aktualisierung erneuert.
Welche Schicht wie leeren?
Wenn eine Änderung nicht sichtbar ist, führt es am schnellsten zum Ziel, die Lösung Schicht für Schicht anzuwenden:
- Browser: Führen Sie einen erzwungenen Neuladen durch (unter Windows Strg+F5, auf dem Mac Cmd+Shift+R). Dadurch umgeht der Browser den Cache und lädt die Dateien erneut vom Server. Ein anderes Gerät oder ein privater Tab hilft ebenfalls zur Kontrolle.
- Plugin/Server: Führen Sie die Funktion „Cache leeren” des WordPress-Cache-Plugins und gegebenenfalls des Server-Caches aus.
- CDN: Wenn Sie ein CDN verwenden, führen Sie für die betreffenden Dateien eine Cache-Leerung (Purge) durch; andernfalls liefert das CDN weiterhin die alte Kopie aus.
- Dauerhafte Vorkehrung: Damit diese Schritte nicht immer wieder nötig sind, liefern Sie die Dateien mit einem Versionsparameter aus.
Auf einen Punkt sollte man achten: Eine Seite, die auf Ihrem Bildschirm als Entwickler aktuell erscheint, kann auf dem Bildschirm Ihrer Besucher noch alt sein. Denn während Sie häufig einen erzwungenen Neuladen durchführen, liegen im Browser der Besucher alte Kopien. Um sicherzustellen, dass eine Änderung bei allen sichtbar wird, muss der Cache daher nicht nur in Ihrem eigenen Browser, sondern auch in den Server- und CDN-Schichten aufgefrischt werden. Die dauerhafte Lösung, die Versionierung, beseitigt genau diesen Unterschied: Ändert sich die Datei, ändert sich die Adresse, und alle erhalten automatisch die neue Version.
Zusammengefasst ist das Problem „Ich habe es geändert, aber es sieht alt aus” kein Fehler, sondern eine natürliche Folge des Caches. Auf einer richtig aufgebauten Website werden CSS- und JavaScript-Dateien automatisch versioniert; sobald Sie eine Änderung vornehmen, sieht auch der Besucher spätestens beim nächsten Besuch den aktuellen Zustand. Eine Struktur, die den Bedarf an manueller Leerung minimiert, schont sowohl Ihre Zeit als auch die Ihrer Besucher.
Verwandte Leistungen: Webdesign & Software, Software & PC-Anwendungen, Systemintegration
Leave a Reply