Query Strings bei JavaScripts und Stylesheets sind einerseits nützlich – bei einem Update der CSS- / JS-Datei (z.B. durch WordPress- oder Plugin- / Theme-Updates) kann der Browser dann erkennen, dass sich die Datei geändert hat und die Datei so neu downloaden. Andererseits sind sie letztlich doch nur ein hässlicher Fix, welcher Nebenwirkungen hat – zum Beispiel werden die Dateien dann zum Teil gar nicht mehr gecached, eben weil sie einen Query String haben. Aus diesem Grund merkt GTmetrix dies auch negativ an.

[UPDATE]Ganz ohne Nebenwirkungen ist das unten vorgestellte System dann doch nicht – leider funktionieren dann viele Minify-Plugins nicht mehr korrekt[/UPDATE]

Keine Lösung: einfach Query Strings entfernen

Die naheliegende Lösung die Query Strings einfach zu entfernen (welche u.a. durch dieses Plugin erledigt wird) ist jedoch keine Lösung. Denn dann cached der Browser die alten CSS-Dateien – und merkt nicht, wenn die Dateien sich ändern. Der Nutzer muss bei einem Update der Seite seinen Browser zwingen, die Seite komplett neu laden. Das ist nutzerunfreundlich – die meisten Nutzer dürften nicht einmal wissen, wie ein Force Refresh zu machen ist.

Die Lösung: Rewrite Rules

Die Frage ist also nun, wie man die Versionsnummer in die URL der CSS- / JS-Datei bekommt. Denn dann gibt es einfach eine neue URL bei einer neuen Version, d.h. es wird schlicht eine neue Version mit neuem Dateinamen in WordPress eingebunden. Die alte Datei bleibt zwar weiter im Browser Cache, wird aber nicht mehr verwendet. Um die Versionsnummer in die URL der JS- / CSS-Datei zu bekommen nutzt man die Rewrite-Möglichkeiten des Webservers, welche auch schon bei lesbaren URLs eingesetzt werden. Zudem benötigt man ein kleines unterstützendes Plugin.

Die Installation des Plugins

Zunächst benötigt man die passenden Rewrite Rules. Die Rewrite-Regel für Nginx muss in den Server Block und sieht so aus:

# Rewrite Rule for Rewrite Query Strings
rewrite ^/(.+)/(.+)rqsds(.+).(css|js)$ /$1/$2$4 last;

Da ich den Apache nicht einsetze bin ich auf Hilfe angewiesen. Vermutlich lautet die Regel für den Apachen wie folgt. Die beiden Zeilen müssen in die .htaccess, es wäre schön, wenn das jemand für mich testen könnte.

# Rewrite Rule for Rewrite Query Strings
RewriteRule ^/(.+)/(.+)rqsds(.+).(css|js)$ /$1/$2$4 [PT]

Die Regeln selbst machen nichts ohne das Plugin. Dieses gibt es hier zum Download. Installiert wird das Plugin wie üblich – in /wp-content/plugins/ hochladen und aktivieren. Danach müssten die Query Strings updatesicher entfernt sein. Das kann man kontrollieren, indem man sich die Links zu den CSS- / JS- Dateien anschaut. Haben diese ein rqsds im Dateinamen und keinen Query String mehr funktioniert alles korrekt.

Fehler & Verbesserungen

Ich freue mich über jede Form von Bug-Reports, Fehlermeldungen und Verbesserungsvorschläge. Ein bekannter Fehler ist, dass nur dann die Versions-Query-Strings entfernt werden, wenn sie mit ?ver=Versionsnummer aufgerufen werden. Leider halten sich einige Plugins nicht an diesen Standard, da sie nicht mit WordPress-eigenen Funktionen die Dateien einbinden. Diesen schlechten Programmierstil abzufangen ist nur mit vielen potentiellen Nebenwirkungen möglich – daher habe ich z.B. auf diesem Blog hier ?v=Versionsnummer und ?rev=Versionsnummer nicht mit berücksichtigt.