Mit Sprites die Webseite schneller machen

Bin schon da … sagte der Igel.

Ein nicht zu unterschätzendes Kriterium um Besucher auf einer Webseite zu halten ist die Ladezeit der Seite. Zwar hat sich einiges aufgrund verbesserter Internet-Anschlüsse getan und viele User gehen inzwischen mit High-Speed ins Internet, aber viele eben auch noch nicht. Grund genug mal ein Auge drauf zu werfen und zu schauen, was man verbessern könnte.

Im Allgemeinen gilt die Faustregel, dass eine Webseite innerhalb der ersten 8 Sekunden vollständig angezeigt werden sollte. Geschieht dies nicht, ist die Gefahr groß, dass der ungeduldige User weg- und weiterklickt.

Auch als Laie kann man seine eigene Seite mal einem Test unterziehen und die Adresse der Webseite bei www.websiteoptimization.com eingeben.

Nur Warnings … watt nu?

Es gibt eine ganze Reihe von Möglichkeiten die Ladezeit zu verbessern. Manches kann man auch als Laie selber machen, bei anderen Dingen muss der „Profi“ ran.

Javascript und die Navigation

Insgesamt wird empfohlen, dass die zu ladende Datenmenge 30KB nicht übersteigen soll. Vielfach lässt sich das Übersteigen dieser Grenze auf die Verwendung von Javasripts zurückführen, die für die Navigation eingesetzt werden. Der Grund dafür liegt auf der Hand : Javascript Navigationen gibt es zu Hauf im Internet zum Runterladen. Sie sind von einnehmender Fröhlichkeit, schön bunt, können auf- und zu klappen, blinken, blitzen, hupen und machen lauter so neckische Dinge, die andere Navigationen nicht bieten. Das verführt leicht dazu eine solche Navigation als „schön“ und „muss ich auch haben“ zu empfinden. Neben weiteren Nachteilen kann aber so eine Monsterbacke von Javascript-Menü schon einen erheblichen Anteil daran haben, dass die Datenmenge, die geladen werden muss um die Seite vollständig anzuzeigen, einfach zu groß ist.

Was kann man dagegen tun?

Ganz einfach. CSS-Menüs verwenden. Es gibt einen Haufen von guten Alternativen, man muss nur wissen wo.

http://css.maxdesign.com.au/listamatic/index.htm
Hier sind einige CSS-Menüs zu finden, mit denen auch Anfänger zurecht kommen.

http://www.cssplay.co.uk/menus/
Spielkinder mit Hunger auf mehr schauen mal bei Stu Nichols rein.

Grafiken und Bilder

Bei vielen Untersuchungen mit dem Websiteoptimization-Tool wird sich u.U. auch zeigen, dass die Bilder der nächstgrößere Brocken sind. Bilder werden zum einen für die Gestaltung der Webseite eingesetzt und/oder sind für die Darstellung unverzichtbar, weil sie anschaulich bestimme Sachverhalte erklären oder , z.B. bei einem Shop, angebotene Produkte zeigen.

Speichergröße reduzieren

Bilder im .jpg Format , die vom Autor einer Webseite in die Inhalte eingefügt werden, sollten daher immer bis an den Rand des Erträglichen komprimiert werden um jedes Byte einzusparen.

An sich kann man die Komprimierung mit jedem Grafik-Programm durchführen, aber da die meisten, oft nur redaktionell tätigen Autoren einer Webseite, kein Grafikprogramm besitzen, wäre z.B. Irfan-View zu empfehlen. Das Programm kann man sich kostenlos runterladen. Die Bedienoberfläche hat zwar einen recht spröden Charme, Irfan-View ist aber dennoch ein durchaus empfehlenswertes Tool, welches neben der Komprimierung auch noch einige andere Dinge auf der Pfanne hat.

Wer das nicht will, dem kann auch Picasa empfohlen werden. Einmal installiert kann man mit Picasa seine Bilder auch mit einigen Effekten verschönern, die Bilder auf der Festplatte organisieren und sogar Webalben anlegen.

Anzahl der https-Verbindungen reduzieren

Sollten diese Maßnahmen nicht ausreichen, muss man analysieren welche Bilder für die Datenmenge hauptsächlich verantwortlich sind. Sind es die vom Autor eingefügten Bilder im Text oder einer Fotogalerie oder sind es die Bilder, die im Design einer Seite stecken?

Ja – ja – das ist die Kehrseite der Medaille. Grafikintensive Seiten mit Hingucker-Effekt verbrauchen oft für allein für das Design viel Speicherplatz. Besonders bei shops ist es daher wichtig sorgfältig damit umzugehen bzw. hier eine Möglichkeit in Betracht zu ziehen, die jedoch wahrscheinlich nicht von Laien durchgeführt werden kann.

