›› Web, Technologie, Forschung und Entwicklung ‹‹


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.

Anzeige

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:

 

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:

 

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.