Schneller, höher, weiter

Teil 3: Homepage-Optimierung: Geringe Ladezeiten, gute Performance

Nach dem Entfernen der 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 sich unter dem Begriff Minifier wiederfinden.

Angefangen von JSMin, dem Urvater aller Javascript-Minifier (), über weitaus bessere Lösungen wie dem YUI-Compressor () bis hin zu Shrinksafe aus dem Dojo-Framework ().

Die beiden letztgenannten Tools nutzen zudem noch eine zweite Strategie, um Javascript-Dateien zu verkleinern. Vari- ablennamen 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.

© Archiv

Auch für Browser wie Safari existieren Tools, die Entwickler bei der Optimierung von Webseiten unterstützen.

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 erlaubt. 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;

Mit nahezu der Hälfte an Zeichen wird so dasselbe ausgedrückt. Wer seine CSS-Definitionen nach diesem Prinzip aufbaut, der kann eine Menge an Daten einsparen, die nicht an den Browser übertragen werden müssen.

Minifier für Javascript und CSS gibt es mittlerweile viele. Die Entwickler dieser Tools überbieten sich regelmäßig mit neuen Ideen und verbesserten Algorithmen.

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.