Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Themes & Theming ›

CSS nur laden wenn nötig? Seitenabhängig?

Eingetragen von GevatterTod (85)
am 06.07.2011 - 14:17 Uhr in
  • Themes & Theming

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?

‹ Fragen zum Theme Bartik (gelöst) Reiter im Profil ausblenden? ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

CSS-Aggregation und Caching

Eingetragen von C_Logemann (912)
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.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Stylestripper

Eingetragen von stBorchert (6003)
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.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Erstmal vielen Dank euch

Eingetragen von GevatterTod (85)
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.

  • Anmelden oder Registrieren um Kommentare zu schreiben

mich würde auch mal

Eingetragen von eismannn (56)
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.

  • Anmelden oder Registrieren um Kommentare zu schreiben

ich beantworte mir die frage

Eingetragen von eismannn (56)
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; ?>

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • für drupal11 ein Slider Modul
  • [gelöst] W3CSS Paragraphs Views
  • Drupal 11 neu aufsetzen und Bereiche aus 10 importieren
  • Wie erlaubt man neuen Benutzern auf die Resetseite zugreifen zu dürfen.
  • [gelöst] Anzeigeformat Text mit Bild in einem Artikel, Drupal 11
  • Social Media Buttons um Insteragram erweitern
  • Nach Installation der neuesten D10-Version kein Zugriff auf Website
  • Composer nach Umzug
  • [gelöst] Taxonomie Begriffe zeigt nicht alle Nodes an
  • Drupal 11 + Experience Builder (Canvas) + Layout Builder
  • Welche KI verwendet ihr?
  • Update Manger läst sich nicht Installieren
Weiter

Neue Kommentare

  • melde mich mal wieder, da ich
    vor 1 Woche 3 Tagen
  • Hey danke
    vor 1 Woche 3 Tagen
  • Update: jetzt gibt's ein
    vor 1 Woche 4 Tagen
  • Hallo, im Prinzip habe ich
    vor 2 Wochen 1 Tag
  • Da scheint die Terminologie
    vor 2 Wochen 2 Tagen
  • Kannst doch auch alles direkt
    vor 2 Wochen 6 Tagen
  • In der entsprechenden View
    vor 2 Wochen 6 Tagen
  • Dazu müsstest Du vermutlich
    vor 2 Wochen 6 Tagen
  • gelöst
    vor 5 Wochen 2 Tagen
  • Ja natürlich. Dass ist etwas,
    vor 5 Wochen 3 Tagen

Statistik

Beiträge im Forum: 250233
Registrierte User: 20450

Neue User:

  • Mroppoofpaync
  • 4aficiona2
  • AppBuilder

» Alle User anzeigen

User nach Punkten sortiert:
wla9461
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3857
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 18 Gäste online.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association