SCSS Above the fold, Einbindung im Seitenlayout

[Martin L.]

Hallo!
Ich habe meine SCSS-Dateien in einem Ordner abgelegt: reset.scss, grundeinstellungen.scss, header.scss usw. Eine Datei alle.scss fasst alle diese SCSS-Dateien mit Import-Regeln zusammen (so kann ich projektbezogen einzelne SCSS-Dateien einbinden oder ausschließen).
Diese Datei alle.scss ist wiederum im Seitenlayout bei »Externe Stylesheets« eingebunden. Contao übersetzt mir das SCSS in CSS und minimiert alles.

Dieses Vorgehen ist zu http/2-Zeiten nicht mehr optimal.

Mein Ziel ist es, alle.scss zu ersetzen durch above-the-fold.scss und later.scss.
Wie die Namen sagen, soll in above-the-fold.scss durch die Import-Regeln nur SCSS geladen werden, das beim Aufruf der Seite Einfluss auf den sichtbaren Bereich hat.

Eine gute Möglichkeit, dem Browser die Unterscheidung in wichtiges und später zu ladendes CSS nahezulegen, scheint (nach Recherchen) folgende Konstruktion zu sein:

<link rel="stylesheet" href="above-the-fold.css">
<link rel="stylesheet" href="later.css" media="print" onload="this.media='all'">

Der Browser lädt sich die Above-the-fold-Dateien und rendert die Seite, um sich die anderen Dateien dann nachzuladen.
Nun kann man SCSS ja nicht in HTML einbinden.
Da ich die Funktion von Contao schätze, das SCSS in CSS umzuwandeln und zu komprimieren, habe ich mich gefragt, ob man das Backend im Bereich Seitenlayout ändern bzw. erweitern könnte.

Neben der existierenden Möglichkeit, externe Stylsheets einzubinden, könnte ein neues Feld geschaffen werden, das es erlaubt, weitere Stylesheets einzubinden, die dann im folgenden Code münden:

<link rel="stylesheet" href="/pfad/later.css" media="print" onload="this.media='all'">

Also, zur Verdeutlichung: nach »Externe Stylesheets: Auswahl ändern« stelle ich mir eine Eingabe »Externe Stylesheets (lazy loading): Auswahl ändern« vor.

Wo kann man das ergänzen?

Danke herzlich schon mal für einen sachdienlichen Hinweis.

[neelix]

Ich denke, damit es in Contao aufgenommen werden könnte, musst du es als Feature Request auf GitHub einreichen.

Für dein Projekt sollte es über eine Templateanpassung möglich sein.

[lucina]

Ich bin nicht sicher, ob ich überhaupt Contao meine SCSS-Dateien kompilieren lassen möchte. Das kostet Rechenzeit, bringt nicht immer das gewünschte Ergebnis (vor allem, wenn man noch weitere Bibliotheken mit weiteren Abhängigkeiten integrieren möchte) und das gewünschte Above-the-Fold-Feature bekommst Du da ja auch nicht (und schon gar nicht automatisch).

Ich persönlich halte einen Workflow, bei dem ich a) lokal kompiliere b) meine Libraries dabei auch aktuell halten kann c) ein Above-the-Fold-CSS automatisch erkannt und erstellt werden kann und d) das Ergebnis dann sowohl als CSS-Datei als auch als Inline-HTML auf den Server gepusht wird für sinnvoller.

Just my 2 Cents.

[Martin L.]

Vielen Dank für Eure Antworten!

Ich denke, damit es in Contao aufgenommen werden könnte, musst du es als Feature Request auf GitHub einreichen.

Für dein Projekt sollte es über eine Templateanpassung möglich sein.

Was denkst du, welches template müsste angepasst werden? Genau da steh ich ja im Wald!

Ich bin nicht sicher, ob ich überhaupt Contao meine SCSS-Dateien kompilieren lassen möchte. Das kostet Rechenzeit, bringt nicht immer das gewünschte Ergebnis (vor allem, wenn man noch weitere Bibliotheken mit weiteren Abhängigkeiten integrieren möchte) und das gewünschte Above-the-Fold-Feature bekommst Du da ja auch nicht (und schon gar nicht automatisch).

