WordPress Theme Optimierung – Sprites

Auf dem WordCamp 2014 in Hamburg habe ich eine Spontansession gehalten über das Thema „Theme Optimierung“. In 45 Minuten kann man natürlich ein solches Thema nur grob anreißen. Ich möchte diese Thema jetzt in einer Reihe von Blogposts ein wenig tiefer angehen. Freue mich natürlich auch über eure Anmerkungen und Fragen.

Als Themen sind zunächst vorgesehen:

  • Sprites
  • Icon Fonts (Webfonts)
  • Bildoptimierung
  • Entfernen von ungewollten CSS und JS Dateien von Plugins
  • CSS Optimierung

Sprites

Fragt man Wikipedia nach „Sprites“ findet man zunächst eine Information über Sprites im generellen Kontext von Computerspielen. Etwas weiter Unten findet man einen Hinweis auf den Hauptartikel „CSS-Sprites„.

CSS-Sprites bezeichnet eine einzelne Grafikdatei, die viele Symbole und Icons enthält. Diese zusammengefassten Grafiken fungieren als Sprites und dienen dazu, die Ladezeit von Webseiten zu minimieren. Die einzelnen Elemente dieser Gesamtgrafik werden mit der CSS-Eigenschaft background-image und background-position ein- beziehungsweise ausgeblendet.

In der Praxis heißt das, das man anstatt diverse einzelner Bilder eine einzige Bilddatei mit allen Bildelementen die man braucht auf der Seite hinterlegt. Der Vorteil an dieser Stelle ist das man die Anzahl der HTTP Requests minimiert. Dies führt dazu das die Ladezeit der Seite verbessert wird.

Als Hintergrund dazu ist interessant zu wissen, das jeder Server gleichzeitig nur eine beschränkte Anzahl von Verbindungen  zum gleichen Gegenpunkt aufbaut. Man kann sich das ganze so vorstellen das man immer nur ein Teil in die Hand nehmen darf, aber 10 Teile(Bilder) von einem Tisch(Server) auf den anderen Tisch(Webbrowser) tragen(herrunterladen) muss. Außerdem findet vor dem Übertragen der Datei für jede Datei eine Kommunikation zwischen Server und Browser statt, somit ist die Übertragung von einer großen Datei aus diversen Gründen schneller als die Übertragung mehrerer kleiner Dateien.

Die Anwendung

Eine Sprite dient als Hintergrundgrafik. Sie wird also über CSS mit background-image eingebunden, und anschließend über eine negative background-position in Position gebracht, ich persönlich nutze auch noch ein background-repeat: none; um an den Seiteneffekte zu verhindern.

Hier anhand eines Beispiels von Xing:

Bildschirmfoto 2014-06-15 um 20.23.21 Bildschirmfoto 2014-06-15 um 20.23.56

Die Sprite Datei:

https://x1.xingassets.com/assets/frontend_minified/img/sprites/icn-s0714b9e39a.png

Mögliche Einsatzmöglichkeiten

Zusätzliches Markup

Man nimmt ein zusätzliche HTML Element und kann dieses exakt wie ein Bild nutzen. Die einfachste Anwendung einer Sprite. Das HTML Element hat dann in der Regel display: block und absolute Höhe und Breite.

Pseudo Element ::before oder ::after

Die Anwendung findet fast analog zum obigen Punkt statt, nur wird kein zusätzliches Markup genutzt, sondern die Pseudoelement before oder after. Dies ist sowohl die sauberere Lösung, außerdem ist zusätzlicher Markup auch eine zusätzliche Menge an Bytes die bei jedem Aufruf übertragen werden müssen. Der kleine Nachteil dieser Methode ist der Internet Explorer, bis Version 7 unterstützt der Internet Explorer die Pseudo Elemente noch gar nicht, und in Version 8 nur mit der Einschränkung das man die Schreibweise mit einfachem Doppelpunkt nutzen muss. Erst ab Version 9 unterstützt der Internet Explorer diese Methode ohne Einschränkungen.

Innerhalb des bestehenden Markups

