CSS-Ă„nderungen werden nicht angezeigt

Inhalt

Vielleicht hast du folgendes Szenario schon einmal erlebt:

  • Du hast CSS geändert.
  • Du hast den Cache von WP Rocket geleert.
  • Trotzdem siehst du deine Ă„nderungen nicht im Browser.
  • Du stellst fest, dass immer noch die alte CSS-Datei geladen wird, egal wie oft du WP Rockets Cache leerst.
  • Die geänderte Datei siehst du erst, wenn du den Cache deines Browsers löschst.

Hinweis: Falls du zusätzliche Cache-Ebenen wie Cloudflare, Sucuri CloudProxy oder ein CDN verwendest, musst du auch deren Cache (manuell) leeren, um deine CSS-Änderungen zu sehen.

Browser-Caching

In unserem Blog findest du einen Artikel, der genau erklärt, was Browser-Caching ist:
Browser Caching, Explained In Plain English

Auf Deutsch erklärt es z.B. Wikipedia. Hier folgt ein kurzer Überblick:

Query-Strings fĂĽr Versionsnummern

Nehmen wir beispielhalber an, deine Website lädt diese Datei:

https://example.com/wp-content/themes/beispiel-theme/style.css

Wenn du deine Website aufrufst, kopiert dein Browser diese Datei vom Server herunter und behält die Kopie in seinem eigenen, lokalen Cache. (Das ist nicht der serverseitige Cache von WP Rocket, sondern die Kopie von style.css befindet sich jetzt auf deinem Computer!)

Bei nachfolgenden Seitenaufrufen lädt der Browser nun die Datei style.css aus seinem eigenen Cache, also von deinem Computer, anstatt vom Server.

Wenn du den Inhalt deiner style.css auf dem Server veränderst, musst du den Browser wissen lassen, dass seine zuvor heruntergeladene und zwischengespeicherte Version der gleichen Datei veraltet ist. Anderenfalls wird der Browser immer noch seine lokal gecachte Version laden.

Um den Browser wissen zu lassen, wann eine Datei sich verändert hat, erhalten Datei-URLs in WordPress üblicherweise eine Versionsnummer als Parameter:

../beispiel-theme/style.css?ver=1.0.0

Wenn etwa das Theme, zu dem die Datei gehört, ein Update veröffentlicht, wird auch diese Versionsnummer aktualisiert:

../beispiel-theme/style.css?ver=1.0.1

Auf diese Weise wird dem Browser mitgeteilt: Deine zuvor gespeicherte Version dieser Datei ist ungĂĽltig, lade bitte die neue Datei.

Dieser Vorgang wird „Cache-Busting“ genannt.

Cache-Busting

Das Wichtigste beim Cache-Busting ist, dass du bei jeder Änderung deiner Stylesheet-Datei die Versionsnummer änderst. Sofern es sich um die style.css deines aktiven (Child-)Themes handelt, kann es in vielen Fällen schon ausreichen, die Versionsnummer im Datei-Header zu ändern:

Datei-Header mit Versionsangabe

Bei standardgemäß codierten Themes wird diese Versionsnummer im Query-String der Datei-URL auftauchen und dadurch den Browser dazu veranlassen, eine frische Kopie der Datei (mit deinen Änderungen) herunterzuladen.

Hinweis: Manche Entwickler/-innen verwenden den programmatisch abgefragten Zeitstempel der letzten Datei-Änderung als Versionsnummer, z.B. für andere CSS-Dateien als die style.css, die keine Versionsnummer im Header tragen. In solchen Fällen ist kein manueller Eingriff erforderlich.
Falls du nicht weisst, wie du den URL-Parameter „?ver=“ mit der Versionsnummer beeinflussen kannst, und dies nicht automatisch geschieht, musst du die Stelle in deinem Theme finden, wo die CSS-Datei eingebunden wird; dies geschieht in der Regel mittels der WordPress-Funktion wp_enqueue_style().

Cache-Busting bei aktiver Option „Query-Strings entfernen“

Bei aktiver Option  Query-Strings entfernen bewirkt das Ă„ndern der Versionsnummer in deinem Stylesheet, dass WP Rocket eine neue Version der Datei generiert, bei der die neue Versionsnummer im Dateinamen enthalten ist. Dies sorgt wiederum fĂĽr korrektes Cache-Busting, und deine Besucher/-innen sehen deine Website mit der neuesten Version des Stylesheets.

Hinweis: Viele andere Plugins, die ebenfalls den Query-String von Datei-URLs entfernen, tun dies, ohne die Versionsnummer in den Dateinamen zu kodieren. Dies kann zu Fehlverhalten der Website fĂĽhren. Wir raten von der Verwendung solcher Plugins dringend ab.

Spezielle Themes: Genesis, X Theme

Falls du ein Child-Theme fĂĽr Genesis verwendest, entspricht die Versionsnummer im Query-String deines Stylesheets der Version des Parent-Themes. In diesem Fall hilft es also nichts, die Version im Header der Child-Theme-Datei zu ändern.

Stattdessen musst du folgende Code-Zeile zur functions.php deines Child-Themes hinzufĂĽgen:

define( 'CHILD_THEME_VERSION', '1.0.1' );

Mit dem  X Theme verhält es sich ähnlich. Weitere Informationen dazu findest du im X Theme Forum (Login erforderlich).