Mehr Spritzigkeit mit CSS Sprites?

Mittlerweile ermittelt Page Speed für meinen Blog eine Punktzahl von 86 bis 88. Ich habe mich immer wieder ein wenig mit Webseitenoptimierung befasst. Momentan finde ich diesen Wert schon recht ordentlich, wenn auch noch immer nicht optimal.

Gewurmt hat mich das rote Dreieck bei “CSS Sprites kombinieren”. Dadurch wird angeprangert, dass das Laden der einzelnen http-requests zu den Grafikdateien viel Zeit beim Laden der Seite vergeudet.

Ich hatte mich zwar vor einiger Zeit bereits oberflächlich mit dieser Thematik beschäftigt, aber anfangs erschloss es sich mir noch nicht richtig, wie einzelne Bilder zu einem einzigen Bild (Sprite) zusammengefasst werden sollen, um daraus heraus geladen zu werden. Und vor allem … wie soll dieses dann in der style.css meines Themes umgesetzt werden?

Aber irgendwie ließ mir das dann doch keine Ruhe Und so habe ich mich intensiver auf etlichen Internetseiten umgeschaut und nach und nach fiel der Euro dann auch centweise.
Was ich schon mal gut finde ist, dass diverse kostenlose Tools angeboten werden, um aus Grafiken ein Sprite zu bilden.

Anmerkung: Ich bin ein Fan von Webmaster-Tools, die einem Seitenbetreiber das Leben erheblich erleichtern können, wie bereits an meinen CSS-Buttons und  der Seitennavigation hier auf diesem Blog ausgiebig genutzt. Diese Tools machen mir so viel Spaß, dass ich mittlerweile auch den Grafik-Sende-Button unter dem Kommentarfeld in einen CSS-Button geändert habe. :-)

Drei Tools zum Erstellen von CSS-Sprites habe ich ausfindig gemacht:

1. CSS Sprite Generator auf spritegen.website-performance.org
2. CSS Sprite Generator auf csssprites.com und
3. SpriteMe, auf den bei code.google.com verwiesen wird, wenn ich auf den Link Bilder in CSS-Sprites kombinieren in PageSpeed klicke.

Das SpriteMe-Tool unter Punkt 3 gefiel mir deswegen so gut, weil ich damit sämtliche Grafiken in einem Rutsch als Sprite generieren konnte und daher habe ich es erst einmal mit diesem angetestet. Ja genau, ich weiß schon was nun Insidern durch den Kopf schießt: das war natürlich nicht optimal und nach Umsetzung aller Codes sah mein Blog auch etwas chaotisch aus. :-) Ich musste feststellen, dass nicht alle Grafiken geeignet sind, um sie mit diesem Tool in einem Sprite und letztendlich per Änderung in der style.css anzeigen zu lassen.

Verfahrensweise von SpriteMe

Nach Öffnen der SpriteMe-Seite habe ich den Link erst einmal in die Favoriten-Leiste meines Browsers gezogen.

Anschließend habe ich meine Testblog-Seite geöffnet und auf den SpriteMe-Tab geklickt. Dabei werden mir einige Vorschläge unterbreitet, welche Grafiken als Sprite zusammengefasst werden können.

Entweder ich verwende die dargebotenen Vorschläge, ziehe per Maus einzelne Grafiken heraus oder füge welche hinzu, die im oberen Bereich der Auflistung nicht aufgeführt sind.

Als weitere Alternative wird in dem Fenster angeboten, ein völlig neues Sprite anzulegen.

Wenn ich nun auf “make sprite” klicke, werden die ausgewählten Grafiken in einem Sprite zusammengefasst und ein neuer Link erscheint.

Fahre ich über diesen Link, erscheint ein neues Fenster mit den zusammengefassten Grafiken und ich kann diese nun abspeichern.

Zusätzlich exportiere ich die CSS-Datei und es erscheinen die dazugehörigen Grafik-Codes. Darin werden sowohl die ursprünglichen (durchgestrichen) als auch die zu ändernden Codes im style.css aufgeführt. Ich habe diesen Code kopiert und auf Festplatte gespeichert.

Nun beginnt die Fleißarbeit

Auch bei der Umsetzung der Sprites war ich mal wieder froh, einen Testblog zu besitzen, denn sonst hätten sich Besucher meines Blogs das ein oder andere Mal gewundert, wie verschoben manche Grafiken dargestellt werden. Aber dazu komme ich später noch.

Speichern der Sprite-Grafik in einem Verzeichnis

Erst einmal habe ich die heruntergeladene Sprite-Datei umbenannt und per FileZilla in einem Verzeichnis meines Blogs gespeichert. Beispiel: sylvis-blog.de/public_images/spriteme1.png.

Wichtig ist, dass zum Einbinden der Sprite-Grafik in der style-css die komplette URL verwendet wird, also z. B.: .

Umsetzen der geänderten Codes

Nun öffne ich mit Notepad++ die Datei style.css aus meinem Theme-Verzeichnis “Smoky” (<<altes Theme, mittlerweile ist “Seashell” eingesetzt) und suche nach einer Grafik die in der heruntergeladenen Sprite-Datei aufgeführt ist. Zum Beispiel:

#header{width:100%;height:86px;background:url(/wp-content/themes/Smoky/images/bgr_header.png) no-repeat}

und korrigiere diese Zeilen nun in der Form, wie sie der in CSS-Datei von SpriteMe zu #header umgesetzt wurden – natürlich mit meinem Verzeichnispfad und geänderten Dateinamen:

#header{width:100%;height:86px;background-image: url("https://www.sylvis-blog.de/public_images/Spriteme1.png");  background-position: -10px -10px;
}

Die Attribute

width:100%;height:86px;

habe ich dabei aus der ursprünglichen css-Datei übernommen. Bei einer anderen Grafik musste ich wiederum noch ein wenig die margin– bzw. padding-Werte ändern, da diese verschoben angezeigt wurde.

Alle Grafiken konnte ich leider nicht als Sprite umsetzen. Dabei handelte es sich insbesondere um welche, die als Attribut no-repeat, repeat-x oder repeat-y beinhalten. Daher kann ich bei diesen nur anraten, einfach erst einmal testen und im Zweifelsfalle nicht als Sprite einzubinden, um Darstellungsfehler auf der Seite zu vermeiden.

Mittlerweile wird bei mir nur noch ein gelbes Dreieck in PageSpeed bei “CSS Sprites kombinieren” und eine Punktzahl von 89 bis 90 angezeigt. Ein kleines Erfolgserlebnis hat dieser Aufwand also gebracht. Allerdings kann ich durchaus nachvollziehen, dass nicht jeder Webmaster diesen Aufwand betreiben möchte, um einen verhältnismäßig geringen Performance-Schub zu erzielen – vor allem dann, wenn nur wenige Bilddateien aufgrund ihrer css-Attribute als Sprite verwendet werden können.