Kompression
Diese Arbeit sollte man nicht automatisieren, da dies in der Regel immer eine Gratwanderung zwischen Dateigröße und Bildqualität ist und ein Mensch dies besser beurteilen kann als eine Maschine. Beachten Sie dabei auch, dass sich die verschiedenen Formate nur für unterschiedliche Bildtypen eigne...
Diese Arbeit sollte man nicht automatisieren, da dies in der Regel immer eine Gratwanderung zwischen Dateigröße und Bildqualität ist und ein Mensch dies besser beurteilen kann als eine Maschine. Beachten Sie dabei auch, dass sich die verschiedenen Formate nur für unterschiedliche Bildtypen eignen.Während bei Fotos die besten Ergebnisse mit JPEG erzielt werden (sowohl in Bezug auf Qualität, als auch Dateigröße), werden gezeichnete Bilder normalerweise mit den Formaten PNG oder GIF gespeichert.
Verschleierungstaktik

Javascript und CSS machen heute einen großen Teil einer Webseite aus. Daher lohnt es sich hier, zusätzlich zur bereits beschriebenen serverseitigen Komprimierung mit GZIP, noch weitere Optimierungen einzusetzen. Wie in jeder anderen Programmiersprache versuchen Webentwickler auch in Javascript sauber formatierten und gut dokumentierten Quellcode zu schreiben, der auch nach einigen Monaten noch vernünftig wartbar ist.Variablen werden sprechend benannt, Klammern gesetzt, Zeilen eingerückt und mit Kommentaren nicht gegeizt. Was für einen Entwickler wichtig ist, interessiert einen Browser überhaupt nicht. Für ihn sind diese Informationen überflüssig. In Hinblick auf die Reduzierung der zu übertragenden Datenmenge macht sich ein Entfernen aller überflüssigen Zeichen allerdings positiv bemerkbar. Zwei Lösungsansätze können dabei unterschieden werden.Die einfachste Lösung besteht darin, alle syntaktisch nicht notwendigen Zeichen zu entfernen. Hierdurch lassen sich alle Kommentare, viele Leerzeichen und Zeilenumbrüche einsparen. Das folgende Listing zeigt eine einfache Javascript-Funktion mit Formatierung und Kommentaren.
// Wunderbare Testfunktion
function hallo()
{
var ausgabetext = 'Hallo Welt';
alert (ausgabetext);
}
Nach dem Entfernen aller nicht notwendigen Zeichen bleibt folgendes Ergebnis übrig, das deutlich kompakter ist, aber dieselbe Funktionalität aufweist.
function hallo()
{var ausgabetext='Hallo Welt';
alert(ausgabetext);}
Diese Optimierungsschritte müssen Sie selbstverständlich nicht von Hand durchführen. Dazu gibt es mittlerweile eine breite Palette an Tools, die Sie im Web unter dem Begriff Minifier finden.Angefangen von JSMin, dem Urvater aller Javascript- Minifier (Javascript.crockford.com/jsmin.html ), über weitaus bessere Lösungen wie dem YUI-Compressor (developer.yahoo.com/yui/compressor ), Shrinksafe aus dem DOJO- Framework (www.dojotoolkit.org/docs/shrinksafe ) oder Googles Closure Compiler (code.google.com/closure/compiler/ ).Die drei letztgenannten Tools bieten zudem noch eine zweite Strategie, um Javascript-Dateien zu verkleinern. Variablennamen werden durch möglichst kurze Bezeichner ersetzt. Aus der bereits minifizierten Beispielfunktion wird dann folgendes Endergebnis:
function _a(){var _b='Hallo Welt';
alert(_b);}

Dieses Obfuscating (Verschleierung) genannte Verfahren erfordert einen deutlich komplexeren Algorithmus und ist zudem nicht ganz ungefährlich, da die Variablennamen unter Umständen über mehrere Skriptdateien einheitlich benannt sein müssen.Viele populäre Webseiten nutzen diesen Ansatz, so auch alle AJAX-Anwendungen von Google, wie beispielsweise Google Mail und Maps. Obfuscating hat zudem den positiven Nebeneffekt, dass ein so behandelter Quelltext nur noch sehr schwer für andere Entwickler lesbar ist und so das geistige Eigentum besser geschützt werden kann.

Für CSS-Dateien gilt im Prinzip dasselbe wie für Javascript-Files. Allerdings sind hier die Einsparungen nicht so groß wie bei Javascript. Dies liegt in der Regel daran, dass innerhalb von Stylesheets weniger Formatierungen in Form von Leerzeichen und kaum Kommentare vorhanden sind. Auch ansonsten besitzt CSS eine kompakte Syntax.Durch manuelle Nacharbeit lässt sich aber oftmals noch einiges an Datenmenge innerhalb einer CSS-Datei herausholen, da Stylesheets zwei verschiedene Schreibweisen erlauben. Eine ausführliche und eine Kompaktschreibweise. Das folgende Beispiel zeigt eine Style-Definition in der ausführlichen Schreibart.
border-width: 1px;
border-style: solid;
border-color: gray;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 3px;
Dies lässt sich mit deutlich weniger Zeichen ausdrücken, wie das folgende Listing zeigt:
border: 1px solid gray;
padding: 2px 0 4px 3px;