Ich persönlich halte einen Workflow, bei dem ich a) lokal kompiliere b) meine Libraries dabei auch aktuell halten kann c) ein Above-the-Fold-CSS automatisch erkannt und erstellt werden kann und d) das Ergebnis dann sowohl als CSS-Datei als auch als Inline-HTML auf den Server gepusht wird für sinnvoller.

Just my 2 Cents.

Das ist sicher der gängige Weg, und vermutlich der beste. Ich muss prüfen, ob ich meinen Workflow umstelle. Ich entwickle meine Seiten bisher online, da ich es schätze, die einzelnen Schritte unter realen Bedingungen auf dem Server umzusetzen. Ich lasse immer wieder die PageSpeed Insights drüberlaufen und habe so gute Rückmeldungen für das, was ich da mache.
Ich gehe doch richtigerweise davon aus, dass die für die über Contao vorgenommene Kompilierung benötigte Rechenzeit nicht zu Lasten der Ladegeschwindigkeit geht, da der Server fertig kompiliertes und zusammengefasstes CSS aus dem Cache liefert? Bisher klappte die Contao-Kompilierung bei mir sehr gut, was aber sicher auch an meinem wenig kompliziertem Code liegt.
Ich vermute, bei der lokalen Kompilierung wird das CSS dann auch gleich komprimiert ausgegeben? Und das Above-the-Fold-CSS automatisch erkannt und erstellt werden kann, ist natürlich reizvoll. Ich muss bei den nächsten Projekten vielleicht wirklich meinen Workflow überdenken (müsste dann aber auf die o.g. Rückmeldungen verzichten).

[Martin L.]

Hm, hat keiner eine Idee, welches template ich wo und wie ändern muss, eine Spur dahin vielleicht ...? Oder geht es einfach nicht?

[Spooky]

$combiner = new Contao\Combiner();
$combiner->add('files/foobar.scss');
echo Contao\Template::generateStyleTag($combiner->getCombinedFile()); 

[Martin L.]

Danke!

Ich habe im fe_page.html5 am Ende des head-Bereiches ergänzt:

<?php 
$combiner = new Contao\Combiner();
$combiner->add('files/scss/_scss-later.scss');
echo Contao\Template::generateStyleTag($combiner->getCombinedFile()); 
?>

Er gibt mir auch das kombinierte CSS aus.

<link rel="stylesheet" href="assets/css/_scss-later.scss-b5fc1dff.css">

Nun müsste ich wohl noch die combiner.php ändern, um noch den gewünschten Teil

 media="print" onload="this.media='all'"

zu ergänzen. Ich habe die combiner.php nicht gefunden. Wo is’n die?

[Spooky]

Damit hat das nichts zu tun. In dem Fall musst du dir den Style Tag einfach selbst ausgeben lassen, anstatt Template::generateStyleTag zu nutzen.

[Martin L.]

Danke, Spooky!

Im fe_page.html5 ergänzt

<?php 
$combiner = new Contao\Combiner();
$combiner->add('files/scss/_scss-later.scss');
?>
<link rel="stylesheet" href="<?php
echo ($combiner->getCombinedFile()); 
?>
" media="print" onload="this.media='all'; this.onload = null">

gibt mir aus

<link rel="stylesheet" href="assets/css/_scss-later.scss-be70fdfd.css" media="print" onload="this.media='all'; this.onload = null">

Das ist schon mal schön und die Leistungsbewertung (mobile) bei 99 Punkten.

Lighthouse merkt (natürlich immer noch) an, dass Ressourcen den First Paint meiner Seite blockieren, nämlich meine begin.scss mit 300ms.
Ich werde mich mit der Antwort von lucina beschäftigen, die ja u.a. empfahl, das above-the-fold.css inline zu implementieren. Der von ihr beschriebene Workflow ist in der Umsetzung neu für mich und ich werde mich damit beschäftigen.

Danke noch mal an alle für ihre Beiträge!