Webseitenoptimierung: Minifying von Javascript-Code

Was hat es mit dem „Minifying“ von Javascript-Dateien auf sich? Und wieso ist dies für die Webseitenoptimierung von Relevanz? Wir möchten diese und andere Fragen im folgenden Beitrag beantworten.

Beim Öffnen von Webseiten kommuniziert der heimische Computer mit einem Webserver und lädt die notwendigen Daten herunter. Es ist eine Modeerscheinung geworden, Webseiten auf Geschwindigkeit hin zu optimieren, doch es gibt gute Gründe, warum der Trend eine Notwendigkeit sein sollte.

Tools wie Google Page Speed oder Yahoo Yslow messen die „Performance“ einer Webseite und geben Hinweise, wo es hapert. Dazu gehört durchaus das Verringern der Downloadgröße. Es gibt neben Bildern oder Stilvorlagen (CSS) auch Javascript-Dateien, die beim Aufruf einer Website mitgeladen werden. Diese kann man optimieren.

Lesbarkeit für Maschine unwichtig

Für gewöhnlich besitzen Javascript-Dateien Zeilenumbrüche und Leerzeichen. Das ist der Lesbarkeit für den Menschen geschuldet. Hat man einmal den optimalen JS-Code eingebunden, und funktioniert Alles einwandfrei, kann man anfangen, den Code zu optimieren. Dies kann man einerseits bezüglich der Ressourcen, die JS selbst verwendet. Bspw. lassen sich unnötige Variablen durch direkte Aufrufe von Objekten eliminieren. Doch für die Geschwindigkeitsmesser von Google und Yahoo ist vor allem die Dateigröße eines JS-Files interessant.

Indem man unnötige Zeichen, Zeilenumbrüche und Leerzeichen löscht, lässt sich, vor allem bei umfangreichen JS-Dateien etwas sparen. Das ultimative Minifying erzeugt eine Datei mit einer endlosen Zeile. Dieses Verfahren wird bei anderen Script- oder Programmiersprachen ebenfalls angewandt, ist aber bei JavaScript besonders häufig anzutreffen.¹

Wer in seinen eigenen Javascript-Code bislang Kommentare eingebaut hat, um die Funktionen zu beschreiben, und deshalb Blöcke eingerichtet hat, und Zeilenumbrüche verwendet, der sollte zur Optimierung seiner Webseiten folgendes tun: Ratsam ist, eine Kopie der normalen JS-Datei anzufertigen und diese radikal zu optimieren.
Das geht freilich nur, wenn es sich um eigene Dateien handelt und nicht etwa um Code von Google, Twitter oder Facebook, auf den man keinen Einfluss hat, weil er extern geladen wird. Nur dieser ist leider in den seltensten Fällen optimiert, sodass selbst Googles eigene Tools Hinweise liefern, den Code doch bitte zu optimieren.²

GTmetrix liefert optimierten Code

In diesem Zusammenhang interessant zu erwähnen ist das Tool GTmetrix.³ Es ist kostenlos in einer Standard-Variante. Nur professionellere Features kann man kostenpflichtig hinzu buchen. Doch für die Belange von Otto Normal reichen die kostenlosen Features prima aus. GTmetrix gibt die Werte von Google Page Speed und Yahoo Yslow an und bietet dieselben Hinweise auf Optimierung, die diese Tools bieten. Darüber hinaus wird beim Minifying von Javascript immer eine optimierte Version der Datei angezeigt.
Diese kann man öffnen, speichern und auf den eigenen Webserver hochladen, anstelle der eigentlichen Datei. Von der Ursprungsdatei sollte man eine Sicherheitskopie anfertigen, auf die man zurückgreifen kann, wenn irgendetwas nach dem Austausch nicht mehr so funktioniert wie vorher.

Zusammenfassen von JS-Dateien

Weniger häufig findet das Zusammenfassen von Javascript-Dateien Anwendung, das wir ebenfalls im weitesten Sinn als Minifying verstehen. Tatsächlich funktioniert die Kommunikation zwischen Browser und Webserver aber so, dass immer nur eine gewisse Anzahl von Dateien gleichzeitig vom Webserver geladen werden, die anderen hängen dann in der Warteschleife. Der Webseitenaufbau kann sich verzögern. Deshalb sollte man überlegen, ob man nicht mehrere JS-Files zusammenführt in eine große Datei, die dann die anderen „Slots“ nicht beeinträchtigt.

Anders als bei der Kompression kann eine „Minify“-Datei, also eine auf das Notwendigste reduzierte Datei, vom Interpreter ohne Probleme eingelesen werden.

Weitere Tools zum Reduzieren von Javascript

Wer sich selbst nicht zutraut seinen JS-Code beispielsweise von Lightbox-Plugins oder dergleichen auf das Nötigste zu reduzieren, dem begegnen im Internet eine Reihe von Tools. Relativ einfach gestrickt ist Packer von Dean Edwards⁴, das direkt auf der Webseite verwendet werden kann. Man kopiert einfach den eigenen JS-Code in das obere Feld und erhält im unteren Feld den optimierten Code zurück.

Für unbedarfte Nutzer eher nicht zu empfehlen, dafür aber durchaus für erfahrene Web-Entwickler sind der Closure Compiler von Google⁵ oder der YUI Compressor von Yahoo⁶. Manchmal muss man sich allerdings fragen, ob man mit Kanonen auf Spatzen schießen möchte. Microsoft bietet mit dem AJAX Minfier ein weiteres Tool an, das nur bedingt für Einsteiger geeignet ist.⁷

Weitere Teile der Reihe Webseitenoptimierung

• Webseitenoptimierung: JPG-Optimierung mit jpegoptim

Ähnliche Nachrichten