Website Performance: Javascript und CSS komprimiert ausliefern und Ladezeiten verkürzen

Auch in Zeiten von DSL-Breitband-Internet-Verbindungen zahlt es sich aus auf Dateigröße und Ladezeiten einer Internetseite zu achten. Nicht zuletzt, weil die Ladezeiten inzwischen auch ein Kriterium für Suchmaschinen geworden sind - auch die Besucher der Seite bleiben länger und haben ein schöneres Erlebnis, wenn sich die Seiten schnell aufbauen und sie nicht ewig darauf warten müssen, dass alles geladen ist.

Eine sehr einfache aber dafür umso effektivere Methode ist die Komprimierung von CSS und JavaScript-Dateien mit GZip. CSS- und JS-Dateien lassen sich mit GZip um 70 bis 80 Prozent verkleinern. Eine vormals 13 KB große Datei lässt sich so leicht auf etwa 3 KB reduzieren, was sich in deutlich niedrigeren Ladezeiten bemerkbar macht, die dann im gleichen Verhältnis verringert wird.

In diesem kleinen Tutorial möchte ich euch zeigen wie ihr eure JS- und CSS-Dateien komprimiert ausliefern könnt ohne dabei die Browser zu vernachlässigen, die keine GZip-Komprimierung erlauben.

Die .htaccess Datei

In euer .htaccess Datei im Stammverzeichnis eurer Website müsst ihr folgende Zeilen hinzufügen:

<Files *.css.gz>
AddType "text/css" .gz
AddEncoding gzip .gz
</Files>

<Files *.js.gz>
AddType "application/javascript" .gz
AddEncoding gzip .gz
</Files>

RewriteBase /
RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteRule ^(.*)\.css$ $1.css.gz
RewriteRule ^(.*)\.js$ $1.js.gz

Es passiert nun folgendes: Im unteren Teil hinter "RewriteEngine On" schauen wir als erstes in einer Rewrite-Bedingungen (RewriteCond), ob der anfragende Browser die GZip-Komprimierung überhaupt unterstützt.

Wenn ja, wandeln wir anschließend in den letzten beiden Zeilen die Endung aller Dateien, die auf .css enden in .css.gz um. Alle Dateien, die angefragt werden und auf .js enden, werden in .js.gz umgeschrieben. Fragt der Browser nun zum Beispiel nach style.css, liefern wir dem Browser stattdessen die Datei namens style.css.gz aus. Diese Dateien sind unsere komprimierten Dateien. Wie wir die erstellen, schauen wir uns später an.

Zuerst blicken wir aber auf den ersten Teil unserer .htaccess-Datei. Da unser Server nicht wissen kann, wie er mit den Dateien mit der Endung .gz umgehen soll, teilen wir es ihm an dieser Stelle mit. Wir wissen, dass alle Dateien mit der Endung .css.gz CSS-Dateien sind und GZip-komprimiert sind. Daher fügen wir zu der Anfrage nach dieser Dateisorte als Typ "text/css" hinzu und geben die Encodierung gzip mit auf den Weg. Ähnlich machen wir es bei den JS-Dateien. Hier definieren wir aber als Typ "application/javascript". Wenn wir dies nicht machen wüsste, wüsste der Browser unter Umständen nicht, wie er mit den entsprechenden Dateien umgehen sollte.

Die komprimierten Dateien

Um sowohl die Browser zu unterstützen, die eine GZip Komprimierung unterstützen als auch die Browser zu unterstützen, die dies nicht tun, liegen auf unserem Server im gleichen Verzeichnis immer zwei Varianten jeder CSS und jeder JS Datei. Einmal die unkomprimierte Datei, zum Beispiel "script.js" und einmal die komprimierte Datei, zum Beispiel "script.js.gz". Die Dateien müssen genau gleich heißen, nur dass hinter der komprimierten Datei noch ein .gz steht.

Die komprimierten Dateien können wir ganz einfach mit dem Programm 7-Zip erzeugen. Wir können einfach mit der rechten Maustaste auf unsere Originaldatei klicken, dann auf 7-Zip und dann auf "Zu einem Archiv hinzufügen". Hier wählen wir das Archivformat "gzip" aus und klicken auf "OK". Schon haben wir unsere komprimierte Datei, die wir zusammen mit der Originaldatei auf den Server laden können.

Einbindung in HTML

Im Quellcode der HTML-Seite müssen wir nichts ändern oder anpassen. Hier reicht es, wenn wir unsere Dateien nach wie vor so einbinden, wie wir es immer getan haben. Also zum Beispiel:

<link type="text/css" rel="stylesheet" href="styles.css" />
<script type="text/javascript" src="meinscript.js"></script>

Die komprimierte Datei mit der Endung .gz taucht hier nicht auf.

Die Vorgehensweise

Jedes Mal wenn nun ein Browser eine CSS oder JS Datei anfragt, schaut der Code in der .htaccess Datei nach, ob der Browser eine gzip Komprimierung unterstützt oder nicht. Wenn nicht, passiert nichts und das Original wird ausgeliefert. Falls doch, wird die Anfrage von .css auf .css.gz umgeleitet und dem Browser mitgeteilt, dass es sich bei .css.gz um eine komprimierte CSS handelt. Die CSS wird dann komprimiert übertragen und wir sparen jede Menge Traffic.

Test: Funktioniert es?

Wenn wir testen möchten, ob es funktioniert können wir uns den Entwickler-Tools in Chrome oder dem Addon Firebug in Firefox bedienen. Beide Tools haben einen Reiter namens Netzwerk, in dem angezeigt wird, welche Dateigröße übertragen wurde. Hier können wir leicht testen, ob es funktioniert hat.