Exon

Hallo zusammen,

ich bin zur Zeit am überlegen wie ich unser internes Framework/CMS dazu bringe optimale Ladezeiten zu bringen. Aktuell bin ich bei dem Thema CSS und die Art und Weise wie es eingebunden wird.

Soweit ich bis jetzt gesehen habe gibt es einige sinnvolle Möglichkeiten sauber CSS zu übermitteln:

1) im Normalfall über externe CSS Files

- Ein Nachteil ist bei umfangreicheren Webseiten das man seine Dateien sehr weit splitten muss um nicht überflüssiges CSS zu laden.

Als Beispiel eine Haupt-CSS und 2 (bis x) andere CSS Files für verschiedene einzelne Bereiche.

Der Browser sendet also insgesamt 3 Requests an den Server, lädt die Dateien und verarbeitet diese.

- Der Vorteil ist die Ordnung beim verwalten. Auf die Ordnung könnte ich verzichten wenns um das letzte Quentchen Leistung geht.

Weiter werden soweit richtig eingestellt alle CSS Files gecacht und brauchen nicht dauernd abgerufen zu werden.



2) Soweit die Standard Vorgehensweise, ich bin nun durch Google Pagespeed darauf gekommen dynamisch CSS per PHP zu "sammeln" und in den Head einzufügen. Also nicht als externe Datei sondern als direkte Styledefinitionen.

Die Daten die IMMER ebenötigt werden, würde ich per festem dateipfad als normale einzelne externe Datei auslagern.

Die dynamische CSS-Integration hätte den Vorteil das ich wirklich genau nur die Style laden könnte die brauche ohne etliche Browserrequests zu generieren. Der gedankliche Hintergrund ist der, dass individuelle CSS Parts sowieso nur von einzelnen Seiten benötigt werden und sich daher ein Cachen nicht lohnt.


Soweit zum Thema. Mein Anliegen ist nun folgendes;
Ich weis nicht ob sich das überhaupt bemerkbar macht oder ob ich mir ein Gedankenkonstrukt zusammenspinne das am Ende Aufwand bedeutet und alles komplizierter macht.

Hat jemand Erfahrungen die er vielleicht posten kann ? Oder sogar ein paar Benchmarks/Statistiken ? Seht Ihr grundsätzliche Fehler in der zweiten Version oder habt ihr Verbesserungsvorschläge ?

Danke fürs lesen.

Mister Ad

Flor1an

Wirklich spüren wirst du wahrscheinlich keinen Unterschied. Ich denke am besten ist es wenn du deine CSS Dateien wie auch jetzt schon gesplittet hast und so deutlich angenehmer entwickeln kannst. Wenn du dann das Projekt auf den Produktionsserver schiebst kannst du alle CSS Dateien durch einen Minifier laufen lassen, der packt alle CSS Dateien zu einer zusammen und minimiert noch die Dateigröße (z.b. entfernt Kommentare, Leerzeilen/Zeichen und sonstige unnötigen Dinge). Somit hast du am Ende nur eine File die auch noch "relativ" klein ist, der Browser lädt diese einmal und danach liegt sie im Cache und es wird gar kein CSS mehr geladen.

Bei der Methode das der CSS Code IM HTML steht hast du eben das Problem das du mehr Datenübertragen musst (dauert länger) und das bei JEDEM Request, denn diese CSS Angaben kann der Browser eben nicht cachen.

Exon

Danke für deine Meinung Flor1an.

Ich schreibe vielleicht noch etwas mehr zum Umfeld:

- Css Dateien sind aktuell minimiert (semantisch, einzeilig, spaces entfernt, gzipped)

- HTML ist möglichst gekürzt (semantisch, unnötige spaces entfernt, gzipped)

- Cache ist per htacces auf eine Woche ingestellt (html und css). Es existieren keine dynamische Inhalte oder sich ändernde Inhalte. Sobald eine unterseite hinzugefügt wird ändert sie sich im Normalfall nicht mehr.


Bei dem "individuellen" CSS ist teilweise sich wiederholender Inhalt dabei, aber keiner der überall benötigt wird.

Ich denke der Knackpunkt wird sein:
4(oder mehr je nach projekt/unterbereich) Requests mit ca 10-20% ungenutztem Overhead aber voll gecacht

Oder

1 Request, kein CSS Overhead, dafür nur individuell gecacht bei genau der URL bei der er aufgerufen wird.

Entschuldigt falls die Frage bei ein paar ms unterschied spitzfindig wirkt, möchte nur alles was geht rausholen.

Das Framework wird bei fast allen unseren Umsetzungen für Kunden verwendet, und wenn ich hier einmal ein top lösung gefunden habe kann ich beruhigt auch in diesem Bereich "Usability" anpreisen.

Exon

Eine frage fällt mir dazu auch noch ein.

Wie verhält es sich mit gecachten Dateien, wird trotzdem ein Request an den Server gesendet um die aktualität/Dauer des Cache zu überprüfen ?

Oder wird sobald die URL browserintern bekannt und als gecached markiert ist direkt der Content der Datei übernommen ?

Laut Frebug wird aktuell trotzdem ein request durchgeführt, bin mir aber nicht sicher ob das zu debugging zwecken angezeigt wird.

ChrisB

Das kommt in erster Linie darauf an, welche Angaben zum gewünschten Caching-Verhalten du machst.

Wenn du den Server einen Last-Modified-Header mitsenden lässt, dann ist genau das das definierte Verhalten.

__________________
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

Exon

Hallo ChrisB, danke für den Hinweis.

Du hast vllkommen Recht: Aktuell wird für alle Files über

Header set Cache-Control "max-age=604800, proxy-revalidate"

der Gültigkeitszeitraum für Dateien auf eine Woche gesetzt. So wie ich das jetzt verstehe überprüft der Browser bei jedem Request das interne Dateialter und gleicht das mit dem höchstmöglichen erlaubten Datum - das vom Server vorgegeben wird ab.

Bei einzelnen Dateeien könnte ich mir nun vorstellen, das Sie nicht aktualisiert werden müssen, bzw keine dauernder Abgleich nötig ist -> zB. Das Favicon.


Gibt es auch eine Möglichkeit Dateien - ohne einen Request zum Server zu Senden - direkt aus dem Cache zu laden ?

Ich habe einige Tests mit Etags und dem LAst Modified Header gemacht aber ich blicke da noch nicht durch.