0251 / 590 837 15

Bessere Performance dank CSS Sprites

Die Website-Performance ist ein entscheidender Faktor in jeder Conversion-Rate. Mit jeder Website, die die Sekunde länger lädt, nimmt die Conversion-Rate deutlich ab. Außerdem ist die Ladezeit mittlerweile ein Rankingfaktor bei Google.

Eine gute Möglichkeit die Performance zu steigern bieten CSS Sprites. Dabei werden mehrere kleine Bilder zu einem Großen zusammengefasst und per CSS als Hintergrund zugewiesen. Der Vorteil ist hierbei die Anzahl der Requests. Bei 10 kleinen Bilder muss der Browser normalerweise 10 Anfragen an den Server schicken. Mit einem Sprite ist nur noch eine Anfrage erforderlich. Das macht die Website nicht nur schneller, sondern entlastet auch noch den Server.

Aktuelle Performance

Wer die Ladezeit optimiert sollte diese am besten mit einem Tool messen, denn meistens sind die Änderungen nicht wirklich spürbar. Ich benutze hierbei Google Page Speed. Zu Beginn habe ich dort 84 von 100 Punkten erreicht. Schon ganz gut, aber noch ausbaufähig:

CSS Sprites generieren

Für das Generieren von CSS Sprites gibt es bereits viele Tools. Ich habe für meinen Version csssprites.com benutzt. Das ist ein ganz simples Tool, in dem man seine Bilder hochlädt und dann das Sprite-Bild bekommt.

Bei mir kam dort folgendes heraus:

CSS Sprite

CSS Sprite

CSS Sprites einbauen

Der Generator selbst bietet bereits Beispielcode für den Einbau deiner Icons. Er hat dabei das Bild als Hintergrund aller divs und die Position per Inline-CSS gesetzt. Ich habe es so gemacht, dass es eine CSS-Klasse für das Sprite gibt, und jeweils eine pro Icon. So könnte ich die Sprites ändern, ohne alle Stellen herauszusuchen, wo das Icon verwendet wird. Hier ein kleiner Ausschnitt:

.sprite {
	background: url('/i/ratgeber/css/bessere-performance-dank-css-sprites/icons.png');
	display: inline-block;
}
.sprite_contentlion {
	background-position: -0px -0px; width: 16px; height: 16px
}

Das display habe ich auf inline-block gesetzt, dies haben Bilder i.d.R. auch. Evtl. sind nach dem Einbau noch kleine Anpassungen erforderlich. Hier ist der Code, der nun zum Einbau des Icons verwendet werden kann:

<div class="sprite sprite_contentlion">&nbsp;</div>

Auswertung

Das wars auch schon, gar nicht so schwer, oder? Jetzt wollen wir natürlich noch wissen, was es gebracht hat:

3 Punkte sinds geworden. Das klingt zwar nach wenig, aber die Optimierung der Ladezeit hängt von sehr vielen Faktoren ab. Außerdem bewertet Google nur die Performance, die der User bemerkt. Die Entlastung des Servers wird nicht gemessen.

Kommentare

David Stutz schrieb am 19.10.2012:

Warum so spät? mit HTML 5 kommen schon wieder neue Möglichkeiten an den Tag. CCS Sprites verwendet man schon ca seit 3 Jahren oder mehr. Schöner Blogbeitrag Liebe Grüße David Stutz

Stefan Wienströer schrieb am 19.10.2012:

Ich hatte noch keinen Artikel darüber ;-)

Lennart Sauter schrieb am 23.11.2012:

Ich finde den Artikel immer noch sehr zeitgemäß, da es leider haufenweise Systeme im Netz gibt, die HTML 5 noch nicht unterstützen (wollen). Da wäre zum Beispiel die Forensoftware MyBB zu nennen und auch viele populäre Content Management Systeme sind noch nicht auf den HTML 5 Zug aufgesprungen. Bei diesen sind CSS Sprites nach wie vor wirklich sinnvoll.

MMW schrieb am 26.03.2013:

@David Stutz - ich kann Ihren Kommentar in keinster Weise nachvollziehen. In HTML5 gibt es keine "besseren" Möglichkeiten. Und wieso sollte man keine Sprites verwenden? Gerade in der heutigen Zeit, wo mobile Geräte einen sehr hohen Besucheranteil ausmachen, muss die Anzahl der Requests minimiert werden!