Ladezeiten verkürzen

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 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

image.jpg

© Internet Magazin

Google bietet ein Firefox-Plugin, das die Ladegeschwindigkeit einer Seite analysiert und anschließend Tipps für die Verbesserung gibt.

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);}

image.jpg

© Internet Magazin

Das von Yahoo kostenlos zur Verfügung gestellte YSlow-Plugin führt ein Benchmarking einer Seite durch und gibt Verbesserungsvorschläge.

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.

image.jpg

© Internet Magazin

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;

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​".