CSS-Dateien werden mehrfach geladen

[auoa]

Ich melde mich hier, da meine Website mit dem Orlando Theme nach einer kurzen Analyse mit den Firefox-Entwicklertools einige Stylesheets mehrfach (doppelt/dreifach) lädt. Zum einem ist das natürlich unnötig, zum anderen schadet es der Rendering- und Lade-Zeit (auch wenn die Dateien im Cache liegen).
Meine Website nutzt Contao 4.5.4 mit Orlando 4.1.38.

Folgendes vorweg: Da die Haupt-CSS-Dateien (font-awesome, framework, customelements, styles, customize) des Themes direkt in das Template fe_page eingebunden sind, habe ich diese dort herausgelöscht und nur noch den Eintrag <?php echo $this->stylesheets; ?> stehen gelassen. Anschließend habe ich einzelnen CSS-Dateien per Theme-Konfig in Contao als externe CSS-Dateien hinzugefügt. Der Grund dafür ist, dass Contao die Styles auf diese Art mergen kann, was die Serveranfragen deutlich reduziert. Siehe Bild 1.
Auszug aus dem neuen Header der fe_page

<link rel="stylesheet" type="text/css" media="screen" href="<?php
     $objCombiner = new Combiner();
     $objCombiner->add('files/cto_layout/scripts/swiper/swiper.min.css');
     $objCombiner->add('files/cto_layout/scripts/mmenu/jquery.mmenu.all.css');
     $objCombiner->add('files/cto_layout/scripts/jquery.mb.YTPlayer/css/YTPlayer.css');    
     $objCombiner->add('files/cto_layout/scripts/isotope/isotope_styles.css');    
     $objCombiner->add('files/cto_layout/scripts/rs-plugin/css/settings.css');
     echo $objCombiner->getCombinedFile();
?>">
        
<?php echo $this->stylesheets; ?>
<?php echo $this->head; ?>

An dieser Stelle wird das erste Mal deutlich, dass die CSS-Dateien deutlich mehr als einmal geladen werden.
Mein erster Fix ist eine Änderung in der Datei .../modules/pct_iconpocker/templates/be_iconpicker.html5, hier habe ich den Eintrag <?php echo $this->stylesheets; ?> in Zeile 42 auskommentiert. Mit Erfolg, da $this->stylesheets wohl die global definierten Stylesheets direkt noch einmal lädt, was wohl nicht dem gewünschten Verhalten entspricht.

Leider scheint es noch weitere Stelle zu geben, an denen Style-Dateien geladen werden, anscheinend auch per JS, wie der Auszug aus Firefox zeigt. Da ich mich im Theme zu wenig auskenne, hoffe ich auf diese Weise Hilfe zu bekommen. Bild 2 zeigt das aktuelle Ladeverhalten von CSS-Dateien nach meinem ersten Fix. Die angezeigte style.css, welche 3x geladen wird ist .../modules/pct_revolutionslider/assets/css/styles.css.

[Tim]

Die Themes sind so konzipiert, dass alle Daten im fe_page Template eingebunden werden und keine weiteren Daten (ausser ergänzend) über die Seitenlayouts geladen werden müssen. Hier entsteht nun natürlich eine Dopplung. In den Auslieferungs-Seitenlayouts ist dies nicht der Fall.
Module wie der Revolutionslider oder Autogrid kümmern sich selbstständig um benötigten Dateien. Diese werden eingebunden, wenn benötigt (einmalig). (Dieses Verhalten sollte nicht unterbunden werden)

[auoa]

Wo soll nun die Dopplung entstehen, das verstehe ich nicht ganz. Ich habe die CSS-Files font-awesome, framework, customelements, styles, customize aus dem fe_page raus geschmissen und diese einfach als externe CSS-Dateien in Contao unter den Theme-Einstellungen eingerichtet. Die machen ja auch keine Probleme.
Warum nun revolutionslider sein style.css 3x lädt, sehe ich damit nicht geklärt. Es sieht für mich so aus, als ob echo $this->stylesheets; teilweise innerhalb der richtigen Klassen, manchmal aber auch außerhalb aufgerufen wird und damit die globale Vervielfachung der Styles erzeugt.
Ich teste jetzt mal weiter und melde mich wieder.

[Tim]

Verglichen mit der Online-Demo (Auslieferungszustand des Themes) wird alles nur einmal geladen: http://preview2.premium-contao-theme.../homepage.html

[auoa]

Ein paar weitere Recherchen haben jetzt nun wohl zu der Auflösung des Rätsels geführt. Und zwar:
Ich habe mir das Ladeverhalten mit den Entwickler-Tools von Firefox 59 (64 Bit) angeschaut. Hier scheint es (wieder) den Bug zu geben, das insbesondere Stylesheets mehrfach angezeigt werden.
Siehe stackoverflow.com/questions/41529386/multiple-get-requests-for-the-same-css-file-in-firefox-inspector
Der Bug wurde schon einmal behoben und scheint nun wieder Probleme zu machen: bugzilla.mozilla.org/show_bug.cgi?id=1306892

Das mehrfache Laden von Stylesheets ist folglich KEIN Fehler des Themes, sondern nur ein Anzeigeproblem in Firefox.
Wenn man den Netzwerk-Tab der Entwickler-Tools per Strg+Shift+E aufruft, tritt dieser Fehler nicht mehr auf.

Nichtsdestotrotz sehe ich das gleiche Verhalten von mehreren identischen Stylesheets beim Datenaustausch auch in Edge, was mich immer noch etwas verwundert. Entweder wurde hier schlecht von Mozilla abgeschrieben oder ein ähnlicher Fehler gemacht...

Abschließend möchte ich mir trotzdem als Feature wünschen, dass die Styles und JS-Dateien von Modulen auch den jeweiligen Combinern zugeführt werden. Der Befehle echo $this->stylesheets; führt nur zu dem einfach einbinden der einzelnen Dateien per Link. Eine kombinierte Datei wäre toll.

[Tim]

$this->stylesheets ist keine Funktion des Themes, sondern von Contao selbst. Ich persönlich hätte hier lieber einen Array als Ausgabe als einen String, aber das wäre ein Issue bei Contao, was unter gegebenen Enticklungsstand von Contao niemand berücksichtigen würde.

Das Verhalten der Module kann individuell manipuliert werden. Die Module laden über Globalen. Dies ist aber eine Art der Manipulation, die ich nur erfahrenen PHP Entwicklern aufzeigen würde bzw. diese finden es ohnehin selbst heraus, da es die gesamte Seite lahm legen kann.