Auch Entwickler brauchen Platz zum Spielen

14. September 2010 /

Performance-Optimierung: Statische Dateien vorkomprimieren

Dass JavaScript- und CSS-Dateien in komprimierter Form (Stichwort gzip) zum Browser übertragen werden können und sollten, hat inzwischen jeder Blog-Administrator verstanden und setzt hierfür entsprechende Plugins oder im Handumdrehen vorgenommene Anpassungen innerhalb der Sytsemdatei .htaccess ein. Der wesentliche, in Blogs mit überdurchschnittlichem Leserstamm spürbare Nachteil der on-the-fly Komprimierung: Beim Packen verbraucht der Server kostbare Zeit und Ressourcen. Es geht auch anders.

Selbst komprimieren, Server entlasten
Mit Übertragung komprimierter Inhalte zum Browser geht die Performance-Optimierung einer Webseite in die richtige Richtung. Die Prozess-Optimierung kann dagegen einen Schritt weitergehen und zwar mit folgendem Gedanken: Zeit- und Ressourcen-Aufwände auf der Server- bzw. Apache-Ebene sollen geschont werden. Warum also nicht die statischen Files in bereits optimierter, also komprimierter Form auf dem Server bereitstellen? Bei den Bildern funktioniert das ja auch bestens. Dieser Ideologie folgend, müsste der Server die Dateien lediglich ausliefern, nicht auch noch komprimieren.

Die Evolution der Datenkompression
Die Evolution der Datenkompression: 78 Prozent Gewinn

Wo Licht, da Schatten
Mindestens ein Manko hat die angebotene Vorgehensweise: Jede Dateiänderung wie beispielsweise eine Erweiterung der CSS-Definitionen würde einen händisch angestoßenen Komprimierungsvorgang mit sich bringen (müssen). In diesem Zusammenhang ist eine auf dem Server ausgeführte Kompression deutlich bequemer, zeitsparender und erfordert keine Desktop-Anwendung mit unterstützter gzip-Komprimierung. Da hat der Administrator die Wahl.

Schritt-für-Schritt Anleitung
Nachfolgend wird anhand einer (hier im Blog verwendeter) CSS-Datei demonstriert, wie diese auf dem Mac komprimiert und auf dem Server zur fehlerfreien Interpretation und Ausgabe initialisiert werden kann. Je nach Betriebssystem und Tools sind Abweichungen nicht auszuschließen.

Kommentierte und unbehandelte Stylesheet-Datei style.uncompressed.css steht uns in Gesamtgröße von ca. 9 KB als Original zur Verfügung. Diese gilt in komprimierter Form zur Ausgabe vorzubereiten.

1. Bereinigung des Quelltextes
Unnötige Leerzeichen und Umbrüche gehören isoliert, indem speziell dafür entwickelte Kompressoren zu Hilfe geholt werden. Die angewendete Code-Therapie verschlankt die Ausgangszeilen auf 7 KB.

2. Eigentliche Datenkompression
Die CSS-Datei mit auf Grund reduziertem Code soll nun einer gzip-Komprimierung unterzogen werden. Auf einem Apple-Rechner (oder auch *Nix) kann das Vorhaben ohne Zusatztools spielerisch durchgeführt werden, unter Windows stehen Anwendungen wie 7-zip unterstützend zur Seite.

Auf dem Mac: Terminal starten (zu finden unter Dienstprogramme), Befehl eingeben, wobei der Dateiname und der Ort entsprechend anzupassen wären (alternativ Tab vervollständigen lassen).

gzip-Commando für den Terminal

gzip Desktop/style.css

3. Übertragung zum Server
Die umgewandelte, „kleingezogene“ Datei style.css.gz (exemplarischer Name) wird per (S)FTP auf den Server in den gewünschten Ordner transferiert. Mittlerweile beinhaltet das File maximal 2 KB an (komprimierten) Daten – das sind gerade mal 22 Prozent der Ursprungsgröße!

4. Umbenennung der Datei
Kurz vor der Einbindung der Datei im WordPress-Template bzw. HTML gehört die soeben hochgeladene Datei auf dem Server (sehr wichtig, nicht lokal) umbenannt. Ein interner Fehler in Safari zwingt uns zu diesem (eigentlich unnötigen) Schritt. Der Trick dabei: Die Dateiendungen werden untereinander getauscht, so dass aus style.css.gz ein style.gz.css wird. Der Tausch der Suffixe verwandelt den GZIP-Archiv in eine reguläre Datei mit CSS-Daten – so zumindest in den „Augen“ der Serversoftware. Eine Modifizierung bzw. Neudeklaration des an den Browser gesendeten Headers mit begleitenden Informationen wie der Dateityp entfällt somit gänzlich.

5. Erweiterung der Systemdatei .htaccess
Einzeilige Anpassung innerhalb der .htaccess hält zusätzlich Einzug und sorgt für die Kennzeichnung komprimierter Datenströme, um eine zuverlässige Erkennung auf der Client-Seite zu ermöglichen und sicherzustellen. Es ist zu beachten, dass die Konfigurationsdirektive AddEncoding nicht auf allen Apache-Servern installiert ist und je nach Hoster deaktiviert sein kann.

Notwendige MIME-Kodierung in der .htaccess

<IfModule mod_mime.c>
  AddEncoding gzip .gz
</IfModule>

6. Fertigstellung
Nach all den Initialisierungsschritten steht die komprimierte CSS-Datei zur Einbindung bereit und kann im Theme beispielsweise wie folgt eingebunden werden.

Auszug aus dem WordPress-Template header.php

<link href="/style.gz.css" rel="stylesheet" type="text/css" />

Bemerkungen
Nach identischem Leitfaden lassen sich ebenfalls JavaScript- und statische HTML-Dateien verkleinern. Getestet mit IE6+, FF3+, Safari4+ und Opera10+. Ab welcher Dateigröße sich der Kompressionsverfahren lohnt, beschreibt Thomas Scholz in seinem Blog.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.