Wie "gross" darf ein externes CSS sein?

[Christian Kaller]

Moin Forum,

meine .css ist nun fast 19kB gross. Ok, mit diversen Modifikationen werde ich es noch auf 15kB druecken koennen. Frage: Wie gross sind denn so eure CSS' und was ist technisch "annehmbar"?

Fragen die Browser eigentlich bei jedem Aufruf das CSS neu ab oder bleibt's im Cache?

Gruss,
Chris

[Cheatah]

Hi,

meine .css ist nun fast 19kB gross.

niedlich.

Wie gross sind denn so eure CSS' und was ist technisch "annehmbar"?

Der letzte Teil ist nicht beantwortbar. Was den ersten Teil betrifft: Das letzte von mir entwickelte Projekt hat ca. 80 kB CSS-Code. Es besteht aus einer einzigen Seite.

Fragen die Browser eigentlich bei jedem Aufruf das CSS neu ab oder bleibt's im Cache?

Genau wie bei *allen* anderen Ressourcen hängt dies (neben den Browser-Einstellungen) von den vom Server versendeten HTTP-Headern ab.

Cheatah

[derletztekick]

Hallo Cheatah,

meine .css ist nun fast 19kB gross.

niedlich.

Die von meiner Seite ist derzeit nur die Hälfte (~9kb) aber auf die Größe kam es ja nicht so an ;-)

Mit freundlichem Gruß
Micha

[Jonathan]

meine .css ist nun fast 19kB gross. Ok, mit diversen Modifikationen werde ich es noch auf 15kB druecken koennen. Frage: Wie gross sind denn so eure CSS' und was ist technisch "annehmbar"?

Ich denke, es gibt keine wirkliche Größenbegrenzung (jedenfalls nicht bei wenigen kb). Dennoch halte ich es für sinnvoll, die Dateien aufzuteilen. Erstens erleichtert es die Arbeit, wenn man die Auszeichnungen sinnvoll aufgeteilt hat wie in Textauszeichnung, Seitenlayout, IE-Hacks usw., zweitens muss der Browser so nicht alles neu runterladen wenn blos eine Anweisung in einer Datei geändert wurde.

Fragen die Browser eigentlich bei jedem Aufruf das CSS neu ab oder bleibt's im Cache?

Bleibt natürlich im Cache.

[Christoph Schnauß]

hallo,

Fragen die Browser eigentlich bei jedem Aufruf das CSS neu ab oder bleibt's im Cache?
Bleibt natürlich im Cache.

Bist du dir da wirklich sicher?

Grüße aus Berlin

Christoph S.

[Jonathan]

Bist du dir da wirklich sicher?

Naja. Auf seine Frageabsicht bezogen schon. Natürlich wird je nach Header, Alter und Browsereinstellung die Datei auch mal runtergeladen, aber normalerweise werden CSS-Dateien wie Bilder und das meiste andere auch gecached.

[Sven Rautenberg]

Moin!

Dennoch halte ich es für sinnvoll, die Dateien aufzuteilen. Erstens erleichtert es die Arbeit, wenn man die Auszeichnungen sinnvoll aufgeteilt hat wie in Textauszeichnung, Seitenlayout, IE-Hacks usw., zweitens muss der Browser so nicht alles neu runterladen wenn blos eine Anweisung in einer Datei geändert wurde.

Und ich halte es nicht für sinnvoll, das CSS aufzuteilen. Denn das vergrößert die zu übertragende Datenmenge teilweise doch erheblich, und außerdem vergrößert es die Serverlast.

Die Serverlast-Problematik ist schnell erklärt: Es ist für einen gut ausgelasteten Server unter Umständen schon ein Problem, plötzlich pro Seite noch einen, zwei oder drei Requests mehr zu verarbeiten.

Aber auch die Aufteilung in mehrere Dateien sorgt dafür, dass pro Schnitt mehr Daten übertragen werden müssen, und der Browser länger auf das Resultat warten muß. Denn HTTP ist ja nicht nur die Übertragung der reinen Nutzdaten (die werden durch die Teilung nicht mehr), sondern umfaßt immer auch einen HTTP-Header. Und der ist pro Datei nochmal rund 1 KB groß.

Wenn man eine 19-KB-Datei also in einer Datei überträgt, sind das zusammen 20 KB HTTP-Daten. In vier Stückchen wären es schon 23 KB - das sind, ohne Erweiterung des Nutzens, einfach mal 13% mehr Daten.

Außerdem ist die Wartezeit des Browsers zu bedenken: Ein Browser soll laut HTTP 1.1-RFC nur maximal vier gleichzeitige Verbindungen zu einem Server eröffnen, um darüber dann nacheinander alle Ressourcen einer Seite zu laden. Das bedeutet: Ein Request für EINE CSS-Datei ist viel schneller abgearbeitet (und läßt parallel noch Platz für das Laden von der HTML-Seite sowie zwei Bildern), als wenn das CSS aus VIER Dateien besteht (was neben der HTML-Seite alle drei übrigen Verbindungen auslastet, und man warten muß, bis eine davon frei wird, um den Request für die vierte Datei erst losschicken zu dürfen).

Sowas ist in Netzen mit hohen Bandbreiten und geringen Latenzzeiten natürlich irrelevant. Aber hat man immer solche idealen Bedingungen? Was ist mit Modemnutzern? GSM/UMTS? DSL (macht sicher keine Bandbreitenprobleme, aber die Latenzzeiten sind nicht unerheblich)?

- Sven Rautenberg

[Dieter Raber]

Hallo Sven,

deine Ausfuehrungen sind wie ueblich gut nachvollziehbar. Ich haette noch eine Nachfrage.

Ueblicherweise teile ich meine Stylesheets in 4, 5 Dateien ein, die in etwa den einzelnen Bereichen der Seite entsprechen. Diese importiere ich dann ueber ein weiteres Stylesheet. Vom Gesichtspunkt der Uebersichlichkeit aus ist das fuer mich auch eine gute Loesung, die ich nicht ohne weiteres aufgeben moechte.

Was wuerdest du denn davon halten, die einzelnen Dateien anstatt per CSS-import mit PHP zusammenzufuehren. Das wuerde zwar die Serverlast erhoehen, aber die Zahl der Requests herabsetzen.

Ist das in deinen Augen ein guter Kompromiss?

Gruß,

Dieter

[wahsaga]

hi,

Was wuerdest du denn davon halten, die einzelnen Dateien anstatt per CSS-import mit PHP zusammenzufuehren. Das wuerde zwar die Serverlast erhoehen, aber die Zahl der Requests herabsetzen.

Ist das in deinen Augen ein guter Kompromiss?

Klingt eher nach dem Eintauschen eines "Übels" gegen ein anderes.

Du könntest ja aber z.B. ein PHP-Script schreiben, welches die einzelnen CSS-Dateien "zusammenführt" - und dann wieder als _eine_ Datei auf dem Server ablegt, so dass du in deinen Seiten nur noch eine einzige, statische CSS-Ressource einbindest.
Dieses PHP-Script müsstest du dann nach einer Änderung in einer der Einzel-Dateien natürlich immer wieder ein Mal aufrufen - das erfordert bei Änderungen natürlich eine gewisse "Disziplin", daran zu denken.

gruß,
wahsaga

[MudGuard]

Hi,

Klingt eher nach dem Eintauschen eines "Übels" gegen ein anderes.

Du könntest ja aber z.B. ein PHP-Script schreiben, welches die einzelnen CSS-Dateien "zusammenführt" - und dann wieder als _eine_ Datei auf dem Server ablegt, so dass du in deinen Seiten nur noch eine einzige, statische CSS-Ressource einbindest.
Dieses PHP-Script müsstest du dann nach einer Änderung in einer der Einzel-Dateien natürlich immer wieder ein Mal aufrufen - das erfordert bei Änderungen natürlich eine gewisse "Disziplin", daran zu denken.

Noch eine Variante, die die "Disziplin" unnötig macht:

Falls das zusammengeführte CSS nicht existiert ist oder älter ist als alle Einzel-Dateien: erzeugen.
Dann durchreichen.

cu,
Andreas

[wahsaga]

hi,

Noch eine Variante, die die "Disziplin" unnötig macht:

Falls das zusammengeführte CSS nicht existiert ist oder älter ist als alle Einzel-Dateien: erzeugen.
Dann durchreichen.

Die Prüfung, ob älter als alle Einzeldateien, erfordert aber auch wieder einen Scriptaufruf bei jedem Request.

gruß,
wahsaga

[Sven Rautenberg]

Moin!

Ueblicherweise teile ich meine Stylesheets in 4, 5 Dateien ein, die in etwa den einzelnen Bereichen der Seite entsprechen. Diese importiere ich dann ueber ein weiteres Stylesheet. Vom Gesichtspunkt der Uebersichlichkeit aus ist das fuer mich auch eine gute Loesung, die ich nicht ohne weiteres aufgeben moechte.

