Dirk Jesse (der Entwickler von YAML) hat auf dem MobileCamp einen Vortrag gehalten, indem er verschiedene Ideen zur Optimierung der Webseitenperformance vorgestellt hat. Einen kurzen Auszug möchte ich hier vorstellen, da das für die einen oder anderen vielleicht interessant ist. Grundsätzlich ist einmal anzumerken, dass die Devise heißt: Inhalt nach vorn und Banner (Werbung) im Quelltext nach hinten. Der Grund ist einfach: Browser rendern von „oben“ nach „unten“ und was interessiert den Benutzer wirklich? Der Inhalt genau. Also das nach oben. Entwicklerversion entspricht nicht der Liveversion. Dieser Grundsatz bringt einiges an Performancevorteilen. Da wäre zum einen, dass aus allen Dateien die Whitespaces (Leerzeichen, Tabulatoren, Zeilenumbrüche) raus müssen. Den Browser interessiert es nicht, wie der Quelltext eingerückt ist, der kann das auch aus einer Zeile parsen. Trotzdem spart man dadurch einige Bytes, die durchaus relevant sein können. Ein weiterer Tipp wäre die Gzip Komprimierung. Das bedeutet, dass der Server die Dateien „gezipped“ ausliefert und der Browser sie wieder entpackt. Das packen und entpacken geht relativ schnell und die Dateigröße reduziert sich sehr. Problematisch ist nur, dass es Rechenaufwand auf Seiten des Servers verursacht. Da das bei größeren Seiten durchaus viel werden kann, bekommt man das meist nicht in kleineren Webpacks.

Optimierung der Grafiken

Bilder sind im Normalfall die größten Dateien bei einer Website und bieten das meiste Optimierungspotenzial.

Wahl des Grafikformats

Die Wahl des richtigen Grafikformats ist wichtig und erhöht die Performance wesentlich. Grundsätzlich kann man sagen, dass bei Fotos jeglicher Art JPEG das richtige Format ist. Hierbei muss man schauen, welche Qualitätsstufe passend ist. Geht es um Grafiken mit begrenzten Farben (Diagramme, Verläufe, etc) ist PNG die richtige Wahl. Es gibt zwar noch GIF, aber PNG ist das äquivalent zu GIF, nur hat einen besseren komprimierungs- Algorithmus. Damit hat, bis auf Animationen, das GIF Format ausgedient. PNG kommt mit einem weiteren Vorteil daher. Es bietet Transparenz und zwar in zwei verschieden Varianten. Einmal bei 24bit PNGs die Alphatransparenz (da hat man den vollen Alphakanal) und eine Transparenz (8 bit PNG), bei der nur unterschieden wird, ob transparent oder nicht(wie bei GIF auch). Das Problem an PNG ist nur – wie so oft in der Webentwicklung – der Internet Explorer aus Redmont. Er kann keine Alphatransparenz darstellen. Stattdessen kommt einfach nur eine hässliche graue Fläche zum Vorschein. Abhilfe würden die 8bit PNGs schaffen, doch sie haben nur eine eingeschränkte Transparenz doch sie haben nur einen eingeschränkten Farbbreich [1]. Hier muss man wieder abschätzen, ob man diesen Alpha Kanal wirklich braucht. Es stellt sich allerdings ein Problem bei den 8bit. Nur wenige Programme können es (bspw. Fireworks von Adobe, Photoshop nicht).

Tools für die Bildoptimierung

Dirk Jesse hat in seiner Session zwei vorgestellt, die ich an dieser Stelle nennen möchte.

• PNGCrunch
• Smush.it

Das letztere (von Yahoo!) ist ein ziemlich cooles, kleines Werkzeug. Man gibt einfach seine Webadresse an, die Seite wird geparsed, alle Bilder extrahiert, optimiert und anschließend zum Download angeboten. Sehr nützlich!

Optimierung der Grafiken mithilfe von CSS

Man kann seine Website, speziell die Grafiken, noch performanter machen, in dem man eine CSS Technik einsetzt, die CSS-Sprites heißt. Hierbei geht es darum, verschiedene Stati eines Linkes zum Beispiel in einem Bild zu speichern und dann lediglich die Position des Background Images zu verändern. Ein Absolutes NO-GO ist die Bildskalierung mit HTML. Das raubt Rechenzeit und erzielt zudem meist nicht so sehr ansehnliche Ergebnisse. Also, Bilder immer vorher Rendern!

CSS Optimierung

Grundsätzlich sollte man, zusätzlich zum entfernen von Whitespaces und Kommentaren, noch die @import regeln vermeiden. Stattdessen die <link> Elemente von HTML nutzen. Das ermöglicht dem Browser nämlich, dass CSS im Hintergrund auch parallel zu laden. Aus diesem Grund kann man auch Empfehlen, seine CSS Stylesheets in mehrere Aufzuteilen. Aber Vorsicht, auch gilt: In Maßen, nicht in Massen!! Denn Browser können nur eine begrenzte Anzahl an Downloads gleichzeitig erledigen. Der Firefox und der Safari beispielsweise erlauben 4. Der IE ? 7 erlaubt nur 2. Der neue IE 8 dagegen bis zu 10. Faustregel also: 2-4 CSS-Stylesheets verwenden um Parallelisierung ausnutzen zu können. Außerdem kann man noch solche Tools wie CSS-Tidy oder den YUI-Compressor drüber schicken. Hier gilt wieder die Unterscheidung zwischen Live- und Entwicklerverison.

Javascript Optimierung

Auch beim Javascript kann man ganz einfache Dinge beachten und beachtliche Performance Steigerungen erzielen. Zunächst sollte man die Skripte auslagern. Das hat einfach wieder den Hintergrunddownload zur Folge und spart wieder Zeit. Außerdem sollte man sein Javascript möglichst vor </body> setzen, da JS im Normalfall eh die Fertige Seite braucht um zu funktionieren. Außerdem sollte man seine Applikationen stufenweiße starten.

Weiterführende Links

• Webkrauts – Das richtige Grafikformat
• Webkauts – Webseiten Performance best practise Teil 1
• Webkrauts – Webseiten Performance best pracise Teil 2

Verwandte Beiträge

• WordPress Theme