Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Kürzere Ladezeiten durch CSS-Sprites

Kürzere Ladezeiten durch CSS-Sprites

Heute schrauben wir an der Performance: CSS-Sprite sind vor allem durch Hover-Effekte bekannt geworden, helfen aber auch dabei, die Anzahl an HTTP-Request zu verringern. Tobias Otte zeigt, wie es geht.

Sprites sind eine CSS-Technik die bislang eher für Hovereffekte, in den letzten Jahren aber mehr und mehr zur Verkürzung der Ladezeiten einer Website genutzt werden. Sie reduzieren die Anzahl der benötigen HTTP-Requests, was wiederum der Performance der Seite zugute kommt. Anstelle von vielen verschiedenen Grafiken, die einzeln auf einer Seite eingebunden werden, kombiniert der Entwickler möglichst viele in einer Datei. Diese wird dann mit der CSS-Eigenschaft background-position an die gewünschte Position »verschoben«.

Zwei Beispiele

CSS-Sprite von Facebook
CSS-Sprite von Facebook
CSS-Sprite von Google
CSS-Sprite von Google

Warum verbessert das die Performance?

Nun, der Flaschenhals der Ladezeiten ist, dank der fast flächendeckenden Verbreitung von DSL-Anschlüssen, über die letzten Jahre weg von der Übertragungsgeschwindigkeit hin zu der Anzahl an HTTP-Requests gewechselt. Der Grund hierfür ist, dass bei jedem Request wertvolle Zeit für das Senden von Metadaten und die Latenzzeiten der Webserver verloren geht. Wenn wir nun die Gesamtanzahl der Request verringern, wobei die Grafiken meist einen Großteil davon ausmachen, verbessert sich auch die Performance.

Wie baue ich mein Sprite auf?

Natürlich ist es, gerade bei größeren Projekten, unsinnig alle verwendete Grafiken in eine Datei zusammen zufügen. Es gibt verschiedene Faktoren, welche Grafik überhaupt und in welcher Art von Sprite gesetzt werden sollte.

Wichtig ist, dass man sich darüber im Klaren ist, dass diese Grafiken auf allen Seiten geladen werden. Muss ein Icon, das auf einer Seite vorkommt, die nur von 2% aller Besucher ausgerufen wird, auch von den restlichen 98% geladen werden oder kann diese Seite einen zusätzlichen Request vertragen? Auch die Methode der Einbindung sollte beachtet werden. Wenn die Dimensionen des Elements, welches das Sprite in den Hintergrund erhalten soll, in Breite und Höhe begrenzt sind, können die einzelnen Grafiken neben und untereinander positioniert werden. Soll allerdings beispielsweise ein Icon an der linken, oberen Ecke einer Box erscheinen, muss das Sprite entsprechend Weißraum in horizontaler und vertikaler Richtung aufweisen. Ein rein vertikales oder horizontales Sprite ist in diesem Fall wohl der beste Weg. Hierbei ist auch noch die mögliche Änderung der Dimensionen zu beachten, bei flexiblen Layouts oder bei Schriftvergrößerung können sich Breiten und Höhenangaben auch nach dem Rendern einer Seite noch ändern.

Ausgehend von dem Ziel, eine möglichst kleine Datei zu erzeugen, empfiehlt sich außerdem die Sortierung nach Farben. Denn hier lässt sich die Dateigröße noch ein bisschen mehr reduzieren. Bei der Verwendung von PNG-8 oder GIF ist die Anzahl der unterschiedlichen Farben auf 256 beschränkt. Sobald die Anzahl unter den Maximalwert sinkt, verringert sich auch die Dateigröße. So ist es möglich, durch geschicktes Zusammenfügen ein Sprite ohne sichtbare Farbunterschiede auf fünfzig bis hundert Farben reduzieren.

Kommentare

Webstandard-Team
am 15.12.2009 - 09:19

Nicht zuletzt aufgrund der Ankündigung von Google die Ladezeit zu einem Ranking-Faktoren werden zu lassen, wird dieser hier beschrieben Ansatz mehr in den Fokus gerückt.

Permanenter Link

Der Caspers
am 15.12.2009 - 09:49

Noch zwei kleine Tricks, um ein kleines bisschen mehr an Performance rauszuholen:
Zum einen, auch und gerade wenn man die Grafiken nach Farben zusammenfasst, kann man noch ein paar Bytes einsparen, wenn man in Photoshop ein bisschen mit dem Tontrennungs-Schieberegler rumspielt und die verwendeten Farben damit noch weiter reduziert bzw. ähnliche vereinheitlicht.
Dann die Hintergrundbilder für anständige Browser per data-URI direkt ins CSS einbinden, spart nochmal einen Request. Ok, für einen gewissen marktführenden Browser muss man das Bild noch mal auf herkömmliche Art referenzieren, aber da die meisten modernen Seiten eh eine iehacks.css haben kann man dass dann quasi als IE-Strafsteuer dort erledigen.

Permanenter Link
Christian Heilmann

Christian Heilmann (Webkraut)
am 15.12.2009 - 10:19

Und wenn man faul ist kann man sprites mit http://spriteme.org/ und dem http://spritegen.website-performance.org/ auch automatisch erstellen - aus Bildern und das CSS wird einem erstellt.

Permanenter Link

domingos
am 15.12.2009 - 18:55

Meines Wissens nach ist die Ladezeit schon lange ein Ranking-FAktor bei Google. Es soll einige Unternehmen geben, die ihre Server in die Nähe von Google-Rechenzentren bauen, um noch ein paar Milisekunden herauszuholen. Meine Quelle ist Professor Eduard Heindls Vorlesung zu Online-Marketing, die kann, wer will, als MP3 herunterladen.

Permanenter Link

David Hellmann
am 15.12.2009 - 21:54

Finde das nicht so OK das Google das mit einbezieht. Das heisst ja im Grunde das der, der mehr Geld für gute Server ausgibt besser gerankt wird als der, der das Geld nicht hat. Sollte nicht der Content entscheiden über den Rank bei einer Suchmaschine?

OK, man müsste wissen welche Gewichtung das ganze hat.

Permanenter Link

Marcel
am 15.12.2009 - 22:01

@domingos:

Matt Cutts hat letztens in einem Interview gesagt das die Ladezeit bald ein Rankingfaktor sein wird. Ob dem wirklich so ist oder ob dieses schon länger als Rankingfaktor zählt weiß ich natürlich nicht.

Das Youtube-Video mit dem Interview

Gru0
Marcel

Permanenter Link

Dieter
am 18.12.2009 - 07:08

Es ist schon erstaunlich, welche Geschwindigkeitsvorteile CSS-Sprites gerade beim Einsatz vieler kleiner Grafiken wie Icons bringen können.

Ich setze auf meiner neuesten Website Webseiten-Infos.de diese Technik zusammen mit dem Zusammenfassen von CSS- und JavaScript-Dateien ein und konnte die Anzahl der HTTP-Requests um über die Hälfte reduzieren. Die Seiten sind spürbar schneller da. :-)

Weitere hilfreiche Generatoren für CSS-Sprites gibt es beispielsweise unter www.csssprites.com und css-sprit.es (siehe auch meinen Beitrag "CSS-Sprites mit Generator erstellen").

Permanenter Link

Die Kommentare sind geschlossen.