alles-mit-links

Der aktuelle Trend im Web geht ja dahin, dass man sich wieder darum bemüht Recourcen zu schonen. Analyse-Tools wie Seitenreport bewerten inzwischen einige Punkte aus diesem Bereich. Der letzte hinzugekommene Punkt in der Seitenreport-Analyse sind die Requests, die beim Aufruf einer Webseite erfolgen. Je weniger Requests eine Webseite also verursacht, desto besser wird dies bewertet.

Doch nicht nur Seitenreport beachtet diesen Punkt. Auch in den Google-Webmaster-Tools werden einem zu viele Requests als Optimierungs-Option angeboten. Unter dem Punkt Google-Labs –> Website Leistung werden einem unnötoge Requests angezeigt. Bei Google heißen sie DNS-Lookups

Typische Verursacher dieser Requests / DNS-Lookups sind Werbebanner bei denen das Banner auf einem fremden Server liegt, und Java-Scrips, welche Werbung einbinden (Contaxe, Adsense)

Hier auf alles-mit-links verwende ich 3 Werbebanner in der Sidebar, welche 3 Requests verursachen. Eine Optimierungs-Möglichkeit wäre es, sich diese Banner auf den eigenen Webspace zu laden, und den Banner-Code daraufhin anzupassen. Für Google wäre das Problem der DNS-Lookups damit schon behoben. Seitenreport ist da aber konsequenter, da es immer noch 3 Requests, zwar jetzt vom eigenen Server aber doch noch vorhanden, sind.

Das CSS-Sprite

Es besteht aber auch die Möglichkeit, die 3 Bilder in eines zu packen, und sich diese dann nicht mehr direkt per HTML-Tag, sondern per CSS anzeigen zu lassen. Dadurch erspart man sich dann 2 Requests, es wird ja nur noch eine Image-Datei benötigt.

Erstellen einer Bilddatei für das CSS-Sprite

Um eine Imagedatei zur späteren Verwendung als CSS-Sprite zu erstellen, importieren wir uns die dafür notwendigen Bilder in ein leere Bild unseres bevorzugten Grafik- Bildbearbeitungs-Programms. Als nächste ordnen wir die Bilder nebeneinander an und lassen zwischen den Bildern 2 Pixel Platz. Das ganze speichern wird als .png, .gif oder .jpg Datei ab und unsere CSS-Sprite Image ist fertig.

Für die Werbebanner hier auf alles-mit-links sieht das dan so aus:

Die einzelnen Bilder per CSS verfügbar machen

Damit wir die Bilder später einzeln anzeigen können, müssen diese in der CSS-Datei einzelnen Klassen zugewiesen werden. Diese können wir dann später dem Link per ID zuweisen.

Wichtig ist natürlich, das wir den Klassen die Bildmaße (width und height) mitteilen, und natürlich die Position des Bildes in der Image-Datei (background). Bei letzterem ist zu beachten, dass es sich hier bei der Positionsangabe um eine Verschiebung innerhalb der gesammten Image-Datei handelt. So ergibt sich hier für das 2. Bild nicht der logische Wert 122px für die X-Achse, sondern ein Wert von 202px und beim 3. Bild ein Wert von 404px. Warum weiss ich auch nicht, aber es funktioniert.

Als Beispiel der CSS-Code, den ich hier auf alles-mit-links verwende:

#wl1 {width: 120px;
height: 60px;
text-decoration: none;
display: block;
background: url(’img/wl.gif’) 0 0;}

#wl2 {width: 120px;
height: 60px;
text-decoration: none;
display: block;
background: url(’img/wl.gif’) 202px 0;}

#wl3 {width: 80px;
height: 15px;
text-decoration: none;
display: block;
background: url(’img/wl.gif’) 404px 0;}

Die einzelnen Bilder dem Link zuweisen

Zum Schluß passen wir noch die Image-Links so an, dass sie nicht mehr jeder sein eigenes Bild lädt, sondern dass das zugewiesene Sprite angezeigt wird. Dazu weisen wir dem Link einfach die ID unserer Klasse zu, und entfernen den kompletten <img … /> Teil.

Hier auf alles-mit-links sieht der Quelltext, und das Ergebnis, dann wie folgt aus:

<a href=”http://bee5.de/beeZ83v8UFg” id=”wl1″ title=”zu Bee5.de” rel=”nofollow”>&nbsp;</a>
 
<a href=”http://www.contaxe.com/?cref=1657583″ id=”wl2″ title=”contaxe” rel=”nofollow”>&nbsp;</a>
 

<a href=”http://www.blog-webkatalog.de/in.php?id=2559″ id=”wl3″ title=”Blogverzeichnis und Webkatalog” rel=”nofollow”>&nbsp;</a>
 

Anmerkung:
Wer WordPress mit Gzip-Komprimierung betreibt, siehe dazu auch diesen Artikel:Den Blog auf GZip-Komprimierung umstellen, muss natürlich die geänderte style.css neu komprimieren und hochladen.

Lohnt sich der Aufwand CSS-Sprites zu verwenden?

Nun – hier auf alles-mit-links könnte ich auch ohne leben. Aber wenn ich Blog sehe, die 10 oder mehr Banner-Links haben, spart die Verwendung von CSS-Sprites doch einige Request und DNS-Lookups. Voraussetzung ist natürlich, dass die Banner-Links gleich bleiben. Wer hier häufig Änderungen oder Erweiterungen vornimmt, sollte sich die Mühe sparen.

Weitere interessante Beiträge

• NSC14 Statusbericht 1 – Die Naschkatze aus dem Sack lassen
• Ein paar Fakten zum Wettbewerb Ventil
• Neues von der Seitenreport Website Analyse
• Bei Seitenreport in den Top1000
• Spinnt Google Webmaster Tools (WMT)