Apr
24
2012

CSS Sprites und Ladezeitoptimierung #2

Ich hatte heute bereits über meine Bemühungen zur Optimierung der Ladezeit des Blogs berichtet. Dabei hielt ich mich eng an die Vorschläge von GTmetrix.com. Einer der Punkte, die ich übersprungen hatte, waren die CSS Sprites. Zwar hatte ich früher schon mal davon gelesen, allerdings fast alles wieder vergessen.

Was sind CSS Sprites?

Das Prinzip der CSS Sprites ist ein einfaches. Um nicht jedes der kleinen Icons, aus denen eine Seite besteht und die ihr erst ein ordentliches Aussehen verleihen, einzeln laden zu müssen, fasst man sie zusammen. Man fügt alle dieser kleinen Bilder zu einem großen File zusammen – natürlich ohne Überschneidungen zu haben. Mit der CSS-Eigenschaft background-position kann man dann das gemeinsame Bild stets an die korrekte Stelle rücken und es wird jeweils nur der gewünschte Ausschnitt angezeigt. Aus

background-image: url(images/ico_twitter.png);

wird dann

background-image: url(images/sprite.png);
background-position: -10px; -10px;

Der Vorteil ist, wie erwähnt, dass nur mehr ein großes Bild anstatt vieler kleiner geladen werden muss. Es fallen also entsprechend viele HTTP-Anfragen weg und die Ladezeit der Website verringert sich, da die Dateigröße im groben gleich bleibt. Ich konnte so aus 17 einzelnen Icons ein großes png-File machen. Doch dazu später mehr.

Wie mache ich CSS Sprites für meine Website?

Zuerst hatte ich die Befürchtung, dass viel Arbeit auf mich zukommen würde. Doch das muss nicht sein. Eine kurze Suche bei Google brachte mich zu einer (englischsprachigen) Anleitung von CSS-Tricks.com zu den CSS Sprites. Die sehr gut geschriebe Anleitung erklärt nochmal den Begriff und begründet die Verwendung mit einem Beispiel. Äußerst nützlich ist aber der Hinweis zu SpriteMe. SpriteMe generiert auf Wunsch aus einer Auswahl an Hintergrundbildern ein Sprite – es müssen dann nur noch die, auch vorgeschlagenen, CSS-Befehle übernommen werden. Außerdem werden automatisch einige Bilder hierfür vorgeschlagen und eventuell Gründe genannt, warum nicht alle kompatibel sind (z.B. ist bei allen das selbe Dateiformat notwendig).

Wenn ihr interessiert seid, schaut euch einfach mal die Anleitung an. Ganz unten werden auch prominente Webseiten genannt, die auch CSS-Sprites verwenden. Mein einziges Manko ist, dass die Bilder mit SpriteMe nicht besonders platzsparend angeordnet werden – hierfür wäre wahrscheinlich manuelle Arbeit notwendig. Die zusätzlichen 10 Kilobyte fallen aber nicht so sehr ins Gewicht.

Links seht ihr das neue CSS Sprite von Retracked, das rechte habe ich aus dem Quelltext von Facebook gefischt.

Was bringen CSS Sprites?

Hier nochmal der Vorher-Nachher-Vergleich mit den Optimierungen aus dem letzten Artikel:

Mit dem von SpriteMe generierten Sprite habe ich den Test wiederholt und folgendes Ergebnis bekommen:

Neben den deutlich erhöhten Wertungen von 84%/89% auf 96%/93% ist vor allem die Ladezeit beachtlich. Ich bin mir nicht ganz sicher, ob ein Teil durch hohe Serverlast am Nachmittag verfälscht wurde, aber nichtdestotrotz ist eine Verringerung von 2,5 Sekunden auf 0,8 Sekunden beachtlich. Grund dafür ist die um 16 gesunkene Anzahl von Verbindungen: aus 17 Bildern wurde eines. Vor den heutigen Verbesserungen lag die Ladezeit gar bei knapp 5 Sekunden. Die Erhöhung der Seitengröße um 10 Kilobyte liegt, wie erwähnt, an der etwas ineffizienten Anordnung der Bilder im Sprite und könnte mit einigem Mehraufwand vermieden werden.

Fazit

Ich bin sehr erstaunt welchen Geschwindigkeitsgewinn CSS Sprites bringen und kann mir gut vorstellen, dass die Seite jetzt vor allem auf mobilen Geräten besser läuft. Denn dort gibt es relativ oft Verbindungsabbrüche und ein schneller Ladevorgang ist umso mehr von Vorteil. Google wird sich für die Ladezeit der Bilder weniger interessieren, der Crawler ignoriert diese bekanntlich. Allerdings weiß ich nicht, ob die Ladezeit der Website gesondert gemessen wird.

Habt auch CSS Sprites in Verwendung? Oder konnte ich euch motivieren sie mal auszuprobieren? ;)

Ähnliche Artikel

Über den Autor:

Als technikbegeisterter Physikstudent befasse ich mich gerne in meiner (teilweise spärlichen) Freizeit mit den neuesten Technik und IT Trends. Ich möchte auf meinem Blog Retracked.net einige meiner Recherchen oder einfach nur Themen, die ich spannend finde, mit euch teilen.

2 Kommentare + Kommentar hinzufügen

  • Hi Andreas,

    das mit den CSS Sprites ist immer so eine Sache. Das funktioniert bei modernen Layouts die CSS zum anzeigen und positionieren von Bildern im Theme verwenden sicherlich problemlos. Wenn dem aber mal nicht so ist, muss man doch recht viel haendisch im Markup rumfuddeln. Nicht immer ganz einfach wenn das Design nicht von einem selbst ist und man sich erstmal zurecht finden muss.

    Dennoch gebe ich Dir recht das CSS Sprites natuerlich eine klasse Lösung sind um die Ladezeiten noch weiter zu druecken. Wusstest du das die Sprite Technik schon uralt ist? Wird schon seit ewigen Zeiten verwendet, nicht erst seit dem es CSS gibt ;) http://de.wikipedia.org/wiki/Sprite_%28Computergrafik%29

    Gruss,
    Sascha

    • Hallo Sascha,

      bis auf ein paar Kleinigkeiten, die ich noch beheben muss, scheint dass CSS Sprite bisher recht gut zu funktionieren. “Mein” Design hab ich schon mehrfach bearbeitet und finde mich deshalb recht gut zurecht, obwohl ich es nicht selbst erstellt habe. Die Wartung wird aber deutlich erschwert, da muss ich dir Recht geben.

      Im Artikel von css-tricks.com wird kurz erwähnt, dass auch in Computerspielen schon die selbe Technik verwendet wurde. Jetzt erinnere ich mich auch wieder an die vielen komischen Texturbilder in den Installtionsordnern älterer Spiele. Dort waren auch oft mehrere Varianten einer Textur zusammengebastelt. Kennst du sicher auch noch? ;)

      Lg
      Andi

Kommentiere diesen Artikel

Für regelmäßige Kommentatoren gibt es ab dem 3. Kommentar doFollow-Links. Aber verwendet keine Keywords im Namen, sonst werden sie entfernt.