Wordpress Ladezeiten verbessern: auch css-Dateien per GZip-Komprimierung verkleinern

Im Wordpress Magazin erschien vorgestern – mit dem Hinweis auf das neue Qualitäts- und Rankingkriterium in den Google Webmaster Tools – ein interessanter Beitrag zur komprimierten Datenübertragung der Seiten eines Wordpress Blogs ohne Plugin. Im Einsatz: die serverseitig bereits fast immer installierte Gzip-Komprimierung.

Bei grafisch aufwendigeren Themes können jedoch auch die darin enthaltenen Stylesheets eine nicht unerhebliche Dateigröße erreichen. Relativ schnell wird man dann in den Webmaster-Tools den Hinweis erhalten, dass diese css-Dateien auch nach erfolgreicher Aktivierung der GZip-Komprimierung für das Blog nicht automatisch mitkomprimiert werden; der Code greift schliesslich in der Standard-Variante nur bei php-Dateien.

Mit dem folgenden Verfahren lassen sich auch die Stylesheets eines Themes komprimieren. Der Trick: aktuelle Browser akzeptieren als Stylesheets auch Dateien, die nicht die Endung .css haben – und deshalb kann man den Stylesheets seines Themes problemlos eine andere Endung verpassen, in unserem Fall .php.

Anleitung: Wordpress’ CSS-Komprimierung mit GZip

Änderung in bzw. an den Dateien style.css und header.php des genutzten Themes

1. Sucht im Verzeichnis des Themes (oder in einem Unterordner namens “styles”) nach dem Stylesheet für euer Theme. Hilfreich ist dabei auch ein Blick in den Quelltext eures Blogs. Oft heisst die Datei “style.css”.
2. Legt eine Kopie dieser Stylesheet-Datei an
3. Benennt die Kopie in z.B. style.php um und öffnet die Datei
4. Fügt folgenden Code an den Anfang der style.php ein:

<?php
if (strpos($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip') !== false) {
header('Content-type: text/css');
ob_start("ob_gzhandler");
}
?>

5. … und folgenden Code an das Ende der style.php:

<?php
ob_end_flush();
?>

6. Speichert die style.php
7. und übertragt sie auf den Server, am Besten in das gleiche Verzeichnis wie die ursprüngliche style.css
8. Sucht jetzt im Verzeichnis des Themes nach der Datei header.php
9. … und in der header.php nach der Zeile, in der auf die style.css des Themes verwiesen wird.
10. Ändert diesen Verweis auf den Pfad zur gerade upgeloadeten style.php ab (in unserem Fall bedeutet das nur eine Änderung der Dateiendung von css zu php).
11. Übertragt nun auch die geänderte header.php auf den Server

Wenn das Theme mit mehreren css-Dateien arbeitet, könnte man spätestens jetzt noch an eine Zusammenlegung der einzelnen Dateien denken.

Die erste Zeile prüft, ob der eigene Server die GZip-Komprimierung unterstützt. Wer sich dessen sicher ist, kann die Abfrage auch weglassen (dann die schliessende geschweifte Klammer nicht vergessen!) Die Zeile für den Content-type verhindert Probleme mit dem Mozilla Firefox.

Fertig. Das Theme arbeitet nun mit einem GZip-komprimierten php-Stylesheet style.php, nicht mehr mit einer unkomprimierten style.css. In unserem Fall bedeutet das eine Reduzierung der Dateigröße von 10.14 KiB auf 2.97 KiB, die Ersparnis liegt also bei mehr als 70%. Einen Nachteil hat das Verfahren: während css-Dateien im Browsercache gespeichert werden, liefert der Server php-Dateien immer ungecacht aus. Wer also immer wiederkehrende Stammleser oder ganze Artikelserien zum Durchblättern für seine Besucher bereithält, kann sich die Änderungen sparen.

Es gibt mit Sicherheit noch andere Ansätze (z.B. über die .htaccess) zur Komprimierung von css-Dateien, die sowohl Vor- als auch Nachteile haben können. Für uns funktioniert diese Lösung hier einwandfrei.