12. Okt. 2011 (13:20)

Weniger Fragen - mehr Antworten

media-singleserver-profile media-multiserver-profile Packetumlaufzeiten (Round Trip Time, RTT) - also schlicht: wie lange sich die Anfragen (der Browsers) und Antworten  (des Servers) auf dem "Postweg" befinden spielen bei der Geschwindigkeit des Seitenaufbaus (Ladezeit) eine große Rolle. So können - ganz unabhängig von der Bandbreite durchaus gut hundert Millisekunden vergehen bis das erste Byte der Antwort eindrudelt. Daher ist es sinnvoll eine große (CSS- oder Javascript-) Datei statt vieler kleiner Dateien auszuliefern (Siehe: Virtuelle Javascript Datei).

media-datauri-page Aber wie sieht es mit Bildern aus? Eine Webseite besteht meist aus mehreren Dutzend Grafiken wie Logos, Icons und Buttons. Die meisten dieser Bilder sind kleine Dateien. Eine Möglichkeit aus diesen vielen kleinen Dateien eine Große zu machen sind CSS-Sprites . Dabei ist der Sprite ein großes Bild, das alle Bilder (die für das Design gebraucht werden) enthält. Somit kann der Browser "alle" Bilder mit einem einzigen Request abholen. Soweit so gut, die Sache hat allerdings den Nachteil, dass bei jeder Änderung einer Grafik das Sprite neu erstellt werden muss. Das ist aufwendig und häufig Handarbeit.

media-datauri-profile Eine andere Möglichkeit ist es die Bilder nicht sparat sondern als Data-URL direkt mit dem CSS auszugeben. Das hat den Vorteil. dass der Browser gar keine Bilder mehr vom Server abholen muss. Ebenso müssen keine Sprites mehr erstellt werden. Bei Verwendung des Wombat-Frameworks zum Ausliefern der CSS-Dateien werden die Bilder-URLs bei Bedarf automatisch in Data-URLs umgewandelt und somit entsteht auch kein Aufwand für die Pflege der CSS-Datei wenn sich eine Grafik geändert hat. Ein weiterer Vorteil ist, dass dadurch auch die CSS-Dateien (für den Programmierer) lesbar bleiben.

Somit wird die Frage des Browsers nach der CSS-Datei vom Server sowohl mit den CSS-Anweisungen als auch mit den Bilder-Daten beantwortet und der Browser kann sich die Frage nach dem Bildern sparen.

P.S. Bei all dieser Lobhudelei auf Data-URLs soll nicht verschwiegen werden, dass es auch (alte) Browser gibt ( Internet Explrer 6 und 7 ) die dieses Feature nicht unterstützen - ein Problem, dass sich mit einer Browserweiche umgehen lässt.

gERD Schaufelberger

zur Liste


Aktuelle Artikel