Dass eine Seite sich nur langsam aufbaut, kann, neben der schon erwähnten Speichergröße der einzelnen Dateien auch an der Anzahl der offenen https Verbindungen liegen. Jedes Bild, welches geladen wird, hat seine eigene Verbindung und wird über diese vom Server abgerufen und auf der Webseite dargestellt. Sind es viele Bilder, hat man logischerweise auch viele solcher Verbindungen offen. Für die Bilder, die für das Design benötigt werden, kann man jedoch durch die „Sprite-Technik“ die Anzahl der Verbindungen reduzieren.

http://www.alistapart.com/articles/sprites

Im einfachsten Fall kann man die „Sprites“ z.B. schon für Links und Listsymbole anwenden und so zumindest die Anzahl der offenen Verbindungen für Bilder die zum Design einer Seite gehören reduzieren. Hierzu bedient man sich der Möglichkeiten der Bildpositionierung mit CSS. Im Falle eines Links z.B. würde man sowohl das Symbol für den Links als auch das Symbol für den Link im gehoverten Zustand in ein (1) Bild legen statt in zwei getrennte. Durch die Angabe der Position kann man aber auf dem Bildschirm immer nur eines von beiden sehen. Diese Methode hat den Vorteil, dass das Bild, welches ja im Grunde zwei Symbole enthält, in einem Rutsch vom Browser in den Cache geladen wird.

In komplexeren Fällen, soll es auch möglich sein ALLE Bilder eines Designs in eine (ich sag mal) Folie zu legen. Das habe ich aber selber noch nicht ausprobiert. Sollte ich aber vielleicht mal, denn mein Weblog ist auch nicht gerade ein Vorbild in Sachen Speichergröße und Ladezeit. Was ich mich allerings frage  ist, wie sich solche Grfaiken bei  mit relkativen Größeneinhaiten aufgebauten Webseiten verhalten.

Wer mehr über Sprites wissen will, kann hier weiterlesen:
http://spritegen.website-performance.org/section/what-are-css-sprites/

Der Code

Möchte man es besonders barock und voluminös empfiehlt sich das Layout mit Tabellen zu erstellen, möglichst viele davon zu verschachteln und viele Zellen miteinander zu verbinden. Am besten geht das mit einem html-Editor wie Frontpage, weil man da die Tabellen visuell zusammenklickern kann ohne dabei den Überblick zu verlieren. Ganz Virtuose können das natürlich auch ohne einen Editor ;-) – Im Quellcode kommen dabei einzigartige Kunstwerke heraus, die garantiert so schnell niemand kopiert.

Glaubst du nicht?

Gut :-) – außer das mit dem Kopierschutz würde es auch nicht glauben, denn in den allermeisten Fällen ist der dritte Hauptspeicherfresser so mancher Webseite der Html-Code an sich. Dafür sorgen eine veraltete Layout-Technik mit html und Tabellen, die einen Quelltext als nicht zu durchschauendes Gewirr aus html-Elementen deren Auszeichnungen für das Aussehen( „Blähcode“) verwandeln.

Es gibt zwar einige Tools mit denen man html und css optimieren und die Größe verringern kann, am besten jedoch ist es das Übel bei der Wurzel zu packen und eine Webseite von Grund auf mit Xhtml und CSS Stylesheets zu erstellen.

Hierbei werden Layout und Inhalt voneinander getrennt. Die .css Datei wird ausgelagert und muss vom Browser somit nur einmal geladen werden um im Cache zu landen und von dort aus für jede weitere Seite des Webs benutzt werden zu können. In der .css Datei stehen alle Informationen darüber wie die Webseite aussehen sollen. Tabellen werden in solchen Layouts nur noch dann benutzt, wenn es sich um taballarische Daten handelt, die dargestellt werden sollen, nicht jedoch um damit Hintergrundbilder oder sonstige Design-Elemente auf dem Bildschirm zu positionieren.

Woran kann ich als Laie erkennen, ob meine Webseite mit Tabellen und html layoutet?

Jede Webseite sollte im Quelltext mit der so genannten Doctype-Deklaration beginnen. Hieraus ist ersichtlich, ob es sich um xhtml oder html handelt.

Willst du mehr wissen? Lies mal hier: http://artikel.fabrice-pascal.de/dtd/

Wenn deine Seite mit Tabellen layoutet, findest du im Quelltext zahlreiche Elemte wie : <table>, <tr> und <td>. Wenn deine Seite CSS verwendet, findest du im <head> deiner Seite einen Link zu einer Datei, die auf .css endet bzw. wenn das .css nicht ausgelagert ist (was nur in einigen Fällen sinnvoll ist) findest du auch .css-Auszeichnungen direkt im <head>. Benutzt deine Seite das Boxmodel um das Layout zu erstellen, findest du im Quellext nur selten eine Tabelle.

—
foto: istockphoto | nijht