Uglifying

Copyright © Shutterstock / Pakpoom Makpan

Was bedeutet Uglifying?

Der Begriff Uglifying stammt aus dem Bereich der Computer-Programmiersprachen und beschreibt das gezielte Entfernen unnötiger Zeichen aus dem Quellcode, ohne die Funktionalität zu beeinträchtigen. Dazu gehören in der Regel Leerzeichen, Zeilenumbrüche, Kommentare und so genannte Blockbegrenzer. All diese Zeichen sind hilfreich, um den Quellcode für das menschliche Auge besser lesbar zu machen. Für die Ausführung der Programme sind sie nicht erforderlich. Der Vorgang als generelles Konzept wird in den meisten Fällen als “Minifying”, “Minification” oder “Minimization” bezeichnet. Die Verringerung nicht benötigter Zeichen ist nicht nur unter JavaScript hilfreich, sondern betrifft ebenso HTML-Dokumente und CSS-Stildateien.

Das Uglifying zeigt seinen Nutzen bei interpretierten Sprachen, die innerhalb des Internet bereitgestellt und übertragen werden. Dazu gehört beispielsweise JavaScript. Der minimierte Quellcode beinhaltet deutlich weniger Daten, die übertragen werden müssen. Der Vorgang des Uglifying muss klar von der Datenkomprimierung abgegrenzt werden. Eine minimierte Quelle muss nicht dekomprimiert werden, sondern ist sofort interpretierbar. Bei der Komprimierung ist genau dieser Schritt erforderlich, um mit den Daten arbeiten zu können. Das grundsätzliche Ziel des Uglifying ist die zügige Datenübertragung zwischen Server und Client sowie die Verbesserung der Nutzungsqualität.

Verbesserung der User Experience

User Experience heißt zu deutsch Nutzererlebnis und beschreibt, wie ein Besucher die Website erlebt, die er aufruft. Zu den Merkmalen zählen in erster Linie:

• die Dauer der Ladezeiten sowie die Zugänglich der Websites über unterschiedliche Endgeräte (PC, Tablet, Laptop, Smartphone etc.),
• die Verfügbarkeit und Erreichbarkeit der Website,
• die Optik der Website (subjektives Empfinden hinsichtlich Anordnung, Farb- und Schriftwahl etc.),
• der Nutzen der Funktionen und Inhalte der Website sowie die Bedienerfreundlichkeit

Ladezeiten, Verfügbarkeit der Website und auch das Responsive Design machen es trotz des subjektiven Erlebens möglich, die Nutzerqualität zumindest in einigen Punkten zu messen. Dank Uglifying sind zumindest die Ladezeiten gut zu beeinflussen. Inwiefern sich die verbesserte User Experience auf das Ranking in den Suchmaschinen auswirkt, ist unklar. Experten nehmen an, dass bestimmte Kennzahlen als Qualitätsindex das Ranking beeinflussen. Zu diesen Kennzahlen gehören zum Beispiel die Verweildauer der Besucher auf der Website, die “Return to Search Rate” oder auch der Anteil der Besucher, die die Website erneut aufrufen. Auch wenn es sich lediglich um eine Vermutung handelt, sollte dieser Aspekt durchaus berücksichtigt werden. Hinsichtlich des User Experience Designs kann das Uglifying zumindest indirekt das Ranking beeinflussen.

Die Anfänge des Uglifying

Douglas Crockford, ein US-amerikanischer Programmierer und Unternehmer, stellte im Jahr 2003 das Tool JSMin vor, mit dem Kommentare und Leerzeichen gelöscht werden konnten. Der YUI Compressor folgte bereits nach kurzer Zeit. 2009 stellte Google sein Closure-Toolkit vor. Zum Inhalt dieses “Werkzeugkastens” gehörte der Closure Compiler, der wiederum eine Source-Mapping-Funktion in Verbindung mit der Firefox-Erweiterung Closure Inspector enthielt. Im Jahr 2010 folgte die Markteinführung von UglifyJS durch Mihai Bazon, einem rumänischen Programmierer. Die Bezeichnung Uglifying ist eine Ableitung der oft verwendeten JavaScript-Bibliothek uglify.js – möglicherweise ein ironischer Kommentar, was den Minimierungsprozess von Ressourcen betrifft. Der Nachfolger UglifyJS2 ermöglichte ab 2012 den Source-Map-Support.

Die Funktionsweise des Uglifying

Für die Minimierung von Quellcode stehen zahlreiche Plug-ins, Programme und Tools zur Verfügung. Manche Skripte sind darauf angewiesen, mit anderen Schnittstellen oder Bibliotheken zusammenzuarbeiten. Hinsichtlich ihrer Funktion weisen die Anwendungen in der Regel jedoch folgende gemeinsame Merkmale auf:

Beispiele für das Uglifying in der Praxis

• Raum, der nicht notwendig ist, wird eliminiert. Dazu gehören zum Beispiel Leerzeichen, Umbrüche, Einzüge usw.
• Benennungen von Variablen werden extrem gekürzt. Die neuen Bezeichnungen bestehen häufig nur noch aus einem Zeichen.
• Um Platz zu sparen, kann bei der Deklaration von Funktionen die Anordnung optimiert werden.
• Arrays werden in Objekte umgewandelt, sofern dies möglich ist.
• Verschachtelte If-Aussagen werden möglichst optimiert.
• Sind konstante Ausdrücke vorhanden, nehmen sie im gesamten Dokument weniger Raum ein, wenn sie so einfach wie möglich deklariert werden.

Tools und Anwendungen für das Uglifying

Es gibt mittlerweile zahlreiche Tools für das Minimieren von Quellcode. Manche davon können online via Copy and Paste genutzt werden. Beispiele für solche Online-Tools sind jsmini.com oder Online YUI Compressor.

Zu den Anwendungen mit grafischer Oberfläche zählen unter anderem CodeKit, Koala und AjaxminGui. Zusätzlich zur Quellcode-Minimierung bieten diese Programme weitere Funktionen an.

Darüber hinaus gibt es Anwendungen, die die Quellcode-Minimierung über die Kommandozeile steuern. Zu dieser Kategorie gehören zum Beispiel der Closure Compiler von Google, Minify, Gulp oder Grunt. Auch Uglify.js steht als Command Line-Version zur Verfügung.

FAQ