HomeKontaktImpressum
Sie sind hier: Home

Elemente zur Navigation mit Sprites

In der Navigation einer Website genutzte Sprite-Graphiken eignen sich hervorragend zur Senkung der Ladezeit von Internetseiten. Dabei fallen weniger Serveranfragen an und auch die zu übertragende Datenmenge lässt sich reduzieren. Sollen nicht allein statische, sondern – etwa per Hover-Effekt implementierte – dynamische Navigationsbuttons eine Seite verschönern, so kann sich das schnell negativ auf die Usability auswirken.

Es gibt viele Internetseiten, deren Navigationselemente mittels graphisch gestalteter Buttons realisiert sind. Hierdurch kann die Homepage visuell aufgewertet werden, wobei teilweise internsiv auf die gesamte Palette der möglichen Bildeffekte zurückgegriffen wird. Unabhängig davon, wie sinnvoll eine solche Gestaltung in einem individuellen Fall sein mag und welche Auswirkungen diese Vorgehensweise auf die Benutzbarkeit einer Internetseite hat, können derartige Gestaltungsmerkmale eine Website gegenüber den Seiten ihrer Mitbewerber hervorheben.

Immer vorausgesetzt, dass die Dateigröße dieser Navigationsgraphiken nicht ausartet, entstehen auch keine Probleme. Allerdings ist das bei weitem nicht die einzige Einschränkung, die sich auf die Usability einer Website auswirken kann. Ein weiteres Problem tritt auf, wenn die Navigationselemente oder genauer gesagt die enthaltenen externen Elemente zu zahlreich werden. Dies führt nämlich dazu, dass beim Öffnen einer Internetseite sehr viele einzelne Dateien abgerufen werden müssen, bevor die Seite vollständig gerendert wird.

Da für jedes externe Element einer Website ein zusätzlicher HTTP-Request an den Webserver gestellt werden muss, kann sich hierüber eine regelrechte Performance-Bremse bilden. Schließlich können moderne Browseranwendungen – mit eingestellten Standardeinstellungen, was bei einem Gros der Internetnutzer der Fall ist – lediglich zwei bis sechs HTTP-Anfragen gleichzeitig an einen Webserver stellen. Die darüber hinaus gehenden Anfragen werden praktisch durch den Browser in eine Warteschlange eingereiht. Erst nach Vollendung einer zuvor eingeleiteten Dateianfrage kann mit der Abarbeitung dieser Warteschlange begonnen werden.

Aufgrund der Tatsache, dass die Navigationsbuttons nicht gerade den gesamten Farbraum abbilden und nur einige wenige Farbwerte enthalten erfolgt die Speicherung von zur Navigation genutzten Buttons meist im GIF-Format, bei dem die Farben mittels einer Farbpalette indexiert sind – alternativ kommt auch das PNG-Format zur Anwendung, das flexibler bei der Angabe von Transparenzen agiert. Derartige Rastergraphiken lassen sich aber leicht in Sprite-Graphiken zusammenfassen, was sich auf die Anzahl der Serveranfragen und meist auch auf die zu übertragende Datenmenge auswirkt. Durch Einsatz dieser Technik verringert sich die Zahl der Anfragen an den Webserver – was die Latenzzeit verringert und dazu führt, dass die Internetseite schneller durch den Browser des Seitenbesuchers gerendert werden kann. Auch die anfallenden Traffic-Kosten werden in den meisten Fällen reduziert, da die enstandenen Sprites normalerweise kleiner ausfallen als die getrennt abgelegten Rastergraphiken.

Aber auch wenn nur wenige Navigationselemente in Form von Buttons in die Internetseite eingebunden werden kann es zu einer Verlangsamung der Website-Performance kommen. Gibt es etwa für unterschiedliche Szenarien auch verschiedene Navigationselemente – beispielsweise je Menupunkt ein zusätzliches Navigationsbild für den Hover-Effekt (wenn sich die Maus über dem Bild befindet) und eines für den Fall, dass die Seite aktuell angezeigt wird –, so verdreifacht sich die Anzahl der nachzuladenen Navigationsbilder. Bei zehn Punkten in der Navigation ergibt das bereits dreissig Einzelbilder, die ersteinmal nachgeladen werden wollen.

Seite 1 von 2 | « [1] • [2] »






  
© 2009-2017 Möglichkeiten zur Steigerung von Geschwindigkeit und Usability Ihrer eigenen Website