Mobile Performance durch Einbetten der benötigten CSS-Definitionen im Kopfbereich
Veröffentlichungsdatum: 25. Juni 2018
Änderungsdatum: 27. Mai 2021
weblication cms performance mobile css kopfbereich head
Version 13: Durch Einbetten der benötigten CSS-Definitionen im Kopfbereich werden Seiten auf mobilen Geräten in der Regel schneller nutzbar, da beim ersten Aufruf nicht die ganze CSS-Datei vor der Darstellung geladen werden muss.
In dem Fall werden also nur die notwendigen CSS-Definitionen direkt in die Seite eingebettet und die restlichen am Ende der Seite über die CSS-Datei geladen. Analysetools, wie PageSpeed Insights oder das neuere und deutlich leistungsfähigere Lighthouse, welches inzwischen in Chrome enthalten ist, machen deutlich, dass CSS dadurch keine das Rendern blockierende Ressource mehr darstellt.
In BASE Classic oder Mobile First Projekten können Sie die ab Version 13.x durch Anpassen der pre.php erreichen (welche auf eine Konfigurationseinstellung der Projektkonfiguration zurückgreift). In aktuellen Projekten finden Sie dies bereits wie nachfolgend aufgezeigt umgesetzt.
Beispiel: Auszug aus der Projektkonfiguration (/[IHR-LAYOUT-PROJEKT]/wGlobal/content/variables/default.wVariables.php)
<!-- ... --> <headline text="CSS-Optimierung"/> <!-- ... --> <variable description="Benötigte CSS-Definitionen im Kopfbereich einbetten" key="embedOnlyUsedCss_active" type="char.yesno">yes</variable> <info>Dadurch werden Seiten auf mobilen Geräten in der Regel schneller nutzbar, da beim ersten Aufruf nicht die ganze CSS-Datei vor der Darstellung geladen werden muss.</info> <headline text="JavaScript-Optimierung"/> <!-- ... -->
Beispiel: Auszug aus der /[IHR-LAYOUT-PROJEKT]/wGlobal/scripts/pre.php
// ...
// Nur die benötigten CSS-Definitionen werden im Kopfbereich eingebettet, was zu schnelleren Ladezeiten führt. (ab Version 13)
$preVars['embedOnlyUsedCss'] = wVariables::getValue('embedOnlyUsedCss_active', '', '/[IHR-LAYOUT-PROJEKT]/wGlobal/content/variables/default.wVariables.php', 'wDoNotAdd') == 'yes' ? true : false;
// Falls nur die benötigten CSS-Definitionen im Kopfbereich eingebettet werden, lässt sich hier angeben, wieviele Inhaltsbereiche berücksichtigt werden sollen. Ist kein Wert definiert werden die ersten zwei Inhaltsbereiche berücksichtigt.
$preVars['embedOnlyUsedCssLimit'] = 2;
// ...
Hinweis
Das CSS wird nur beim ersten Aufruf im Head eingebettet. Ab dem zweiten Aufruf wird dies über die bestehende Session eingebunden und ist daher nicht mehr im Quelltext ersichtlich.