Ein großes Interesse fürs Web ist es, dass ihre Seiten schnell laden. Die kann unter anderem durch die Komprimierung von JavaScripts und CSS-Code erreicht werden.

JavaScript-Dateien und auch Stylesheets sind oft sehr groß. Als Beispiel verwende ich die JavaScript Bibliothek jQuery. Diese hat unkomprimiert ca. 167 kb. Komprimiert kommt man auf eine Größe von nur 44 kb. Dies sind nur noch 26% der ursprünglichen Größe. Durch dieses Verfahren laden die Homepages um ein vielfaches schneller als zuvor.

Was ist nun wenn ein Browser oder ein Gerät nicht mit der Komprimierung zurechtkommt?
Für diesen Fall liegen immernoch die unkomprimierten Dateien auf dem Server.

Dateien komprimieren

An der Einbindung der Dateien in Ihre Homepage ändert sich rein gar nichts. Sie erfolgt wie üblich mit

1
2
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-latest.js"></script>

Nun müssen Sie die Scripte komprimieren und auf den Server laden. Die Scipte müssen in diesem Fall styles.css.gz und jquery-latest.js.gz heißen und im gleichen Ordner liegen wie die unkomprimierte Version.

Wie komprimiere ich ein Script?
Das Freeware Tool 7zip (Download hier) beherrscht diesen Komprimierungsformat.

.htaccess bearbeiten

Als zweiten Schritt müssen Sie nun folgenden Code in die Datei .htaccess einfügen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
# BEGIN Gzip Compression

AddEncoding gzip .gz

<filesmatch "\.js\.gz$">
    AddType "text/javascript" .gz
</filesmatch>

<filesmatch "\.css\.gz$">
    AddType "text/css" .gz
</filesmatch>

<ifmodule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{HTTP:Accept-encoding} gzip
    RewriteCond %{REQUEST_FILENAME} \.(js|css)$
    RewriteCond %{REQUEST_FILENAME}.gz -f
    RewriteRule ^(.*)$ $1.gz [QSA,L]
</ifmodule>

# END Gzip Compression

Damit wählt der Server aus, ob Gzip verwendet wird, oder nicht. Wenn ein Gerät die Komprimierung nicht unterstützt, wird die unkomprimierte Version genommen.

Leeren Sie nun Ihren Cache und laden Sie Ihre Seite neu. Die Ladezeiten sind nun erheblich geringer.