Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

CSS bei Änderungen neu in den Browser-Cache laden

CSS bei Änderungen vom Browser-Cache ausschließen

CSS vom Browser-Cache ausschließen

Das mit dem Browser-Cache ist schon eine tolle Sache, denn wer den richtig aktiviert, der erlebt schnell eine deutlich performantere Website. Doch das mit dem Browser-Cache hat eben auch Nachteile, weil CSS und JS-Dateien dann eventuell nicht mehr neu geladen werden. Soll heißen: Wenn die CSS für sieben Tage im Browser-Cache liegt, wird diese auch nicht erneuert, nur weil ihr dort eine kleine Zeile ändert. Dabei sind es doch oft diese Kleinigkeiten, die Fehler oder falsche Darstellungen im Design beheben. Wird die CSS bzw. die Javascript-Datei also nicht erneuert, sehen Nutzer weiterhin die alte Version mit den Fehlern. Dabei lässt sich das Problem aber kinderleicht umgehen, so dass CSS und Javascript vom Browser-Cache ausgeschlossen werden können. Das sorgt dann dafür, dass beide Elemente bei Änderungen neu in den Cache geladen werden, egal welche Einstellungen ihr in eurer htaccess stehen habt. Sehr hilfreich, denn so kann der Browser-Cache für CSS und JS aktiviert bleiben, wird bei Änderungen aber einfach übergangen.

Snippet

Das Snippet nutzt die Standard Style.css, wie sie in den meisten WordPress Themes verwendet wird. Nutzt euer Theme eine andere Datei, müsst ihr die URL bei href entsprechend anpassen.

Folgendes in den Header einfügen bzw. euren CSS-Eintrag dort anpassen:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

CSS und JS bei Änderungen neu laden

Wie gesagt, ihr müsst den Code oben nur dezent an die eigene Website anpassen. Das Snippet eignet sich auch für Javascript, muss dann aber ebenfalls passend verändert werden. Schwierig sollte das für niemanden sein, es ist immerhin selbsterklärend. Was genau der Code oben bewirkt? Er fügt bei neuen Änderungen ein ?12345678 an die Datei an, was dann dafür sorgt, dass diese als neu gilt und vom Browser-Cache dementsprechend ausgeschlossen wird. Immer wenn ihr also etwas an der Datei verändert, ändert sich auch die angehängte Zahl, was wiederum der Browser-Cache merkt und die Datei erneut herunterlädt. So lassen sich CSS/JS-Änderungen direkt sichtbar machen, ohne dass jeder User erst den Browser-Cache leeren muss. Letzteres werden sowieso nur die wenigsten, sie beschweren sich meistens nur darüber, dass etwas nicht korrekt angezeigt wird. Mit dem Snippet oben ist damit nun Schluss, denn so laden alle User auch immer die aktuellste CSS-Datei, ganz egal ob noch eine alte im Browser-Cache liegt.



Wordpress Performance eBook