Entries for month: February 2010

ColdFusion: Ladezeitoptimierung mit Combine.cfc

ColdFusion No Comments »

Viele moderne Websites nutzen aufwendige AJAX Features. Dadurch müssen teilweise mehrere Bibliotheken wie Scriptacluos, Prototype oder jQuery, so wie diverse Plugins und eigene Scripte geladen werden. Auch wenn die einzelnen Dateien nicht sonderlich groß sind, verursachen sie viele einzelne HTTP-Requests.

Hier kommt die Combine.cfc ins Spiel. Das Paket besteht aus einer combine.cfm, combine.cfc so wie verschiedenenen Java Archiven und Klassen. Die Archive yuicompressor-2.4.2.jar und combine.jar müssen, ebenso wie der Inhalt des Ordners com, zum ColdFusion Classpath hinzugefügt werden.

Nun kann man statt die Dateien einzeln zu verlinken:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.min.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.min.js"></script>
<script type="text/javascript" src="js/jquery.dltoggle.min.js"></script>
<script type="text/javascript" src="js/funny-stuff.js"></script>

Alle Dateien über einen Link laden:

<script type="text/javascript" src="combine.cfm?files=js/jquery-1.3.2.min.js,js/jquery.easing.1.2.js,js/jquery.corner.js,js/jquery-ui-1.7.2.custom.min.js,js/jquery.dimensions.min.js,js/jquery.tooltip.min.js,js/jquery.dltoggle.min.js,js/funny-stuff.js"></script>

Combine fügt nun die einzelnen Dateien zu einer Datei zusammen, so das effektiv nur eine Datei geladen werden muss, welche zusätzlich noch komprimiert wird. Combine entfernt unter anderem alle Leerräume, wie man es z.B. von der jQuery-minified her kennt. Keine Leerzeichen, keine Leerzeilen.

Der große Vorteil liegt darin, dass die Originaldateien nicht angerührt werden. So kann man einzelne Dateien immer noch problemlos ändern oder updaten.

Das ganze funktioniert auch mit CSS Dateien!

Apache: Ladezeit durch GZip optimieren

Apache No Comments »

Die Ladezeiten einer Website lassen sich mit dem Apache enorm verkürzen. Hierzu wird das mod_deflate benötigt, welches eigentlich bei jeder Linux Distro, OS X und Windows installiert sein sollte.

Um mod_deflate nutzen zu können sind zwei Schritte notwendig.

Schritt 1
Das Modul laden. Hierfür öffnen wir die httpd.conf bzw. apache2.conf (je nach OS) und suchen nach folgender Zeile:

#LoadModule deflate_module modules/mod_deflate.so

Hier entfernen wird das #, speichern die Datei und starten den Apache neu. Bevor wir die Datei schliessen, suchen wir noch nach der Zeile:

Load config files from the config directory

Hier steht wo sich zusätzliche Konfigurationsdateien befinden müssen, damit sie geladen werden. Auf den meisten Linux Systemen sollte der Pfad /etc/httpd/conf.d lauten.

Schritt 2
Wir wechseln in den Ordner /etc/httpd/conf.d und erstellen eine leere Textdatei, die wir deflate.conf nennen. Diese füllen wir mit folgenden Anweisungen:

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|iso|tar|bz2|sit|rar|png|jpg|gif|jpeg|flv|swf)$ no-gzip dont-vary
DeflateCompressionLevel 9
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
SetEnvIf User-Agent ".*MSIE.*" nokeepalive ssl-unclean-shutdown downgrade-1.0 force-response-1.0

Erklärung:
SetOutputFilter DEFLATE
Aktiviert das Modul

SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|iso|tar|bz2|sit|rar|png|jpg|gif|jpeg|flv|swf)$ no-gzip dont-vary
Setzt einen Filter, welche Dateitypen NICHT komprimiert werden sollen. Dazu gehören Binärdaten, Bilder (sind schon komprimiert), komprimierte Archive (zip, rar etc.), Flash und Flashvideo. Alles andere wird komprimiert. (Ihr könnt diese natürlich euren Bedürnissen entsprechend anpassen.)

DeflateCompressionLevel 9
Setzt die Kompressionsstärke. 9 ist die höchste Stufe, hier werden je nach Datei bis zu 75% eingespart!

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
SetEnvIf User-Agent ".*MSIE.*" nokeepalive ssl-unclean-shutdown downgrade-1.0 force-response-1.0

Hier werden einige Browser ausgeklammert, von denen bekannt ist, das sie mit GZip nicht umgehen können. Diese bekommen den Inhalt unkomprimiert.

Und hier könnt ihr testen, ob die Komprimierung funktioniert und wie stark das Datenvolumen reduziert wird.

Powered by Mango Blog. ©2010 Patrick Heppler. Design inspired by the GlossyBlue Theme © N.Design Studio.
RSS Feeds