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”.

Glimmer ist eine Animations-Bibliothek die auf jQuery aufsetzt und viele vordefinierte Animationsarten wie z.B. easeInElastic, easeOutBounce, swing oder howdyOut. Damit lassen sich schnell ansprechende Animationen in die Website einbauen ohne sich selbst groß über die Bewegungsabläufe z.B. bei einer Beschleunigung Gedanken machen zu müssen.

Zum Glimmer – Lab
Beispiel-Animationen

Wem MacHeist kein Begriff ist, dem sei es hier kurz vorgestellt: MacHeist schnürt in unregelmäßigen abständen Mac Software zu unschlagbaren Preisen in ein Paket. Dabei werden einzelne Apps freigeschaltet um so mehr User das Bundle kaufen. Steigt man gleich am Anfang mit ein, heisst dass am besten selber Werbung für das Bundle machen um zum Schluss auch alle Softwarepakete zum entrichteten Preis zu erhalten.

Schaut man sich die Seite von MacHeist an bekommt man einen schönen Einblick was  schon alles in aktuellen Browsern mit JavaScript und CSS zu machen ist. So wurde gänzlich auf Flash verzichtet und trotzdem ein enorm anschauliches Ergebnis erzielt. Wer mit einem Webkit basierten Browser unterwegs ist (z.B. Safari oder Chrome) wird oben drauf noch mit Schattenwurf der einzelnen Kisten belohnt. Die Entwicklung solcher Seiten wird die aktuelle Diskussion um die Zukunft oder das sterben von Flash noch weiter füttern.

Zur MacHeist Seite

Das Letzte Bundle umfasste 12 Mac OS X Apps für 39$

Acorn (Bildbearbeitung)
BoinxTV (Videocasting)
Espresso (Editor)
iSale (eBay-Auktionsmanager)
Kinemac (3D)
LittleSnapper (Screenshot)
PhoneView (Dateiverwaltung für iPhone / iPod touch)
Picturesque (Bildbearbeitung)
Sous Chef (Rezeptverwaltung)
The Hit List (GTD-Tool)
World Of Goo (Spiel)
WireTap Studio (Audio)