Uglifying

Der Begriff Uglifying beschreibt die gezielte, automatisierte Veränderung von HTML-, CSS- und vor allem JavaScript-Ressourcen zum Zwecke einer schnelleren Datenübertragung zwischen Client und Server und der Verbesserung der Usability. Die Bezeichnung Uglifying leitet sich aus der häufig verwendeten JavaScript-Bibliothek uglify.js ab, deren Namensgebung eine ironische Bemerkung zu dem Prozess der Minimierung von Ressourcen sein dürfte.

Das generelle Konzept wird meist mit dem Begriff Minifying erklärt. Prinzipiell geht es dabei um die Reduzierung von überflüssigen Inhalten in Skripten, CSS-Stildateien und somit auch in HTML-Dokumenten: Bestimmte Zeichen und Namen für Aufrufe, Parameter und Variablen dienen zwar dem Verständnis des Entwicklers, sind aber nicht unbedingt notwendig für die Funktion der Ressource. Minifying zielt deshalb darauf ab, diese nicht notwendigen Zeichenketten aus einer Ressource zu entfernen und somit die Lade- und Aufrufzeiten sowie die Anzahl der HTTP-Verbindungen maßgeblich zu verringern.

Allgemeine Informationen zum Thema

Jeder Ladevorgang einer Website benötigt mehrere Datenübertragungen zwischen Server und Client, bevor die Informationsressource vollständig dargestellt wird. Neben dem eigentlichen HTML-Dokument werden auch CSS-Dateien und mögliche Skripte übertragen, die mit dem Dokument verknüpft sind. Diese Quellcode-Ressourcen sind üblicherweise so geschrieben, dass sie von einem menschlichen Benutzer nachvollzogen werden können. Kommentare erklären zum Beispiel bestimmte Funktionen und Aufrufe sowie deren Verbindungen zu anderen Bereichen im Quellcode. Die Bezeichnungen von Elementen und Funktionen werden von Entwicklern meist auf eine Art gewählt, sodass sie deutlich und selbsterklärend sind. Auch Leerzeichen, Umbrüche und Einzüge sind bezüglich der Verarbeitung von Quellcode nicht notwendig. Dennoch nehmen diese verschiedenen Arten von Zeichen und Zeichenketten Platz in Anspruch, der den Dateiumfang teils enorm erhöhen kann. Jede Verringerung dieser Zeichen führt zu einer besseren Performance beim Nutzer, da die Ressourcen schneller übertragen werden können. Zugleich werden die Datenübertragung und die Auslastung der verfügbaren Bandbreite reduziert.

Funktionsweise

Es gibt zahlreiche Tools, Plug-ins und Programme, die Quellcode minimieren können. Teilweise sind die Skripte auf die Zusammenarbeit mit anderen Bibliotheken oder Schnittstellen angewiesen. In ihrer Funktion haben diese Lösungen jedoch folgende Eigenschaften gemeinsam:

• Minifying (Minimieren): Jede nicht notwendige Zeichenkette wird entfernt oder – falls notwendig – in eine kürzere Zeichenkette umbenannt.
• Concatenation (Zusammenfassen): Gleiche Dateitypen (zum Beispiel mit den Endungen .js und .css) können durch Konkatenation zu einer Datei zusammengeführt werden.
• Linting (Prüfen auf Syntaxfehler): Der reduzierte Quellcode wird statisch auf syntaktische Fehler überprüft.

Von der Dateikompression (meist mit Gzip) sind das Minifying und das Zusammenfassen allerdings zu unterscheiden: Die Datei selbst wird verändernd und mit anderen Dateien desselben Formats zusammengefasst - und nicht einfach in ihrem Umfang verdichtet. Nichtsdestotrotz ist beides empfehlenswert, wenn der Page Speed verbessert und der Umfang der Dateien maßgeblich reduziert werden soll.

Beispiele

In der Praxis werden unter anderem folgende Transformationen vorgenommen:

• Nicht notwendiger Raum wird eliminiert, wie etwa Leerzeichen, Einzüge und Umbrüche.
• Namen für Variablen werden stark verkürzt. Mitunter bekommen sie Bezeichnungen, die nur aus einem Zeichen bestehen.
• Deklarationen für Funktionen werden verbessert angeordnet, um Platz zu sparen.
• Wenn möglich, werden Arrays zu Objekten umgeformt.
• Verschachtlungen mit if-Aussagen werden optimiert.
• Konstante Ausdrücke werden möglichst einfach deklariert, sodass die entsprechenden Zeichenketten im gesamten Dokument kurz sind.

Ein einfaches Beispiel. Die Funktion hello gibt den Text „Willkommen“ aus:

function hello( text ) {
    document.write( text );
}
hello( 'Willkommen auf dieser Website' );

Nach einer Minimierung mit uglify.js sieht das Beispiel wesentlich kompakter aus:

function hello(e){document.write(e)}hello("Willkommen auf dieser Website")

Bedeutung für die Programmierung

Die Verfahren Uglifying und Minifying können mit zahlreichen Tools umgesetzt werden. Es existieren Online-Tools, in denen Quellcode mithilfe von Copy und Paste eingetragen werden kann. Online YUI Compressor oder jsmini.com sind Beispiele hierfür. Programme mit grafischer Benutzeroberfläche wie Koala, CodeKit oder AjaxminGui beinhalten unterschiedliche Möglichkeiten zur Reduzierung von Code sowie weitere Funktionalitäten. Darüber hinaus sind Lösungen verfügbar, die mit sich mit der Kommandozeile steuern lassen. Beispiele sind Minify, Grunt, Gulp, Closure Compliler von Google oder Uglify.js, das auch als Command Line Version erhältlich ist.

Neben der Reduzierung von Ressourcen überprüfen einige Tools auch die Syntax und die Referenzen in einer Datei. Uglifying oder Minifying sorgen also nicht nur für bessere Ladezeiten, eine erhöhte Performance, eine kürzere Zeit zum ersten Byte und ein besseres Nutzererlebnis, sondern auch für validen Quellcode, der keine Fehler verursacht. Ein weiterer, relativ wichtiger Aspekt ist die Transparenz, die mit nicht reduziertem Quellcode hoch ist: Marktbegleiter können die Funktionen des Quellcodes nicht vollständig nachvollziehen, wenn die Dateien minimiert wurden. Dementsprechend erhöht das Minifying die Sicherheit vor unlauterem Verhalten im Wettbewerb und schützt bei IT-Dienstleistungen, Websites und Webanwendungen wichtige Teile des Geschäftsmodells.

Weblinks

• Minifying Definition
• Ressourcen reduzieren (HTML, CSS und JavaScript)
• Uglify.js in der Praxis
• Tool-Übersicht Minifying
• Kostenlose Minifying-Tools