Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / kreuz-und-quer / tutorials-info-neuigkeiten-css / css-tuning-mittels-data-uri-base64.php

CSS-Tuning mittels DATA-URI (base64)

Dieser Artikel soll als Ergänzung zum Artikel CSS-Sprites dienen, den Jan vor einem Jahr veröffentlicht hat. Ergebnis soll so sein: Internetwerbung (Quellcode der CSS-Datei)
Wie Jan bemerkt hat, ist die Verwendung von CSS-Sprites teilweise sehr tricky und liefert z.b. schlechte Ergebnisse wenn:

Die Lösung heißt DATA-URI (base64)

Die Grundlagen dazu sind sehr gut in der englischen Wikipedia nachzulesen. Allerdings möchte ich euch einige (selbstentwickelte) Tuningmaßnahmen vorstellen. Zuerst muss gesagt werden, dass man mit dieser Methode sämtliche HTTP-Requests aus seiner CSS-Datei entfernen kann. Dadurch wird die CSS-Datei allerdings um die Summe aller verwendeten Bilder größer. Deshalb unbedingt Cache-Header verwenden!!! Da meine „Tuningmaßnahmen“ sehr serverlastig sind (Bildbearbeitung mittels PHP), empfehle ich dringend die Ergebnis-CSS-Datei zu cachen: Ich habe einen einfachen (aber wirkungsvollen) Cache implementiert.

So solls am Ende aussehen

Auf einer meiner Internetwerbung Seiten (die Seite ist egal, und dient nur Demonstationszwecken) kann man sich die CSS-Datei ansehen. Wenn man den Quelltext nach der Zeichenkette: „url(„ durchsucht, sieht man alle verwendeten Bilder als Teil der CSS-Datei und nicht mittels Link-Tag referenziert. Der Kommentar am Anfang ist nur informativ für mich und sagt mir die Zeichenzahl meiner CSS-Datei (=Größe).

Anleitung zum Umbau der CSS-Datei

Wer erstmal „nur“ testen möchte, kann gerne die Code-Schnipsel von Wikipedia verwenden. Ich habe diese weiterentwickelt und stelle sie euch hier exklusiv zur Verfügung.

Benchmark

Ich habe auf meiner Seite beide Varianten mit YSlow getestet:
Vorher: 0,56s
Nachher: 0,79s (css nicht gecached (umwandlung on the fly))
Nachher: 0,25s (css gecached)

Fazit

Im ungecachetem Zustand wird die Zeiteinsparung durch die Verringerung der HTTP-Requests vollständig durch die Erstellungszeit der neuen CSS-Datei aufgebraucht. Ein Cache ist also unbedingt notwendig!

Nur nebenbei

Jan hatte ja schon erwähnt, dass die meisten Browser eine interne Beschränkung haben, was die Anzahl der gleichzeitigen HTTP-Requests angeht. Erwähnenswert ist, dass die meisten Betriebssysteme ebenfalls eine interne Beschränkung haben. D.h. es ist doppelt wichtig die Anzahl der Requests der eigenen Seite gering zu halten, weil es eben 2 Flaschenhälse gibt.

Nur Nebenbei II

Wer noch die letzten Prozente rausholen möchte, kann die gecachede Datei gleich gezipt speichern, damit beim Ausliefern die Zeit zum Zippen entfällt. Bei mir bringt das etwa 0,05s … (klingt wenig, entlastet den Server aber)

Ein kleines Quiz am Ende

Was wird hier gemacht?

echo '<link rel="icon" href="data:image/ico;base64,'.base64_encode(file_get_contents('images/favicon.ico')).'" />';