In Teil 1 zu “Website Geschwindigkeit optimieren” haben wir uns um das messen der Geschwindigkeit und die serverseitige Komprimierung gekümmert, heute das nächste Thema.

Javascript und CSS Minify / Compremieren

Um noch weiter zu optimieren, bietet es sich an verwendete Javascript- und CSS-Dateien von unnötigen Zeichen zu befreien. Dazu gibt es „Minify-Tools“ wie z.B. den YUI Compressor von Yahoo. Dieser hat den Nachteil den Code dauerhaft zu komprimieren sobald man nachträglich etwas editieren möchte muss man mit den unübersichtlich gewordenen Files arbeiten. Meiner Ansicht nach der Bessere Weg führt über das Google-Code Projekt Minfy. Minfy lässt sich ganz einfach im Root der Website anlegen und sorgt zukünftig für das komprimieren von allen gewünschten CSS und JavaScript Dateien. Um dabei nicht bei jedem Pageview den Minify-Prozess auszuführen werden die Daten gecached und auf veränderung geprüft. Der Entwickler hat so immer die sauber gegliederten Codezeilen, dem User wird alle in komprimierter Form angeboten.

Nach dem entpacken von Minfy solle man die Datei min/config.php aufrufen und in Zeile 43: $min_cachePath anpassen. Auf dieses Verzeichnis muss PHP Schreibzugriff haben! Unter min/builder befindet sich ein Script welches ein kleines Admin-Tool zum erzeugen des benötigten HTML-Codes erzeugt. Ich habe mir einfach die Snippets, die das Tool erzeugt, in Typinator angelegt und lasse das builder-Verzeichnis einfach weg.

<!-- Minify CSS -->
<link type="text/css" rel="stylesheet" href="/min/b=PATH_TO_CSS&amp;f=CSS-FILES-KOMMA-SEPARATED" media="screen" />
<!-- Beispiel: -->
<link type="text/css" rel="stylesheet" href="/min/b=layout-dateien/css&amp;f=positioning.css,beautify.css" media="screen" />
<!-- Minify JavaScript -->
<script type="text/javascript" src="/min/?b=PATH_TO_JS_DIR&amp;f=JS-FILES-KOMMA-SEPARATED"></script>
<!-- Beispiel: -->
<script type="text/javascript" src="/min/?b=layout-dateien/js&amp;f=common.js,bigfeature.js"></script>

Morgen um 14:00 Uhr erscheint Teil 3 mit dem Thema “Reduzierung von HTTP-Requests”.