senäh

17senäh und so…

Artikelbild CSS und das Caching

HTML/CSS/JS
17. Jan 2012
Kommentare: 2

CSS und das Caching – ein Lösungsvorschlag

Kategorien: HTML/CSS/JS | 17. Jan 2012 | Kommentare: 2

Caching ist eine tolle Sache und kann einen beachtlichen Performance-Schub geben. Bei kontinuierlich aktualisierten Webseiten, bei denen sich hin und wieder auch Angaben in den CSS-Stylesheets ändern, kann es jedoch auch zu Problemen führen. Die PHP-Ausgabe beispielsweise kann bereits die aktualisierte Version sein, während die CSS-Datei nicht vom Server sondern aus dem Cache bezogen wird. Man erhält also aktualisiertes HTML mit veraltetem CSS. Zerhacktes Layout ist die Folge.

Um das Browsercaching für diese Fälle zu verhindern, hat sich ein sogenannter Cachebuster bewährt, was nicht anderes als das Anhängen eines Parameters meint. In WordPress wird hier standardmäßig die aktuelle WordPress-Version angehangen (z.B. <link rel="stylesheet" type="text/css" media="screen" href="style.css?version=3.3.1" />).

Das ist ok, jedoch keine wirklich schöne Lösung. CSS-Dateien ändern sich sicherlich öfter, als die Version des aktuellen WordPress-Releases. Außerdem gibt es ja noch eine Welt außerhalb von WordPress :D Normalerweise muss man die Version also selbstständig mit jeder Änderung in der CSS-Datei erhöhen. An sich kein Ding, aber sobald man anfängt, Wert auf effizientes Arbeiten zu legen, fällt etwas deratiges flach.

auf Effizienz fokussierter Entwickler beim Lesen des Versionsnummern-Vorschlags

auf Effizienz fokussierter Entwickler beim Lesen des Versionsnummern-Vorschlags

Besser wäre eine automatisierte Variante. Also statt mit der Versionsnummer einfach mit dem Datum oder dem aktuellen Zeitstempel arbeiten: <link rel="stylesheet" href="style.css?v=<?php echo time(); ?>">. Ginge auch, allerdings kann man hier davon ausgehen, dass faktisch gar nichts mehr gecached wird, da sich der Parameter ja jede Sekunde ändert.

Wir brauchen eine Variante, die das tatsächliche Bearbeitungsdatum der Datei berücksichtigt. Et voilà: <link rel="stylesheet" href="style.css?v=<?php echo filemtime('style.css'); ?>">.

Sicherlich brauchbar, gefunden bei staticfloat. Bildcredits: Ragefaces :D

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)

Kommentare (2)

    • Danke :)

      Schöner ist eigentlich noch, wenn man das Bearbeitungsdatum nicht als Parameter anhängt, sondern direkt in den Namen schreibt. Muss man natürlich anschließend per .htaccess entsprechend umrouten. Gibt’s vielleicht demnächst noch nen Blogpost zu ;)