optimierung css-menge und requests der page

  • aloha, selten dass ich hier mal fragen stelle, aber heute isses mal wieder soweit :)

    folgendes szenario:
    es gibt eine homepage (selber programmierter webshop) es gilt ladezeiten zu verkürzen, http-requests zu sparen und css-files so aufzubereiten, dass es keinerlei probleme mit der darstellung gibt.

    der shop hat viele colorsets für verschiedene bereiche, die css-files werden bis dato minifiziert und es gibt ein generelles stylesheet und eins für die colorsets.

    durch die menge an farben in den einzelnen modulen ist die css-file schon über 180KB im minifizierten zustand, was probleme beim IE aufwirft.
    die olle kiste verträgt nach eigenen tests locker bis 170KB an css-files und maximal 31 css-files die direkt eingebunden werden. alles was diesen rahmen sprengt wird gnadenlos abgeschnitten und nicht verwertet

    jetzt hab ich gelesen, dass man die menge also die 31 files sprengen kann, wenn man eine import.css erstellt, die alle anderen sheets über
    @import: url('bla.css'); es heisst diese technik sollte auch http-requests minimieren, aber ich kannn das weder verstehen, noch nachvollziehen.

    denn wenn ich eine weitere datei abfrage, die dann ihrerseits 5 andere abfragt, dann hab ich ja 5 + 1 also 6 http-requests.

    gesucht wird jetzt eine lösung, wie man am besten die css-files spezialisiert, aber beim einbinden die http-requests minimiert und zusammenfassen von css-files geht eben nur bis maximal 170KB dateigröße.

    mein bisheriger ansatz: alles an css spezialisieren, dass man eine globale css hat und sonst nur noch spezifische und über einen cronjob wird einmal in der nacht ein export angestossen, der dann für alle nötigen bereiche vorher definierte css-files dynamisch erstellt und wie eine art cache vorhält.
    also sagen wir mal das modul damenwäsche benötigt die globalen styles, colorset 5 und 3 spezielle styles, dann wird daraus die damenwaesche.css durch die export-datei erzeugt und gleichzeitig noch eine haushaltswaren.css, die nur die globalen styles und auch die colorset3.css beinhaltet und eben alle anderen spezialisierten zusammenfassungen, alles auch jeweils minifiziert, um möglichst viel speicherplatz zu sparen.


    soo und nu ihr, :mrgreen:
    any ideas? oder ist meine idee schon der way to go?