Mehr Spritzigkeit mit CSS Sprites?

Geschätzte Lesezeit: 3 Minuten

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

Gewurmt hat mich das rote Dreieck bei “CSS Sprites kombinieren”, wodurch angeprangert wird, 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. smilie

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. smilie 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


SpriteMe-Link in den Browser ziehen

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


Auflistung Grafiken für einen SpriteAnschließ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.


Generierter Grafik-Link

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


Spritefenster mit den zusammengefassten Grafiken

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


Zu ändernde CSS-Codes

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.: https://www.sylvis-blog.de/public_images/spriteme1.png.

Umsetzen der geänderten Codes

Nun öffne ich mit Notepad++ die Datei style.css aus meinem Theme-Verzeichnis „Smoky“ und suche nach einer Grafik die in der heruntergeladenen Sprite-Datei aufgeführt ist. Zum Beispiel:

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:

Die Attribute

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.


11 Kommentare

Kommentare hinzufügen
  • Hallo Sylvie,

    mit diesem Artikel bist Du auf einen wichtigen Punkt eingegangen, wie man die Ladezeiten einer Webseite verbessern kann.
    Gerade mit den CSS Sprites kann man die Requests zum Teil erheblich reduzieren.
    Prüfst Du nur mit Page Speed, oder verwendest Du auch Tools wie z.B.
    http://gtmetrix.com/ ?

    Gruß
    hansen

    • Hallo hansen,

      in der Hauptsache prüfe ich mit Page Speed. Dann schaue ich regelmäßig mit dem W3 Validator nach, um zumindest die Startseite valide zu halten, damit sich erst gar nicht viel an Fehlern ansammelt.
      Bekannt war mir nur noch Nibbler, den verwende ich aber äußerst selten.
      Auch bei SeitTest schaue ich rein, aber da stimmen die Werte nicht so ganz … schon allein was die Anzahl der Backlinks betrifft.

      Du siehst ich prüfe in alle Richtungen. Aber ich danke Dir für den Tipp – gtmetrix habe ich gleich mal gespeichert und ausprobiert. Ich sehe, da besteht immer noch Potential smilie.
      Dadurch dass ich allerdings PageSpeed regelmäßig verwende, habe ich einen guten Vergleich, ob sich nach diversen Eingriffen etwas verbessert hat.

      Lieben Gruß
      Sylvi

      Edit: Ich muss gerade lachen. Während meine bunte Blogwelt bei Pagespeed auf höchstens 79-80 Punkte kommt, schneidet sie bei mtmetrix besser ab, als dieser Blog hier. smilie

  • Hallo Sylvi,

    ein klein wenig Potetial ist da noch, da hast Du Recht.
    Aber jeder einzelne Punkt ergibt auch wieder einen neuen Artikel in Deinem Blog.
    Bei Seittest ist leider noch immer die Yahoo Site Explorer Abfrage installiert und die haben ja den Dienst abgeschaltet, daher stimmen die Backlinks nicht.

    Lieben Gruß
    hansen

    • Hej hansen,

      lach, das stimmt. Wenn ich bei der Tüftelei mal wieder einen Gedankenblitz habe und meine, das könnte auch andere interssieren, gibt es natürlich auch wieder ein Blogbeitrag darüber smilie

      Lieben Gruß
      Sylvi

  • Hallo Sylvi,

    ich war neugierig wie sich die Ladezeit, nach dem Umbau ausgewirkt hat und hab deshalb den Speed soeben getestet. Offenbar musst Du noch die Komprimierung aktivieren – da gibt es bestimmt eine Funktion mit der Du noch bessere Werte erzielen kannst.
    Warum PageSpeed allerdings die Bildgröße moniert ist mir unklar. Die Größenangaben im Quelltext entsprechen doch der Bildgröße die angezeigt wird. Hm, da hab ich wohl was übersehen …

    Gruß Ingo

    • Hej ingo,

      ich weiß, dass es hier nach dem Redesign noch einige Defizite gibt, was die Performance betrifft und ich muss mich damit irgendwann noch eingehender beschäftigen.
      Aber wenn etwas auf diesem Blog aktiviert ist, dann ist es die Komprimierung. Sowohl in der config.php, als auch in der .htaccess und zusätzlich im Cache-Plugin wird komprimiert, was das Zeug hält. smilie
      Einzig die zusätzliche Umwandlung als .gzip der style.css habe ich noch nicht vorgenommen, weil ich immer noch kleine Veränderungen vornehme.
      Ich habe es jetzt extra mit diesem Tool überprüft und darin wird angezeigt, dass gzip aktiviert ist.

      Gruß Sylvi

  • Hi Sylvi,

    ich habe die Tauglichkeit hier geprüft. Dort wird die die Komprimierung und Größenanpassung der Bilder bemängelt. Angeblich kannst Du durch das Optimieren die Größe der Bilder um bis zu 85% reduzieren.

    Soweit ich weiß, gibt es bei diesem Test aber Schwierigkeiten mit dem GIF-Format. Der Test berücksichtigt nicht, das dieses Format 256 Farben darstellen kann und gibt bereits bei einer Farbtiefe von 16 Farben eine Fehlermeldung aus. Benutzt man statt dessen „.png“, ist die Dateigröße, auch nach der Komprimierung, meist um ein vielfaches größer, die Fehlermeldung entfällt jedoch.

    Gruß Ingo

    • Hej ingo,

      klar, wenn es nach PageSpeed Insights geht, dann dürfte ich nur Artikelbilder im Format 200 px x 150 px hochladen. Daher wurden in meinem Blog mit altem Theme die Bilder auch kaum angeprangert.
      Das jetzige Format 704 px x 454 px wird ihm daher auch in Zukunft nicht gefallen – trotz Optimierung mit TinyPNG/JPG oder Riot. smilie

      Gruß Sylvi

  • Hallo Sylvi,

    Das jetzige Format 704 px x 454 px wird ihm daher auch in Zukunft nicht gefallen

    hm … (`~´) an der Bildgröße kann es eigentlich nicht liegen. Die Bilder werden ja entsprechend skaliert.
    Es gibt genügend Webseiten bei denen wird keine Fehlermeldung ausgegeben, obwohl das Bildformat 648px × 122px beträgt.
    Mich würde ja brennend interessieren ob das Bildformat 648px x 122px dieselbe Fehlermeldung bei dem WP-Theme anzeigt.

    Gruß Ingo

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst diese HTML-tags und attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Du hast 15 Minuten Zeit, um Deinen Kommentar nachträglich zu korrigieren.

Copyright © Sylvis Blog • 2017. Alle Rechte vorbehalten. •   Impressum   •    Datenschutzerklärung

%d Bloggern gefällt das: