Das offizielle Kubaforum

Werde auch Du Teil der deutschsprachigen Kuba-Community. Die Anmeldung ist absolut kostenfrei und in wenigen Augenblicken abgeschlossen. Direkt danach bist Du in der Lage, eigene Themen zu erstellen oder auf bestehende zu antworten, sowie Dich mit anderen Mitgliedern zu verbinden.
Sei dabei. Wir freuen uns auf Dich!

Mit SpriteMe und CSS-Sprites Serveranfragen reduzieren und Ladezeiten verringern

fra.bra

Administrator
Registriert
6 Nov. 2012
Beiträge
44
Punkte Reaktionen
3
Aus der Sicht von Suchmaschinen sind ladezeitenoptimierte Websites benutzerfreundlich und stehen sich somit auch nicht unnötig selbst im Weg, bei Suchergebnissen anständig gesucht und gefunden zu werden.

Es gibt aber die Möglichkeit Benutzern, Internetbrowsern sowie Suchmaschinen mit Hilfe von sog. Sprites entgegen zu kommen.
Der Benutzer bekommt eine sich schnell aufbauende Seite, der Browser muss nicht so viele Anfragen an Server stellen und die Suchmaschine bewertet sie mit einer benutzerfreundlichen Note.

Zitat von Google:
Google ist bestrebt, seinen Nutzern möglichst relevante Suchergebnisse und eine großartige Nutzererfahrung zu bieten. Schnelle Websites erhöhen die Zufriedenheit der Nutzer und verbessern die Gesamtqualität des Webs, insbesondere für Nutzer mit einer langsamen Internetverbindung. Wir hoffen, dass Webmaster durch die Verbesserung ihrer Websites auch zu einem insgesamt schnelleren Web beitragen.



Was sind Sprites?

Sprites sind im Grunde genommen nichts Anderes, als Bilder, die aus den auf einer Website verwendeten Grafiken zu einem einzigen Bild zusammengefasst werden und dieses eine Bild dann als Grundlage für alle anzuzeigenden Grafiken dient.
Eine detailliertere Erklärung zu Sprites findet sich unter Wikipedia.


Wie funktioniert's?

Anstatt also viele einzelne Bilder auf der Website zu präsentieren, zeigt man nur ein großes, auf dem alle zu sehen sind und welches dann mittels genauer Definition im CSS immer so verschoben und angezeigt wird, dass nur die relevante Einzelgrafik des Gesamtbildes an einer ganz bestimmten Stelle zu sehen ist.


Der Vorteil:

Man verringert die Anfragen, die der Browser beim Server machen muss um ein Vielfaches und erhöht die Performance seiner Seite durch verbesserte Ladezeiten. Es eignet sich besonders für verwendete Icons, Buttons oder Layout-Elemente, da die Information für diese Grafiken nun nicht mehr einzeln abgefragt werden müssen, sondern sich in nur einer einzigen Anfrage realisieren lässt.


Der Nachteil:

Mal abgesehen davon, dass man aus den Einzelbildern ein großes schaffen muss, ist es letztendlich auch noch erforderlich bei jedem der verwendeten Einzelbilder mittels CSS nachzujustieren um den gewünschten Ausschnitt des Sprites an einer gewissen Stelle der Website sichtbar zu machen. Das ist je nach Menge der zusammengefügten Einzelgrafiken sehr aufwendig und erfordert ein gewisses Maß an Fingerspitzengefühl.


Einfachste Methode mit CSS-Sprites umzugehen

Mittlerweile gibt es sehr gute Tools, die den größten Teil der Arbeit machen und den Umgang mit Sprites um Einiges vereinfachen.

Ein sehr gutes wie einfaches Tool hierfür ist SpriteMe.

Diesesr Sprite Generator vereint mehrere Funktionen und lässt sich leicht intuitiv bedienen.
Den Link von der Seite spriteme.org einfach per Drag&Drop in die Lesezeichenmenüleiste des Browsers einfügen und das Tool ist installiert.
Auf einer Website seiner Wahl kann man den nützlichen Helfer dann einfach per Klick auf den Link im Browserlesezeichen aktivieren, wodurch die aktuelle Website untersucht und ein Popup-Fenster geöffnet wird, indem quasi ein Bericht zu den verwendeten Bildern der Website ausgegeben wird.
Hierin werden nicht nur alle untersuchten Bilder aufgelistet und auch gleich Vorschläge für mögliche Sprites gemacht, sondern auch diejenigen Bilder angegeben, die nicht „gespritet“ werden konnten, mit der Angabe des Grundes, warum das jeweils nicht geklappt hat.
(Hinweis: Prinzipiell kann jedes Bildformat zum Erstellen von Sprites genutzt werden; bei der Verwendung von SpriteMe sollten allerdings alle zu untersuchenden Grafiken im .png Format vorliegen)
Trotzdem ist es möglich, die nicht gespriteten Bilder manuell im Popup-Fenster per Drag&Drop hinzuzufügen oder auch eigene (also nicht vorgeschlagene) Sprites zu erstellen.
Zwei Klicks vom Ziel entfernt, muss man nun nur noch die Sprites durch Betätigen des entsprechenden Buttons erstellen und letztlich die CSS-Änderungen exportieren lassen.
Aus den neu geöffneten Tabs speichert man die generierten Sprites als Grafik mit gewünschtem Namen ab und lädt sie auf seinen Server hoch. Ebenso übernimmt man die aus dem CSS Export angegebenen Änderungen in die jeweilige(n) CSS Datei(en).

Fazit

CSS-Sprites sind keine neu entdeckte Methode, sondern vielmehr eine alte Technik aus der Zeit stark begrenzter Datenvolumina und ziemlich aufwendig, wenn alles „von Hand“ gemacht wird.
Bei Nutzung frei verfügbarer Sprite Generatoren bleibt der Aufwand aber sehr überschaubar und ist Alles in Allem eine feine Sache und ein effektives Mittel zum Verbessern der Ladezeiten durch Verringern benötigter Serveranfragen (Requests).
 
Zurück
Oben