Laden von Webseiten mit CSS Sprites beschleunigen

comment 1
CSS

In den Zeiten des Web 2.0 schauen die meisten Leute mehr und mehr ausschließlich auf das Aussehen einer Webseite. Ganz egal, wie viele Javascript-Bibliotheken man einbindet, hauptsache, alles sieht schön nach Web 2.0 aus.
Wer die Ladezeiten seiner Seite verkürzen möchte hat zwei Möglichkeiten:

  1. Dateien/Grafiken verkleinern
  2. Anzahl der http requests verringern

Um das zu verstehen erst mal etwas Theorie.
Gibt man eine Url in die Adresszeile seines Browser ein – den ganzen DNS Lookup Kram lasse ich mal weg – wird die entsprechende HTML-, PHP-, (oder anderes Format) -Datei geladen. Die ganzen zusätzlichen Dateien, CSS, JS/AJAX-Bibliotheken, Grafiken… die werden alle danach vom Browser angefordert.
Je mehr Dateien, umso häufiger muss der Weg zum Server zurückgelegt werden. Packt man die verschiedenen CSS-Dateien in eine einzige, das ganze JavaScript-Zeug in eine .js beschleunigt man den Seitenaufbau, obwohl sich an der Gesamtgröße der Seite nichts geändert hat.
Das kann man sich zum Beispiel als mehrere LKW vorstellen (ich weiß, bescheuertes Beispiel). Für jede Datei, egal wie klein die ist, muss ein LKW vom Browser zum Server und zurück fahren, um diese abzuliefern. Auch, wenn die Gesamtgröße der Seite gering ist, bei 3 CSS-Dateien, 5 JavaScript-Bibliotheken und 20 Bildern merkt man den Unterschied deutlich.
Auch, wenn die Bits und Bytes mit Maximum 2/3 der Lichtgeschwindigkeit durch die Leitungen zum Server und zurück fliegen, können in der Summe enorme Zeiten entstehen. (Enorm ist vielleicht ein zu großes Wort dafür)

Was kann man dagegen tun?
Man kann alle CSS-Dateien ganz einfach in eine einzelne kopieren (Plugins bei CMS und Blogsoftware bringen leider oft ihre eigenen Dateien mit), mit Bildern geht das genau so. CSS-Sprites ist das Stichwort, das vielen sicher schon mal begegnet sein wird.
Die Idee ist ganz einfach: da man in CSS nicht einfach nur Bilder einbinden, sondern auch die angezeigte Position bzw. den Ausschnitt des Bildes definieren kann, ist es möglich, mehrere Grafiken zusammen zu fassen.
Dabei muss man genau überlegen, bei welchen Grafiken das Sinn macht und bei welchen nicht. Grafiken, die möglicherweise öfters geändert werden, nur eine kurze Zeit angezeigt werden sollen oder nur auf selten aufgerufenen Unterseiten zu sehen sind, sollte man davon ausschließen.
Ein gutes Anwendungsbeispiel sind die beliebten Smiley Erweiterungen für Blogsoftware. 20 kleine Smiley-Icons sind 20 http Verbindungen, obwohl man, ohne die Dateigröße signifikant zu vergrößern, die Verbindungsanzahl auf eine einzelne reduzieren könnte.

Wie funktioniert das jetzt mit diesen CSS-Sprites?
Nehmen wir beispielsweise an, wir hätten in unserer Blog Sidebar mehrere Icons, die sind immer da, die werden auf jeder einzelnen Seite angezeigt. (Da ich weder Sidebar, noch Icons habe, muss ein künstliches Beispiel her)
Sei meine Sidebar also vollgestopft mit den schönen Circular Icons von Mimbo Pro:

Das hier markiere z.B. meine Lieblingslinks:
Heart Yellow
dieses meine Mail-Adresse
@
dieses sind die Bullets in meinen Listen in der Sidebar
Bullet
und dieses meinen RSS-Feed
Bullet

4 Grafiken, 4 http Requests, 2,81kB

Die Lösung:
4 Grafiken mit einer Abmessung von je 16*16 Pixeln? Also erstelle ich ein 32*32 großes Bild und füge die einzelnen Dateien ein. Ich habe die jetzt mal wieder im Ausgangsformat, also png, abgespeichert, als Gif würde ich sogar noch was sparen.
Und jetzt?

4icons

1 Grafik, 1 http request, 1,54KB
(Als Gif. aber auch als PNG waren es nur 1,84KB)

Das Einbinden geht denkbar einfach vonstatten.

dl{float:left; padding:10px 0 10px 16px}
dd{padding:0 0 10px 20px}
dt {background:url(4icons.gif) no-repeat;
padding: 0 0 0 20px;
display:block}
dt.mail {background-position: 0 0 }
dt.rss {background-position: 0 -16px}

Das passende HTML dazu sieht so aus:

<dl>
 <dt class="mail">
  <span>Mail-Adresse</span>
   <dd/gt;kjhkjhdskjs<br />
   jhasjashkasjhsak
   </dd>
 </dt>
 <dt class="rss"><span>RSS-Feed abonnieren</span>
 </dt>
</dl>

So sieht das dann im Browser aus: (Die Icons sind links abgeschnitten, das ist aber in der Grafik)
Sprites im Browser
Damit kann man bei mehreren Grafiken die Ladezeiten um einiges beschleunigen.
Oft wird die Technik auch benutzt, um Hover-Effekte darzustellen. Dazu erzeugt man einfach eine Grafik, die den normalen- und den Hoverstatus eines Buttons o.ä. beinhaltet.
Dann weist man dem Link die Grafik zu – wie oben gezeigt – und dem Hover-Zustand des Links die selbe Grafik mit einer Positionsangabe, so dass das zweite Bild in der Grafik angezeigt wird.

Wem das alles zu viel Arbeit ist, der kann den CSS Sprite Generator nutzen, um sich aus einzelnen Grafiken automatisch Sprites erzeugen zu lassen.

Mehr Infos:
CSS-Tricks: CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
bueltge.de CSS Sprites einfach erklärt
A List Apart CSS Sprites: Image Slicing’s Kiss of Death (Plus kleine Geschichtsstunde zur Herkunft der Sprites aus den Zeiten der ersten Videospiele)

1 Comment

  1. Das klingt ja echt vielversprechend. Besonders die Größe des Einzelbildes ist ja erstaunlicherweise kleiner als alle 4 zusammen.
    Hoffe mal das funktioniert auch mit JS Dateien so gut. Bei mir müsst ich diese noch etwas optimieren ;)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>