Webseiten optimieren mit CSS Sprites - einige Erfahrungen

In den letzten Monaten ist die Frontend-Optimierung von Webseiten in Mode geraten. Der Hintergrund ist ganz einfach: im Regelfall entstehen 2/3 der Ladezeit einer Seite nicht bei der Generierung auf dem Server, sondern während der Browser die Daten lädt und rendert. Und da schnellere Seiten = zufriedenere Kunden, lohnt es sich hier auch hier mal zu graben und nicht in den Untiefen der Serverkonfiguration. Zum Thema Frontend-Optimierung gibt es Bücher, hilfreiche Software von Yahoo! und Google oder auch die Dr. Web Quellensammlung.

Wir haben uns dran gemacht nach und nach alle Empfehlungen aus diesen Büchern umzusetzen, und erreichen zumindest auf Hitmeister generell zumindest gute Ergebnisse. Unsere Ladezeiten auf dem Server sind auch mit 600-700ms ganz ok, da wäre es vergleichsweise teuer noch viel herauszuholen.

Als eine der letzten Baustellen war das Thema CSS Sprites dran (Beispiel siehe rechts). Eigentlich recht einfach. Man fasst möglichst viele kleine Grafiken in einer Grafik zusammen und spielt mit dem Browser, dass er trotzdem nur an den Stellen anzeigt, wo sie hinsollen. Die Vorteile: viel weniger HTTP-Abfragen. Anstatt jedes Bild einzeln zu holen, braucht der Browser nur einmal mit dem Server sprechen. Gerade bei kleinen Icons ist der HTTP Overhead hoch. Zudem ist die Summe der Bilder oft größer, als wenn man die eines packt, wegen dem Dateikopf usw. Aber das fällt nicht so ins Gewicht. Interessant ist wirklich die Anzahl der Abfragen. Das macht die Seite schneller, insbesondere bei neuen Besuchern, die keinen “warmen” Cache haben. Wir haben übrigens bei der Einführung von CSS Sprites einen merklichen Rückgang in der Anzahl der Abfragen auf unseren Bilderservern feststellen können. Die Auswirkung auf die Ladezeit hängt stark von der Internetverbindung der Kunden ab. Aber mit dem Beispiel rechts ist die Anzahl der Anfragen pro Artikelseite auf Hitmeister um ca. 15% gesunken.

Noch ein Beispiel:

Bei der Implementierung der Sprites haben wir einige Erfahrungen gemacht:

• Die Ausrede “naja das Bild wird einmal geladen dann ist es im Cache” gilt nicht. Insbesondere für Neukunden soll die Seite schnell sein.
• Es gibt Grafiken bei denen Sprites schwierig sind (Verläufe usw.). Erstmal weglassen, 80/20 Regel. Bewertungicons usw. sind quick wins.
• Man sollte nicht versuchen alle Grafiken auf der Seite in eine Datei zu quetschen. Lieber ein paar getrennte Dateien machen, z.B. eine Pro Seitentyp und eine für Header/Footer. Das erhöht die Übersichtlichkeit und Wartbartkeit.
• Unbedingt die Sprites ausgebig in verschiedenen Browser/Auflösungskombinationen testen. Insbesondere mit dem IE6 gibt es hier einige Probleme. Wir hatten regelmäßg zerhackte Seiten während der Tests. Oft hilft möglichst einfaches HTML (Manchmal auch Tabellen statt DIVs, für die alten Browser) weiter. Zudem ist es gar nicht schlecht einen einfachen ein/aus Knopf für die Sprites zu haben, wenn doch was schief geht.
• Man sollte die Icons horizontal kacheln. Spart Speicherplatz im Bild (entgegen unserem Beispiel oben). Mit so großen Flächen haben wir schlechte Erfahrungen gemacht. Lieber Streifen.
• Wenn man zuviele Bunte Sprites in eine Datei steckt, wird die Farbpalette (und damit die Datei) größer. Dann lieber nach Farben trennen und z.B. keine Photos mit reinnehmen.

Insgesamt sind geschickt eingesetzte CSS Sprites ein ziemlich dankbarer Weg, um nochmal einige hundert Millisekunden Ladezeit bei einer Seite wegzubekommen. Der einzige Nachteil ist, dass die Erstellung und Wartung der Seite etwas mehr Zeit in Anspruch nimmt, da die Sprite-Datei erstellt und gepflegt werden muss. Aber bei high-traffic Seiten lohnt sich das bestimmt.

This entry was posted on Montag, Juni 22nd, 2009 at 10:04 am and is filed under Neue Technologien. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.