CSS Performance

[Michael Schröpl]

Hi Christian,

Die Größen der CSS liegen hier zwischen 1 und 11kB. Meine Sorge ist nur wenn ich das alles in ein CSS stecke, ob dann 6 mal die CSS geladen wird oder ob der Browser so schlau ist und dann die aus dem Cache nimmt.

das kommt darauf an ... einerseits auf die Einstellungen der Caching-Strategie des Browser, andererseits auf die von Dir mitgeschickten HTTP-Header. Gerade bei vielen kleinen CSS-Dateien ist der HTTP-Overhead erheblich - wenn der Browser bei jedem Seiten-rendern auch nur den Server fragt, ob er den Inhalt seines Cache weiterhin benutzen darf, dann kann das ähnlich viel kosten, als wenn die CSS-Datei immer wieder komplett übertragen werden müßte.
Addiere zu jeder Datei etwa 800 Bytes HTTP-Overhead, dann wirst Du merken, daß viele kleine Dateien bei der Übertragung länger brauchen. Andererseits muß der Browser beim Rendern unter Verwendung einer einzigen großen Datei mehr CSS-Code parsen als nötig, wird also bei der Darstellung etwas gebremst ... es hängt also _auch_ von der Leitungsgeschwindigkeit des Surfers und von der Leistung seiner CPU ab, welche Lösung performanter ist.

Wenn Du so viel CSS-Code hast und Performance haben willst, dann empfehle ich Dir folgendes:
1. Prüfe, was Du alles redundant definiert hast. Fasse Definitionen ggf. nach Attributen zusammen, nicht nach Klassen - das kann _sehr_ viel Platz sparen (ggf. auf Kosten der Code-Lesbarkeit).
2. Zerlege den CSS-Code in viele kleine Dateien - und wenn die _sehr_ klein sind (<500 bytes), dann überlege, das Zeug serverseitig zu includen (SSI). Das _kann_ schneller sein als zusätzliche HTTP-Requests für jede CSS-Datei.
3. Überlege Dir, Deine Seiten gzip-komprimiert auszuliefern. Falls Dir das möglich ist, verstärke das Includen des CSS-Codes - der läßt sich nämlich sehr gut komprimieren, im Schnitt sogar besser als HTML-Dokumente.
4. Unabhängig von allem anderen: Sende 'gute' HTTP-Header mit, die einem korrekt eingestellten Browser einen großen Teil aller HTTP-Requests ersparen - insbesondere sinnvolle Aufbewahrungsfristen in dessen Cache (für HTTP 1.0 _und_ 1.1).

Viele Grüße
      Michael