Blog

Javascript- und CSS-Dateien mit GZip komprimieren

Zu einer der wichtigsten Methoden um die Ladezeit einer Webseite zu minimieren, gehört das Komprimieren der zu übertragenden Inhalte. Da nahezu alle Browser die Komprimierung mittels GZip unterstützen, möchte ich zeigen, wie man mit ein paar Handgriffen den Seitenaufbau beschleunigt.

Proxy

Die üblichen Tipps, die man im Internet findet, empfehlen den Einsatz eines Proxy-Scripts, das wie folgt arbeitet:

  • Prüfe, ob Browser GZip unterstützt
  • Falls nein, gebe unkomprimierte Datei aus
  • Falls ja, komprimiere die Datei und gebe sie dann aus

Der Nachteil hierbei ist, dass es gewisser CPU-Overhead entsteht: das Script muss ausgeführt, die Javascript-/CSS-Datei geladen und ausgegeben werden. Ein weiterer Nachteil ist: wir müssen den vorhandenen HTML-Code ändern, damit die Javascript und CSS-Dateien über den Proxy geladen werden.

Komprimierung

Bei dem Proxy-losen Ansatz, den ich hier vorstelle, müssen alle Javascript- und CSS-Dateien, die in eine Seite eingebunden werden, bereits GZip-komprimiert vorliegen. Die Dateien lassen sich wie folgt komprimieren:


	cat script.js | gzip -N9 > script.jsgz

Der Vorteil bei der Methode mit cat ist, dass man mehrere Dateien gleichzeitig komprimieren kann. Das minimiert wiederum die Anzahl der Browser-Anfragen an den Server und beschleunigt ebenso den Seitenaufbau. Mehrere Dateien komprimiert man ganz einfach mit


	cat script.js script2.js script3.js | gzip -N9 > script.jsgz

.htaccess

Da uns nun die komprimierten Javascript und CSS-Dateien vorliegen, binden wir sie in die Seite ein. Dazu müssen wir allerdings den vorhandenen HTML-Code nicht verändern. Wir lassen den Webserver die richtige Datei aussuchen. Wird vom Browser eine Javascript-Datei angefordert, prüfen wir, ob dieser überhaupt was mit GZip anfangen kann. Falls er es kann, schauen wir, ob eine komprimierte Datei überhaupt existiert und geben diese dann aus. Die ganze Logik wird in einer .htaccess untergebracht und sieht wie folgt für Javascript aus:


	AddType "text/javascript" .jsgz

	<files *.js>
		RewriteEngine On
		RewriteCond %{HTTP:Accept-Encoding} gzip
		RewriteCond %{REQUEST_FILENAME}gz -f
		RewriteRule (.*)\.js$ $1.jsgz [L]
		ForceType text/javascript
	</files>

Analog für CSS:


	AddType "text/css" .cssgz

	<files *.css>
		RewriteEngine On
		RewriteCond %{HTTP:Accept-Encoding} gzip
		RewriteCond %{REQUEST_FILENAME}gz -f
		RewriteRule (.*)\.css$ $1.cssgz [L]
		ForceType text/css
	</files>

Natürlich ist das nicht die einzige Möglichkeit, den Seitenaufbau zu beschleunigen. Welche Möglichkeiten es noch gibt, kann man bei Yahoo nachlesen. Passend dazu bieten sie das Firefox-Add-On YSlow an, mit dem man die Geschwindigkeit seiner Seite messen kann.


Dieser Thread wurde geschlossen.

Populäre Tags

CSS Firefox MODX JavaScript