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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…