CSS Sprites

Im Internet hört man immer öfter, dass die Ladegeschwindigkeit einer Webseite mit in das Ranking der Suchmaschinen (genauer gesagt: Google) einfließen soll. Neben den Möglichkeiten der serverseitigen Script-Optimierung, kann man auch auf der Client-Seite die Ladegeschwindigkeit unter Umständen stark erhöhen.

Die Geschwindigkeit mit der eine Seite geladen wird, hängt von der Menge der Daten ab und viele HTTP-Anfragen an den Server geschickt müssen. Hier liegt bei vielen Webseiten noch viel Optimierungspotenzial vor. An dieser Stelle möchte ich auf die Zahl der HTTP-Anfragen eingehen, denn hier lautet ein einfaches Prinzip: Weniger ist schneller.

Die Anzahl der HTTP-Anfragen setzt sich aus allen Elementen, die in die Webseite eingebunden werden, zusammen. So muss für jedes Bild, welches geladen werden soll, ein HTTP-Request an den Server geschickt werden. Hierbei ist ist zu beachten, dass der Client (Browser) pro Domain nur eine begrenzte Anzahl an parallelen HTTP-Request an den Server schicken kann. Liegt die Anzahl der gleichzeitig zu ladenden Bilder höher, als die maximale Anzahl an Request, verlangsamt sich die Seite. Und je größer der Unterschied ist, desto länger wird dieses Dauern.

Bei vielen Bildern kann man diese Anzahl der HTTP-Requests dramatisch senken, nämlich auf genau eine Anfrage. Die Technik hierfür nennt man CSS-Sprites. Ein CSS-Sprites ist ein Bild, welches viele Grafiken enthält. So wird dann nur noch einmalig das CSS-Sprite geladen und dann mittels CSS der entsprechende Teil der Grafik ausgegeben. Diese Technik habe ich auf meiner Webseite Flaggen zum Einsatz gebracht.

Die Ausgangssituation war folgende:
Es wurden mehr 220 Bilder für die Flaggen geladen. Dieser Vorgang dauerte insgesamt rund 4 bis 5 Sekunden.

Dann wurden alle 220 Flaggen in ein Bild gepackt. Dieses Flaggenbild sieht dann wie folgt aus: http://static.die-erde.com/images/flaggen.png. Um jetzt die einzelnen Flaggen korrekt anzuzeigen, muss das Bild mittels CSS verschoben werden und das Element, in dem die Flagge angezeigt werden soll, erhält eine feste Größe. Der HTML- und CSS-Code sieht wie folgt aus:

  1. <span class="flag flagSize deutschland">Deutschland</span>
  2. <span class="flag flagSize2 sanmarino">San Marino</span>
  1. .flag {
  2.    background:url("/images/flaggen.png") no-repeat;
  3.    display:block;
  4.    overflow:hidden;
  5.    text-indent:-1000px;
  6. }
  7. .flagSize {
  8.    height:30px;
  9.    width:60px;
  10. }
  11. .flagSize2 {
  12.    height:40px;
  13.    width:60px;
  14. }
  15.  
  16. .deutschland {
  17.    background-position:-305px -403px;
  18. }
  19. .sanmarino {
  20.    background-position:-305px -496px;
  21. }

Die CSS-Klassen .flag und .flagSize bestimmen die Grundeigenschaften für die Darstellung der Flaggen. Der entscheidende Part für das CSS Sprite ist die Klasse .deutschland. Sie bestimmt, welcher Teil des CSS Sprites dargestellt werden soll. Im Falle der Deutschland-Flagge wird das Bild um 305 Pixel nach Links und 403 Pixel nach Oben verschoben. Dadurch rutscht der Teil mit der Deutschland-Flagge in den sichtbaren Bereich des HTML-Elementes. Dadurch, dass kein img-Tag mehr verwendet wird, habe ich das HMTL-Element so gestaltet, dass man das Land dazwischen schreiben kann, dieses aber nicht angezeigt wird. Dies wird durch das text-indent erreicht.

Man kann beim CSS Sprite auch nur mit einer CSS-Klasse arbeiten. Das reicht in den meisten Fällen völlig aus. Bei den Flaggen wurde dies nur nicht gemacht, weil zu viele Eigenschaften der Flaggen auch auf andere Flaggen zutreffen und sich eben nur ganz wenige Dinge unterscheiden werden.

Durch das konsequente Anwenden der CSS Sprites, wurde die Anzahl der HTTP-Request auf genau ein Request reduziert. Dadurch beträgt die Ladenzeit nur noch etwa 1 Sekunde. CSS Sprites sind vor allem dann sinnvoll, wenn es um Grafiken für die Gestaltungselemente der Webseite geht. Bei dynamischen Inhalten, machen sie weniger Sinn, denn da müssten die CSS Sprites "on-the-fly" generiert werden und das kostet dann wieder Serverzeit.