19. August 2013

JavaScript und CSS Minifier

Code-Minifiers — JavaScript und CSS Code-Minifier

Obwohl DSL und HSDPA die Zeiten des langsamen Surfens mit dem guten alten Modem längst vergessen gemacht haben, spielen (geringe) Ladezeiten von Webseiten - gerade im mobilen Bereich - nach wie vor eine wichtige Rolle. Wo es geht sollte man die Dateigröße minimal halten, um ein schnelleres Laden von Webseiten auf Geräten mit geringer Bandbreite zu ermöglichen. Prädestiniert hierfür sind besonders JavaScript-Dateien, die durch Komprimierung des Codes manchmal auf die Hälfte und weniger der ursprünglichen Dateigröße zusammen geschrumpft werden können. Aber auch bei CSS Dateien kann man durch Komprimierung deutliche Größeneinsparung erreichen. Ein paar nützliche Tools hierzu werden in diesem Artikel vorgestellt.

Eine signifikante Verringerung der Dateigröße von JavaScript-Dateien um 30-90% erreicht man u.a. durch das Entfernen von Kommentaren und Whitespace-Zeichen (Leerzeichen, Tabs, etc.) oder durch obsolete Trennzeichen.

Selbstverständlich ist unbedingt eine Kopie des Originals für zukünftige Änderungen am Quellcode zu speichern, da die komprimierten Dateiversionen unleserlich werden und damit für eine Bearbeitung ungeeignet sind.
Die "minified Version" dient also lediglich der Platzeinsparung im Produktivbereich.

Bei der Verwendung von JavaScript Bibliotheken oder Frameworks wie z.B. jQuery sollten in jedem Fall die minimierten Versionen eingebunden werden (meist zu erkennen an einem ".min" im Dateinamen), da diese von Haus aus meist recht umfangreich sind und daher erhebliche Einsparungen an kb möglich sind.

Online Minifier

Für die Erstellung komprimierter Dateien gibt es zahlreiche (häufig kostenfreie) Programme und Online-Dienste.

JavaScript-Minifier

Für die Kompression von JavaScript-Dateien verwende ich häufig die folgenden Online-Minifier:

JS Minifier von Franck Marcia
Bei diesem Tool kann zwischen drei "Stärken" der Kompression gewählt werden. Die Variante "agressive" funktioniert bei mir sehr gut. Allerdings sollte man keine Fehler im Code haben bzw. nicht die geschwungenen Klammern z.B. bei if/else Anweisungen vergessen.
http://fmarcia.info/jsmin/test.html
Ein weiteres schnelles Tool ist der Minifier auf javascript-minifier.com
Hier kann die Kompression auch über einen POST-Request erfolgen.
http://javascript-minifier.com/
Alternativ gibt es noch das Online Javascript Compression Tool auf jscompress.com
Bei diesem können die JS-Dateien neben Copy & Paste auch per Upload verarbeitet werden.
http://jscompress.com/

CSS-Minifier

Bei der Komprimierung von CSS-Dateien ist der Komprimierungseffekt normalerweise geringer als bei JS-Dateien, lohnt sich aber v.a. bei Vorhandensein ausführlicher Kommentare und beim Einbinden mehrerer CSS-Dateien ebenfalls zur Verminderung der zu nutzenden Bandbreite.

Folgende Online-Tools kommen bei mir zum Einsatz:

Der CSS-Minifier auf cssminifier.com
Auch hier kann der komprimierte Code per POST-Request abgerufen werden.
http://cssminifier.com/
Bei freeformatter.com
kann neben der Copy & Paste Version auch eine URL mit Pfad zur CSS-Datei angegeben werden.
http://www.freeformatter.com/css-minifier.html

Fazit:

Die Erstellung komprimierter Versionen von JavaScript- oder CSS-Dateien ist denkbar einfach und mit den entsprechenden Online-Generatoren schnell vollzogen.

Für Webseiten-Besucher bedeutet die Einbindung komprimierter Dateien eine Einsparung an Bandbreite und Traffic.

Natürlich stellt dies lediglich eine Form der Performance-Verbesserung für Webseiten dar. Zu erwähnen ist, dass z.B. auch das Zusammenfassen mehrerer Dateien (JS oder CSS) in einer Datei zu erwägen ist. Letzteres ist im Hinblick auf eine Verminderung der Anzahl an HTTP-Requests sinnvoll, die sich ebenfalls auf die Bandbreite und Serverlast auswirken und damit die Performace beeinflussen.