Mobile Performance durch Einbetten der benötigten CSS-Definitionen im Kopfbereich

Nutzbar ab: Version 13.x

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 (/IhrGlobalesProjekt/wGlobal/content/variables/default.wVariables.php)

<!-- ... -->
  <headline text="CSS-Optimierung"/>
  <!-- ... -->
  <variable description="Benötigte CSS-Definitionen im Kopfbereich einbetten" versionMin="13" key="embedOnlyUsedCss_active" type="char.yesno">yes</variable>
  <info versionMin="13">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 /IhrGlobalesProjekt/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''''/IhrGlobalesProjekt/wGlobal/content/variables/default.wVariables.php''wDoNotAdd') == 'yes' true false;

  
// ...

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG