Beiträge

14
Jan 2014

Was sind eigentlich Sprites? Sprites sind Ausschnitte aus einem Bild. Durch ihre Verwendung kann die Ladezeit einer Seite minimiert werden, vor Allem, wenn  sich eine GUI aus vielen einzelnen Grafiken zusammensetzt.

Je mehr Elemente einer Seite bzw. Grafiken geladen werden müssen, desto mehr Zugriffe werden auf den Server gemacht, und die Kommunikation mit dem Server kostet immer Zeit. Bei der Verwendung von Sprites, werden die Server-Zugriffe minimiert, indem all die kleinen Grafiken einer Theme in einer einzelnen Grafik zusammengefasst und in einem Stück geladen werden. Die Benutzungsoberfläche wird einfach über Koordinaten der Bildausschnitte zusammengebaut, was um einiges schneller geht, als das Laden einzelner Grafiken.

Sprite-Grafik

Sprite-Grafik für Beitrags-Oberfläche

Wie man eine Sprite-Grafiken erstellen kann, findet man auf dieser Seite ganz gut erklärt.

HSWLab hat im Durchschnitt zwischen 30 und 40 Serverzugriffe, was immer noch recht viel ist. Die Meisten Zugriffe macht die Verwendung von Plugins und Scripten aus. Allein für die Lightbox müssen zwei schwergewichtige Java-Scripte, eine mächtige CSS und ein Hafuen Grafiken geladen werden, und das nur, um eine simple Slideshow darzustellen. Für solche Probleme existieren Cache-Lösungen, wie z.B. das WordPress-Plugin Auto-Optimize. Es kann zumindest Scripte und Styles in einer gemeinsamen Datei zusammenfassen.

Da ich bei dieser Seite auf Fremd-Plugins nach Möglichkeit verzichten wollte, wird nicht mit Hilfe von Plugins optimiert, sondern nach Möglichkeit per Hand. Unter Anderem, wurde heute die alte Term-List von WordPress weg optimiert, da sie keine Title-Tags unterstützt und durch die Marke-Eigenbau ersetzt. Title-Tags in Links, sind bei Barriere-Freundlichen Seiten besonders wichtig. Zumindest wird bei SEO-Test großen Wert drauf gelegt. Die Galerie-Grafiken in der Sidebar wurden auch etwas verkleinert, um Ladezeiten zu Minimieren.

Schreibe einen Kommentar

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