SCSS Above the fold, Einbindung im Seitenlayout
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:
Code:
<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:
Code:
<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.