Webseitenoptimierung » Allgemein, Techniker

von Danny - 06|05|2010

Code Optimizer sind Tools, mit denen man seine JavaScript-Datei bzw. CSS-Datei auf eine Minimumgröße reduzieren kann. Ein Optimizer entfernt alle Kommentare, Leerzeichen und Umbrüche. Problematisch sind Code Optimizer, die an dem Code selbst etwas verändern, denn dann kann es zu spürbaren Veränderungen kommen.

Closure Compiler:
Der von Google entwickelte Closure Compiler optimiert JavaScript und existiert als Download- sowie als Online-Version. Dieser Optimizer besitzt drei unterschiedlich starke Komprimierungsgrößen: “Whitespace only” entfernt nur Kommentare, unnötige Zeilenumbrüche und Leerzeichen. Der Code ist exakt der selbe, wie der unkomprimierte Code. “Simple” macht das selbe wie “Whitespace only”, aber zusätzlich benennt diese Einstellung Funktionsnamen und Variablen, die innerhalb der JavaScript-Datei verwendet werden in kürzere Funktionsnamen um. “Advanced” macht das selbe wie “Simple”, aber benennt nicht nur die Funktionsnamen um, die innerhalb der JavaScript-Datei liegen, sondern die, die auch von außen zugreifbar sind. Daher muss man hier darauf achten, wie diese Funktionen nach der Komprimierung benannt wurden. Zusätzlich entfernt diese Einstellung auch alle Funktionen, die nicht verwendet werden. Daher ist diese Einstellung mit sehr viel Vorsicht anzuwenden.

Vorteile:

Zusätzlich warnt das Tool vor Problemen, die nach der Komprimierung entstanden sein könnten.
Die neue JavaScript-Datei lässt sich als lesbarer Code einstellen (mit Umbrüchen und Einrückungen).
Der Code kann eingegeben, oder per URL angegeben werden.
Die neue JavaScript-Datei kann einen beliebigen Namen tragen und nach der Komprimierung per Klick auf den Dateinamen herruntergeladen werden.
Die Komprimierung ist sehr effektiv (Dateien können bis zu 70% komprimiert werden)
Das Tool besitzt eine sehr gute Dokumentation von Google

SpriteMe!
SpriteMe! ist ein Sprite Generator, der meherere Bilder in einem zusammenfügt und dazu auch noch die Koordinaten des jeweiligen Bildes in einem CSS Export speichert. Das Tool wird als Lesezeichen ausgeführt und analysiert die aktuelle Seite, auf der man sich befindet und beschreibt auch gleich die Bilder, die als Sprite in Frage kommen. Mit Klick auf “Make Sprite” wird ein Bild erzeugt, das die möglichen Bilder beinhaltet.