Effektives Template mit Sprites
In ein Seitentemplate eingebaute Sprite-Graphiken können zum Teil das zu versendende Datenvolumen senken. Hierdurch werden Kosten gesenkt und Latenzzeiten gesenkt. Aber auch wenn der Website-Traffic steigt, kann die durch Einsparung von HTTP-Requests begründete Steigerung der Usability die Internetseite nachhaltig verbessern.
Gerade bei der Erstellung von Website Templates können sich konsquent und zweckmäßig eingesetzte Sprites positiv auf die Website-Performance auswirken. Templates stellen die Rahmenstruktur einer Homepage dar, die auf allen Einzelseiten – zumindest aber in großen Teilbereichen einer Website – benötigt werden um das grundlegende Layout darzustellen. Elemente, die allerortens durch dieses Basislayout eingebunden werden müssen, sind unter Umständen ideale Kandidaten für eine Sprite-Graphik.
Bereits im Zuge des Webdesigns sollte man sich also Gedanken darüber machen, welche der auf allen Seiten einer Website sichtbaren Bildelemente in einem Sprite untergebracht werden können. Dabei eignen sich insbesondere Bilder in den Formaten GIF und PNG, wobei man bei letzterem nicht ausser Acht lassen sollte, dass einige weit verbreitete Browseranwendungen den korrekten Umgang mit diesem Dateiformat noch nicht beherrschen. Diese Formate zur Speicherung von Rastergrafiken arbeiten mit einer festen Farbpalette, wobei die Anzahl der darstellbaren Farbwerte auf 256 unterschiedliche Farben begrenzt ist.
Die im Template enthaltenen Bilder sind oft auf zahlreiche Graphiken von geringer Auflösung unterteilt und werden von verschiedenen HTML-Elementen im Form einer Hintergrundgraphik oder als normale Bild-Tags eingebunden. Im Seitenlayout werden die Bildschnipsel dann durch die HTML-Dokumentstruktur zusammengesetzt und ergeben das beim Webdesign erdachte Gesamtbild. Nutzen nun zahlreiche Seitenelemente die selben Farbwerte, so bietet sich eine Zusammenfassung dieser Template-Bilder zu einem Sprite an.
Durch die Zusammenstellung einer Sprite-Graphik stellen sich Effekte ein, die zu einer Steigerung der Geschwindigkeit führt mit der eine Website dargestellt wird. Dies ist letzlich die Folge einer Reduktion der HTTP-Anfragen, die benötigt werden, um eine Internetseite samt der in ihr enthaltenen Template-Graphiken vollständig darzustellen. Hierdurch entfällt der jedem einzelnen eingesparten Request geschuldete Overhead bei der Übertragung von Dateien – bei allen Anfragen an den Webserver müssen zusätzliche Daten im Request- und Response-Header verschickt und auch die Synchonisation des Datenverkehrs über das Netzwerk muss geregelt werden.
Auch das zu übertragende Datenvolumen (Website-Traffic) kann nachhaltig gesenkt werden, wodurch die Effizienz der Seitenauslieferung gesteigert wird. Schließlich sind die erstellten Sprite-Graphiken meist kleiner als die Summe der Dateigrößen der zuvor genutzten Einzelgraphiken – erst recht, wenn man die bei getrennten Anfragen verschickten Headerdaten einbezieht. Der Webserver bekommt also nicht nur weniger Anfragen zur Bearbeitung, sondern muss letztlich in vielen Fällen auch weniger Daten an den Webbrowser verschicken – ein schöner Nebeneffekt, da zu übertragender Traffic letzten Endes auch Geld kostet.
Aber selbst wenn die eingesetzten Sprites geringfügig größer sind als die summierten Einzelbilder kann der Vorteil des schnelleren Seitenaufbaus dominieren. Die der schnelleren Auslieferung folgende Steigerung der Nutzbarkeit einer Internetseite kann ein geringfügig höheres Datenvolumen durchaus rechtfertigen. Ein Eingriff in das Seitentemplate ist umso effektiver, da sich diese Effekte auf alle Seitenzugriffe auswirken – hier kann eine kleine und zentrale Änderung große Auswirkungen auf die Usability haben. Gerade wenn ein Besucher die erste Seite eines Internet-Angebots abruft, ist eine zügige Auslieferung ausgesprochen wichtig für die Nutzerzufriedenheit.
Neben der hier angesprochenen Technik kann auch das Einbetten von Bilddaten zu einer Verbesserung der Website-Geschwindigkeit führen. Hierzu verwendet man Base64-kodierte Bildelemente, die entweder direkt mit der HTML-Datei oder aber mittels des genutzten Stylesheets an den Browser ausgeliefert werden. Als Ergebnis winken geringe Latenzzeiten bei der Beantwortung von Seitenanfragen und schneller gerenderte Internetseiten. Auch die beim Nachladen von Template-Bildern auftretenden Special-Effects, bei denen Bildelemente während des Ladevorgangs umherzucken werden vermieden.