Vor geraumer Zeit habe ich ja in diesem Blog das Design umgestellt. Nach dem recht simplen WordPress-Theme, das ich davor benutzte, wollte ich etwas anderes. Ein Theme, das ein wenig mehr meinem Fotografie-Hobby gerechter wird. Die Wahl fiel am Ende auf PinBoard von OneDesigns. Mit Hilfe eines so genannten Child Themes habe ich einige Dinge angepasst, die ich im Laufe der Zeit bestimmt ein wenig erläutern werde. Heute geht es aber um etwas anderes.

Da ich mich für die Besucherzahlen hier auf meiner privaten Spielwiese nicht im allzu großen Umfang interessiere, gucke ich auch nicht regelmässig in Google Analytics rein. Ab und zu aber doch. Und da fiel mir auf: Die Seitenladezeiten sind ja teilweise unter aller Sau. Ich dachte bisher immer, dass das zwar schon an dem Theme selbst liegt, aber auch die Performance von meinem eigenen Rechner eine wesentliche Rolle spielt. Das hat dann Google Analytics ganz schön entkräftet. Aber: Google gibt auch gleich ein paar Tipps mit, was man tun kann, um die Ladezeit der Seiten zu verbessern.

Ladezeitoptimierung durch Nutzen von Sprite-Grafiken

Als Webentwickler – auch wenn ich das nur im weiteren Sinne bin, da ich das ja nicht hauptberuflich mache – stösst man gerade bei diesem Thema schnell auf die so genannten Sprite-Grafiken. Eine Sprite-Grafik ist im Wesentlichen eine Einzelgrafik bzw. -datei, in der mehrere, identisch große Objekte enthalten sind. Dies sind i.d.R. Buttons, Icons, Rahmen o.ä. Die Grafik wird in ein bestimmtes Raster “zerlegt” und in diesem werden dann die Elemente Abgelegt und angeordnet. Mit Hilfe von CSS wird dann festgelegt, welcher Ausschnitt des Bildes angesteuert werden soll.

Die Sprite-Grafik  für die Social Media-Icons, die ich in diesem Blog verwende, enthält z.B. 11 verschiedene Icons in jeweils zwei Varianten (grau/weis und farbig – um eine “Hover”-Variante zu haben). Sie ist also in zwei Zeilen zu je 11 Spalten unterteilt, die alle 32 x 32 bzw 64 x 64 Pixel groß sind.

Der Vorteil, den Sprite-Grafiken gegenüber einzelnen Grafikdateien haben ist schnell erzählt: Der Browser muss nur noch eine einzelne statt der 11 bzw. genau genommen 22 Dateien vom Server herunterladen. In Summe unterscheidet sich zwar die Datenmenge nicht wirklich, jedoch bleiben dem Server die zusätzlichen Anfragen für die Dateien erspart.

Die Social Media Icons als Sprite-Grafik

Ich habe also für dieses Blog von 10 verschiedenen Social Networks bzw. Social Media Diensten die Icons “nachgebaut”. Es sind die Icons von Facebook, Pinterest, YouTube, Flickr, Google+, Twitter, Vimeo, Dribble, LinkedIn und XING sowie das RSS-Icon enthalten. Hierfür habe ich natürlich jeweils die Originalvorlagen der Dienste benutzt, die sind ja dort recht freizügig, was die Herausgabe gerade dieser Logo-Daten betrifft. Die ganzen Bilder habe ich dann mit GIMP in die beiden Sprite-Grafiken zusammen gebaut. Ich habe zwei Dateien, einmal mit den Icons in 32px und einmal in 64px Seitenlänge.

Social Media Icons Sprite-Grafik 64px

direkt zum Download →

Das zugehörige CSS

Da das CSS für beide Dateien in der ZIP-Datei drin ist, hier nur exemplarisch der Auszug für die 32px-Grafiken.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

/* CSS-Datei für die Nutzung der Social Media-Icon Sprite-Grafik
 *
 * Die zugehörige Datei heisst: social_icons_sprite.png
 *
 * Es handelt sich also um die 32px-Grafiken.
 *
 * Damit die Icons entsprechend angezeigt und ohne Anpassungen an diesem CSS benutzt werden können, 
 * muss der Eintrag für ein Social Media-Icon in HTML in etwa wie folgt benannt und strukturiert sein:
 *
 * <div id="Icon-Container - Name und Klasse erst mal irrelevant">
 * <a class="social-media-icon rss" href="http://www.mydomain.com/rss">RSS 2.0</a>
 * <a class="social-media-icon facebook" href="http://www.facebook.com/[name]">Facebook</a>
 * usw.
 * </div>
 *
 * Erstellt von: Robert Steinhöfel, Juli 2013
 * Quelle: http://www.running-rob.de/213/07/social-media-icons-als-kostenlose-sprite-grafik
 */
 
a.social-media-icon {
	background-image: url(img/social_icons_sprite.png);
}
 
.facebook {
	background-position: 0 0;
}
 
.facebook:hover {
	background-position: 0 -32px;
}
 
.pinterest {
	background-position: -32px 0;
}
 
.pinterest:hover {
	background-position: -32px -32px;
}
 
.youtube {
	background-position: -64px 0px;
}
 
.youtube:hover {
	background-position: -64px -32px;
}
 
.flickr {
	background-position: -96px 0px;
}
 
.flickr:hover{
	background-position: -96px -32px;
}
 
.google-plus {
	background-position: -128px 0px;
}
 
.google-plus:hover {
	background-position: -128px -32px;
}
 
.rss {
	background-position: -160px 0;
}
 
.rss:hover {
	background-position: -160px -32px;
}
 
 
.twitter {
	background-position: -192px 0;
}
 
.twitter:hover {
	background-position: -192px -32px;
}
 
 
.vimeo {
	background-position: -224px 0;
}
 
.vimeo:hover {
	background-position: -224px -32px;
}
 
.dribble {
	background-position: -256px 0;
}
 
.dribble:hover {
	background-position: -256px -32px;
}
 
.linkedin {
	background-position: -288px 0;
}
 
.linkedin:hover {
	background-position: -288px -32px;
}
 
.xing {
	background-position: -320px 0;
}
 
.xing:hover {
	background-position: -320px -32px;
}

[tdbutton style=”normal” font_size=”24″ radius=”5″ text_color=”#ffffff” text_hover_color=”#ffffff” bg_color=”#59d600″ bg_hover_color=”#dd9933″ target=”_blank” url=”https://www.running-rob.de/wp-content/uploads/2013/07/social_icons_sprite.zip”]Download[/tdbutton]
Ich habe soeben die ZIP-Datei noch einmal neu hochgeladen, da sich zwischenzeitlich Änderungen im CSS ergeben haben. Irgendwie wollte der auf dem iPad die Grafiken nicht korrekt darstellen. Ich konnte mir nur helfen, indem ich die background-size auf 352px Breite und 64px Höhe gesetzt habe. Dabei haben sich natürlich auch die background-positions der einzelnen Grafiken verändert.