Wie bereits im Artikel Bessere Performance für ein höheres Google Ranking erwähnt bewertet Google die Ladegeschwindigkeit einer Webseite als Ranking Faktor. Je schneller eine Webseite ausgeliefert wird, desto höher ist der Effekt aufs Ranking. Google hat dafür selbst das Werkzeug Google PageSpeed eingeführt. In dieser Reihe werden die einzelnen Empfehlungen des Google PageSpeed erklärt.
Google gibt die Empfehlung einzelne Bilder in CSS-Sprites zu kombinieren.
Was sind CSS-Sprites?
Bei einer CSS-Sprite werden mehrere Grafiken zu einer großen Grafik zusammengefasst. In einer CSS-Sprite können beispielsweise Navigationselemente (wie Pfeile, Button-Elemente, Haken, Navigationshintergrund, Linkeffekte, Aufzählungspunkte etc.) oder Länderflaggen (alle Flaggen in einer Grafik) zusammengefasst werden. Sinnvoll ist der Einsatz von CSS-Sprites immer dann wenn beim Aufruf der Webseite sowieso alle Grafiken geladen werden müssen. Dann macht es Sinn eine einzelne Grafik zu laden und diese mit Hilfe der CSS Eigenschaft „background-position“ an der richtigen Stelle zu positionieren.
Wieso verbessern CSS-Sprites die Performance?
Um Bilder darzustellen muss der Browser diese vorher vom Webserver downloaden. Jedes einzelne Bild erzeugt dabei einen HTTP-Request. Bei jedem HTTP-Request werden Metadaten mitgesendet. Durch die Übertragung einzelner Dateien geht zudem Zeit bei dem Starten und Schließen der TCP-Verbindung verloren.
Andere Ressourcen können also schneller heruntergeladen werden und müssen nicht auf die Abarbeitung einzelner Grafiken warten.
Daher verbessert sich bei CSS-Sprites nicht nur die Anzahl der Requests und somit die Ladegeschwindigkeit, sondern auch die Anzahl der übertragenen Datenmenge. Ein weiterer Vorteil für die Usability von mobiler Nutzung, auf die Google ebenfalls ein großes Auge geworfen hat.
Lohnen sich CSS-Sprites?
Definitiv! Gerade bei Seiten mit vielen Icons und kleineren Grafikelementen die zu Designzwecken verwendet werden lohnt es sich Bilder in CSS-Sprites zu kombinieren. Die Geschwindigkeit steigt spürbar und die Grafiken sind bereits vorgeladen. Sinnvoll beispielsweise bei Hover-Effekten.
Die Anpassung des Templates kann einige Zeit veranschlagen, lohnt sich aber definitiv. CSS-Sprite Generatoren können dabei helfen CSS-Sprites zu erstellen.
Sylvie hat in ihrem Blogartikel Mehr Spritzigkeit mit CSS Sprites mehrere Tools zum Erstellen von CSS-Sprites aufgelistet.
War ich mir bisher noch nicht bewusst, dass Google das auch als Merkmal für den Pagerank nutzt. Also danke für den informativen Artikel zu dem Thema, werde ich mir merken!