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.

Performance-Optimierung

© 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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".