CSS Performance

[christian]

Hallo, hätte mal eine dringende Frage loszuwerden:
Was ist performanter eine große CSS für das gesamte Framset oder viele kleine für jeden Frame?
Wenn ich alles in einem mache habe ich so ca. 100 Klassen

[Danny]

Hi Chris,

wieviele "unterschiedliche" Frames hast Du denn und wie groß ist die CSS-Datei?

Ich bezweifele, dass Du alle definierten Klassen auch wirklich brauchst. Du kannst davon mit Sicherheit noch einiges zusammenfassen, bzw. "kaskadieren" (steckt ja auch in CSS;)

Um auf die Frage zu antworten: es dürfte fast keinen Unterschied machen, denn viele kleine Dateien sind zwar schneller geladen bedeuten aber auch mehr Server-Zugriffe... Oder ist hier jemand anderer Meinung?

Guten Rusch!

Danny

[Christian]

Hi Danny,
habe 6 Frames, die bisher alle eine eigene CSS verpasst bekommen.
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.

[emu]

Hallo!

habe 6 Frames, die bisher alle eine eigene CSS verpasst bekommen.
Die Größen der CSS liegen hier zwischen 1 und 11kB.

Nur aus Interesse - welche Seite ist das? Welche Seite braucht 30kb an
CSS?

emu
[...]

[Danny]

er holt sie aus dem Cache...

[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