CSS nur laden wenn nötig? Seitenabhängig?
am 06.07.2011 - 14:17 Uhr in
Wie regelt ihre generell eure CSS Dateien? Per Default lädt Drupal ja im Prinzip erstmal alle stylesheets ein aus System-Core, Modulen und dem Template. Nun ist da ja oft viel Kram dabei, der für den jeweiligen Inhalt garnicht gebraucht wird, also bei größeren Seiten mit vielen Modulen und Stylesheets ein riesen Overhead der jedes mal mitgeladen wird. Das gleiche Problem gilt im Prinzip auch für .js Dateien. Der Code der Lightbox lädt jedes mal, auch wenn auf dem aktuellen Inhalt keine Lightbox zu sehen ist.
Wie kann man dem ganzen Herr werden? Mit Preprocess alles manuell rausschmeissen z.B. nach node-type etc? Gibt es ein sinnvolles Modul?
- Anmelden oder Registrieren um Kommentare zu schreiben

CSS-Aggregation und Caching
am 08.07.2011 - 15:49 Uhr
Drupal würde schon einige Möglichkeiten bieten, dynamisch CSS-Code oder gar andere (Sub-)Templates nachzuladen z.B. per Template-Funktionen oder netten Modulen wie z.B.:
http://drupal.org/project/CSS_Injector oder http://drupal.org/project/themekey
Aber das ist meiner Meinung nach nur interessant, um besondere Aufgaben zu lösen.
Dir scheint es aber darum zu gehen, ein paar Byte Code sparen zu wollen oder geht es Dir primär um die Steigerung der Performance?
Denn dabei sollte man insbesondere die Anzahl von Dateien und deren Größe reduzieren.
D.h. bei Grafik-Dateien wie, z.B. Aufzählungs-Bildchen und anderen Design-Elementen mit der CSS-Sprite-Taktik möglichst viele Grafiken in eine zu packen.
Aber insbesondere die wunderbare Technik der Aggregation und Kompression, die Drupal von Haus aus für CSS und JS mitbringt, kann man CSS und JS-Daten reduzieren in Größe und Anzahl.
Aus diesem Grund ist es kaum ein Problem, daß Drupal so viele CSS-Dateien in Core und Contrib-Modulen handhabt und auch ein CSS-Framework wie z.B. YAML mit seinen vielen CSS-Dateien noch fröhlich eingepackt werden kann.
Und da die meisten Browser-Benutzer mit Caching unterwegs sind, bringt dies enormen Performance-Gewinn: Der Browser lädt möglichst nur einmal eine CSS-Datei auf der ersten Seite der Website und hat dann alle CSS-Infos, die er im Folgenden auf anderen Seiten brauchen könnte. Das dies gut funktionieren kann, ist wohl der Grund, warum Drupal per Default auch alle CSS-Dateien einbindet. Man sollte aber nach Fertigstellung des Projekts auch die CSS-Komprimierung nutzen.
Wenn Du versucht 1-10 CSS-Befehle, die Du nur für einen Node-Typ benötigst separat laden zu wollen, wenn dieser Node-Typ aufgerufen wird, bringt Dir das bezüglich Performance eher einen Nachteil.
Auch wenn man CSS- und JS-Befehle nicht separat in Dateien ausliefert, sondern als Inline-Code, erhöht man die Größe der HTML-Datei, die erzeugt, übermittelt und gecached werden woll.
Vor allem sind viele CSS-Dateien ein Problem für den IE-Browser (siehe: http://drupal.org/node/228818). Folglich könnte ein Konzept zum selektiven Nachladen einzelner CSS-Dateien nach unterschiedlichen Kriterien auch diesbezüglich zu Problemen führen.
Insgesamt ist Caching und Komprimierung (z.B. GZ-Komprimierung) ein wichtiges Thema, das man in alles Ebenen von Drupal berücksichtigen sollte.
Stylestripper
am 08.07.2011 - 15:49 Uhr
Moin.
Generell unbenötigte Stylesheets kannst Du mit dem Modul [do:stylestripper Stylestripper] schonmal ziemlich einfach entfernen. Der Overhead minimiert sich gewaltig, wenn Du CSS- bzw. JS-Aggregation anschaltest und dann noch [do:css_gzip CSS Gzip] und [do:javascript_aggregator Javascript Aggregator] anschaltest.
Ansonsten füge ich eigene Stylesheets/Javascript-Dateien über preproces-Funktionen hinzu.
Erstmal vielen Dank euch
am 08.07.2011 - 18:17 Uhr
Erstmal vielen Dank euch beiden.
CSS und JS Aggregation ist mir bekannt und wird natürlich auch gern um nicht zu sagend zwingend genutzt. Interessiert hat mich in dem Zusammenhang aber genau das was auch Carsten Logemann angesprochen hat: Bringt es mir einen Vorteil in der Performance wenn ich die Stylesheets selektiver lade? Ich nehme an bei CSS-Aggregation wird das zu verschiedenen temporären CSS-Dateien führen die der Browser dann doch wieder einzeln neu laden muss. Klingt also logisch, dass das der Performance eher weh als gut tut.
Mir widerstrebt es nur innerlich stark wenn ganze JS Biblios geladen werden die ich nur auf einer bestimmten Seite brauche.
Zum Thema Gzip-Kompression habe ich mir Boost schon genauer angeschaut, was definitiv ein Hammermodul ist.
Die genannten anderen werde ich jetzt mal genauer unter die Lupe nehmen.
D.h. ihr beschränkt euch im wesentlichen auf Aggregation um CSS und JS zu optimieren.
In meinem konkreten Fall habe ich gerade ca 40 Stylesheets (Module und thematisch getrennte Theme-Dateien) in der Seite (weshalb ich jetzt auch erstmals auf das tolle IE-Problem gestoßen bin... man lernt nicht aus), da will ich natürlich möglichst perfekt optimieren.
mich würde auch mal
am 28.07.2011 - 01:26 Uhr
mich würde auch mal interessieren:
wie kann ich bestimmte stylesheets nur laden wenn man (als redakteur) eingeloggt ist?
es geht mir dabei nicht um die performance sondern um einen sauberen code.
ich beantworte mir die frage
am 28.07.2011 - 16:57 Uhr
ich beantworte mir die frage mal selber:
das geht mit $logged_in und $is_admin
<?php if ($is_admin): ?><?php print $scripts; ?>
<?php endif; ?>