Dies ist in meinen Augen die beste Lösung die Sprite einzusetzen. Hier ist der Nachteil im höheren Aufwand in der Erstellung der Sprite. Die einzelnen Elemente in der Sprite müssen in alle Richtungen genug Abstand haben, da hier ohne Absolute Größen gearbeitet wird, muss also verhindert werden das ungewollt Teile von anderen Bildern sichtbar werden. Gerade beim Einbetten von Grafiken in Buttons kann es dazu kommen das dies passiert falls der Text auf einmal eine Zeile mehr hat als üblich, z.B. zweizeilig anstatt einzeilig. Außerdem kann die Sprite nur mit einer Hintergrundfarbe verbunden werden. Ein

Erstellen der Sprite

Zum Erstellen der Sprite gibt es mehrere Wege, es gibt zum einen die Möglichkeit diese manuell zu erstellen z.B. mit Photoshop oder mit Gimp. Dabei werden alle benötigten Elementen eingefügt und mit den gewünschten Abständen eingebunden. Dieses Verfahren ist natürlich sehr aufwendig, jedoch hat man hier die größte Kontrolle.

Des weiteren gibt es diverse Tools die die Sprite und meist auch eine passende CSS Datei automatisch generieren. Meist basieren diese Tools auf den ersten beiden Techniken. Beispiele hierfür wären SCSS, Tools wie Sprite Master Web oder Online Tools wie z.B. SpritePad.

Einschränkungen

Generell ist der Nutzen von Bildern in der Sprite gegen die zusätzliche Ladezeit abzuwägen. Eine große Anzahl von Grafiken die nur auf bestimmten Unterseiten gebraucht werden, können den positiven Effekt der eingesparten HTTP Requests wieder auffressen. Also ggf. nach Bedarf mehrere Sprites anlegen.

Ein Problem mit der Größe konnte ich bis jetzt in meinen Sprites nie feststellen. Jedoch sollte man hier natürlich gesunden Menschenverstand walten lassen, eine Sprite mit 10’000×10’000px wird durchaus das ein oder andere Smartphone oder Tablet in die Knie zwingen.

Retina Displays

Retina Displays sind eine tolle Sache, aber auch immer ein Problem für die Entwicklung. Retina Displays einfach zu ignorieren kann ich persönlich nicht empfehlen, gerade iPhones und iPads haben eine hohe Verbreitung. Der übliche Weg die dies zu bewerkstelligen funktioniert über media queries und über das CSS Tag background-size. Ein Nachteil, der den Einsatz von Sprites schnell unattraktiv macht ist die Tatsache das alle background-position’s neu angepasst werden müssen, sie müssen zwar „nur“ verdoppelt werden, aber jeder Wert muss angepasst werden.

Eine alternative, wenn auch experimentelle Technik ist -webkit-image-set. Ich selbst setze diese Technik auf meinen Seiten ein, jedoch sollte einem bewusst sein das dies eine experimentelle Technik ist, die theoretisch jederzeit eingestellt werden kann. Man sollte dies also primär auf Seiten einsetzen die man aktiv pflegt.

Alternativen

Sprites sind kein Allheilmittel, es gibt durchaus alternativen, und auch bessere Techniken, jedoch sind Sprites für bestimmte Arten von Bildern die beste Lösung.

Icon-Fonts

Will man einfarbige Icons(oder maximal dreifarbige, falls man mehrere Teile über Pseudo Elemente kombiniert) einsetzen ist die beste Wahl eine Icon-Font. Ein großer Vorteil hierbei ist die Möglichkeit Transitions einzusetzen.

SVG Grafiken

Einzeln Bilder mit wenigen Farben, und einfachen Farbverläufen legt man am besten als SVG an.

Bei beiden Techniken handelt es sich um Vektoren, somit sind diese Daten sehr klein, skalierbar und auf jedem Display gestochen scharf.

Gerade für komplexe Logos, Bilder oder z.B. Flaggen sind Sprites die beste Lösung.

 

Ich hoffe dieser erste Nachtrag zum WordCamp Hamburg hat euch gefallen, ich freue mich über euer Feedback.

1 Comment

Kommentar verfassen