Aus demselben Grund (Einfachheit für den Seitenautor) sind Frames beliebt. Das heißt ja aber nicht, dass das immer die beste Lösung ist. :)

Was wuerdest du denn davon halten, die einzelnen Dateien anstatt per CSS-import mit PHP zusammenzufuehren. Das wuerde zwar die Serverlast erhoehen, aber die Zahl der Requests herabsetzen.

Nacheinander ein paar Dateien aneinanderzukopieren ist ja kein Aufwand. Das Problem dabei ist aber: PHP setzt standardmäßig "bitte nicht cachen"-Header, die bei "normalen" CSS-Dateien fehlen. Im Resultat würdest du damit hervorrufen, dass die einzelne CSS-Datei jedes Mal neu abgerufen würde, während deine alte Variante ab der zweiten Seite aus dem Cache bedient wird.

Solch ein Zusammenkopieren wird also nur dann wirklich zu einer besseren Lösung (sowohl auf Seiten des Autors, als auch auf Seiten des Lesers), wenn man wirklich alles "richtig[tm]" macht.

Wer also anfängt, mit der HTTP-Header-Größe und der Requestzahl zu argumentieren, darf bei hilfreichen, trafficvermeidenden HTTP-Headern nicht aufhören.

Das wiederum macht es aber auf Serverseite kompliziert. Entweder bringst du die Disziplin oder den Extraaufwand auf, dein CSS jedesmal manuell zu einer einzigen Datei zusammenzukopieren (ein Editor mit Codefolding könnte dasselbe Resultat der Übersichtlichkeit auch ohne den Extraaufwand erzielen) - dann belastet das den Server absolut nicht, und das "LAST_MODIFIED" dieser Sammeldatei geht direkt in den Cachingmechanismus ein.

Oder du läßt ein Skript automatisiert zusammenkopieren - und mußt dann wegen des Cachings und der daraus resultierenden "IF_MODIFIED_SINCE"-Abfragen von Browsern feststellen, wann deine zusammenkopierte Datei denn tatsächlich das letzte Mal geändert wurde. Das ist überschlagsmäßig das jüngste Datum aller beteiligten Einzeldateien. Also prüfst du die Änderungsdaten aller Dateien bei jedem Requests, vergleichst mit der Datumsangabe von IF_MODIFIED_SINCE, und sendest fallweise ein Update, oder den "Cache ist noch gültig"-HTTP-Code (war 304, IIRC).

- Sven Rautenberg

[Gunnar Bittersmann]

Hello out there!

Was wuerdest du denn davon halten, die einzelnen Dateien anstatt per CSS-import mit PHP zusammenzufuehren. […] Ist das in deinen Augen ein guter Kompromiss?

Mit SSI zusammenzuführen wäre wohl ein besserer.

Das Problem dabei ist aber: PHP setzt standardmäßig "bitte nicht cachen"-Header

Trifft das auch auf SSI zu?

See ya up the road,
Gunnar

[Sven Rautenberg]

Moin!

Was wuerdest du denn davon halten, die einzelnen Dateien anstatt per CSS-import mit PHP zusammenzufuehren. […] Ist das in deinen Augen ein guter Kompromiss?

Mit SSI zusammenzuführen wäre wohl ein besserer.

Naja, die Performancebetrachtung würde ich noch nicht unbedingt für entschieden ansehen. SSI ist deutlich unflexibler wegen der eingeschränkten Befehlsmöglichkeiten, und erfordert deshalb Mehraufwand für eine Dateiendung "SSI-geparstes CSS", sowie eine Anpassung des dabei mitgelieferten Mime-Typs.

Das Problem dabei ist aber: PHP setzt standardmäßig "bitte nicht cachen"-Header

Trifft das auch auf SSI zu?

Man müßte es ausprobieren. Aber viel schlimmer ist: Wenn SSI das Caching nicht verhindert - wie kriegt der Browser (außer durch forciertes Neuladen) eine geänderte Dateiversion unverzögert ausgeliefert?

- Sven Rautenberg

[MudGuard]

Hi,

Denn HTTP ist ja nicht nur die Übertragung der reinen Nutzdaten (die werden durch die Teilung nicht mehr)

soweit es die Rulesets des CSS betrifft: ja.
Aber: die zusätzlichen CSS-Dateien müssen ja auch eingebunden werden - und diese Einbindung durch zusätzliche Link-Elemente im HTML oder @import-Regeln im CSS vergrößert das Nutzdatenvolumen.

cu,
Andreas