Thema des Monats

CSS Sprites - Performance-Boost für Ihre Website

CSS Sprite am Beispiel der Website von Yahoo!

 

Die Performance, bzw. die Ladegeschwindigkeit einer Website, war schon immer wichtig, gewinnt jedoch immer noch weiter an Relevanz für Websitebetreiber wie auch Web-Entwickler. Grund hierfür sind verschiedene Faktoren:

  • Google: Der Suchmaschinendienst misst bei der Bewertung einer Website und deren Platzierung in den Suchrankings der Ladegeschwindigkeit immer mehr Bedeutung zu.
    Da User-friendliness für Google einen hohen Stellenwert hat, ist das nur logisch - muss der Besucher zu lange warten, bis er auf einer Website navigieren kann oder er sie (im schlimmsten Fall) überhaupt erst zu sehen bekommt, verliert er leicht das Interesse und ist in seiner Informationsfindung behindert. Resultat: das Suchergebnis ist für Google weniger relevant und die Website verliert wichtige Punkte für eine hohe Platzierung in den Suchergebnissen.
  • Usability: Wie bereits erwähnt, ist eine langsame Website für den Besucher ein Ärgernis. Er verbringt unnötig Zeit mit warten und springt wesentlich schneller wieder ab, als wenn er direkt zu den für ihn relevanten Informationen gelangt.
  • Der Mobile Trend: Mit steigenden Zugriffszahlen durch mobile Geräte wie Smartphones, gewinnt eine schnelle Ladezeit ebenfalls an Bedeutung. Zwar findet auch im Bereich der mobilen Datenübertragung eine rasante Entwicklung statt, dennoch hinken mobile Downloadraten im Vergleich zu kabelgebundenen in vielen Gebieten immer noch stark hinterher.

Es gibt viele Elemente auf einer Website, die Einfluss auf die Ladegeschwindigkeit haben. Einer der grössten Faktoren sind jedoch die Bilddateien. Diese kommen in den vielfältigsten Farben und Formen daher: als tatsächliche Bilder, als grafische Elemente auf der Site, als Buttons, Social Media Icons, etc.

Jedes dieser Bilder muss bei einem Seitenaufruf heruntergeladen werden, was nicht nur bei der Dateigrösse relevant ist (je grösser die Datei, desto länger braucht sie vom Server auf das eigene Gerät), sondern auch bei den HTTP-Requests, die der Server verarbeiten muss (jedes Bild wird einzeln vom Server heruntergeladen) --> mehr Requests bedeuten mehr Serverbindungen und damit mehr Zeitaufwand. Zudem erlaubt der HTTP Standard nur eine limitierte Menge an gleichzeitigen Requests.

Hier kommen die sogenannten Sprites ins Spiel: die Idee dahinter ist, sowohl die anfallenden Requests zu reduzieren, als auch die für Bilddateien aufgewendete Dateigrösse auf das mindestmögliche zu schrumpfen.

Typo3 Sprite

Wie wird das erreicht? Bei einem Sprite werden einfach alle grafischen Elemente auf einer Website in einer einzigen Bilddatei zusammengefügt. Zur Darstellung dieser Elemente, welche wie auf einem Blatt Papier nebeneinander aufgereiht sind, wird dann einfach dort wo z.B. das entsprechende Icon auf der Website angezeigt werden soll, der Ausschnitt des Sprites angezeigt, in welchem sich das gewünschte Icon befindet. Dies wird in der Regel via CSS (Cascading Style Sheet) Befehle erreicht. Ein CSS ist ohnehin auf nahezu jeder Website vorhanden, da es die Darstellung der Website bestimmt (wie z.B. Abstände, Farben, Effekte, etc.).
Ergo kommt die Seite mit einem einzigen Bildrequest und einer einzigen Bilddatei aus, anstatt mit X Requests für X verschiedene Bilder. Das spart Zeit und Nerven.

Es muss aber erwähnt werden, dass reguläre Bilder üblicherweise nicht in einem Sprite erfasst werden. Diese Performanceoptimierung richtet sich eher an die auf einer Website verwendeten Icons und Logos. Zudem muss man auch den Aufwand für die Pflege eines solchen Sprites in Betracht ziehen: möchte man z.B. nur ein kleines Logo auf der Website austauschen oder hinzufügen, so kann man dieses nicht einfach hochladen, sondern muss das Sprite anpassen und per CSS den entsprechend zu zeigenden Ausschnitt festlegen.

Sie sehen also: mittels eines kleinen Kniffs in der Art der Auslieferung von grafischen Elementen und Bildinhalten, lässt sich für die Besucher Ihrer Website ein relevanter Performancesprung erreichen, und als angenehmer Nebeneffekt ist Google dabei Ihrer Site ebenfalls wohler gesonnen.

Falls Sie über die Einbindung von Sprites in Ihrem Internetauftritt nachdenken, kommen Sie einfach auf uns zu: wir beraten Sie gerne! Unsere Software-Entwickler greifen auf ein breites Know-How in der Optimierung von Website-Performance zurück.

Referenzen

Aufgrund unserer über 16-jährigen Erfahrung auf dem Gebiet der Webentwicklung, können wir auf eine lange und vielseitige Liste von Referenzen verweisen. Machen Sie sich selbst ein Bild von unserer Bandbreite, und stöbern Sie etwas herum. Wir sind sicher, wir können Sie überzeugen! Unsere Referenzen »

Kontakt

+41 61 261 16 46

[email protected]