Above-the-Fold CSS & JS mit TYPO3 richtig optimieren

Wer heutzutage eine neue Website erstellt und diese nach neusten Standards und Techniken optimieren möchte, kommt am Google Page Speed Tool nicht vorbei. Dabei fällt auf, dass das Tool des Platzhirsches relativ viel Wert darauf legt, CSS und JS Daten, die nicht im Sichtbereich beim Aufruf der Seite liegen, am Ende des Dokumentes zu laden. Das heißt, Daten die nicht benötigt werden, um den sofort sichtbaren Bereich darzustellen, sollen später nachgeladen werden. Dabei bedeutet später natürlich: Sofort nachdem das eigentliche HTML Dokument geladen wurde. Da es beim Nachladen durchaus zu einer kurzen sichtbaren Darstellung ohne geladene Stylesheets kommen kann, werden die Stylesheets, die für die Darstellung des sichtbaren Teils zuständig sind, weiterhin im <head>-Bereich geladen – allerdings nicht wie üblich als externe Datei, sondern direkt als Inline-CSS.

TYPO3 Extension Scriptmerger

Mit der Extension Scriptmerger lassen sich alle JavaScript und CSS Dateien zusammenfassen – und genau das möchten wir. Wichtig für uns: Durch folgende Konfigurationsparamter können wir die Extension anweisen, die erstellten und zusammengefassten Daten nicht wie üblich im Kopf, sondern ganz unten am Ende des Dokumentes einzubinden.

plugin.tx_scriptmerger {
	javascript {
		mergedHeadFilePosition = </body>
	}
	css {
		mergedFilePosition = </body>
	}
}

Above-the-Fold CSS in den <head> einbinden

Als erstes sollte erwähnt werden, dass alle via page.includeCss eingebundenen CSS Dateien nun durch Scriptmerger an das Ende des Dokumentes gepackt werden. Deshalb brauchen wir eine effektive Methode unser Above-the-Fold CSS Inline in den Header zu bekommen. Dafür eignet sich folgendes TypoScript:

page {
  headerData {
    # Inline CSS
    10 = TEMPLATE
    10 {
      stdWrap.wrap = <style type="text/css">|</style>
      template = FILE
      template.file = fileadmin/templates/css/abovethefold.css
    }
  }
  
  # CSS-Dateien
  includeCSS {
    mainCss = fileadmin/templates/css/main.css
	...
  }
}

Eine externe CSS Datei wird ausgelesen, in Style-Tags verpackt und in den Head eingebunden. Für uns ist das eine wunderbare Möglichkeit, denn wir haben unser CSS im Head wie wir es benötigen (Inline), um das Laden nicht zu blockieren und wir haben dennoch eine externe CSS Datei die für Ordnung sorgt.

Die abovethefold.css anpassen

Nun müssen wir alle CSS Anweisungen aus unseren „normalen“ CSS Dateien, die für die Darstellung des Sichtbaren Teils zuständig sind, in unsere abovethefold.css packen. Das kann man zum Beispiel auch kurzerhand leicht prüfen indem man andere CSS Dateien auskommentiert. Der sichtbare Teil sollte nur durch die abovethefold.css – zumindest nahezu ganz – dargestellt werden können. Im Falle von Responsive Design, denkt bitte auch an die entsprechenden Media-Querys für die mobilen Geräte – auch diese müssen übernommen werden.

Was ist mit JavaScript?

JavaScript kann genau auf die gleiche Art und Weise eingebunden werden. Allerdings ist das recht selten nötig, da heute ohnehin nahezu alle JavaScripts erst arbeiten, nachdem die entsprechende Library (zum Beispeil jQuery) geladen ist.

Vorteile / Nachteile

Ein Vorteil ist sicherlich das schnellere laden und rendern der Seite und vor allem, dass Google der Meinung ist, dass die Seite gut optimiert ist (könnte sich sicherlich positiv auf das Ranking auswirken). Der Nachteil ist, dass das Inline-CSS bei jedem Aufruf im HTML Dokument mitgesandt wird und damit die Dokumentgröße selber zunimmt (ansonsten holt sich der Browser ja die externen Daten aus dem Cache). Allerdings sind zwei, drei oder vier Kilobyte mehr im Zeitalter von 100 MBit und LTE Verbindungen nicht wirklich viel.

Bewerte diese Seite

 
 
 
 
 
 
 
Bewerten
 
 
 
 
 
 
18 Bewertungen
96 %
1
5
4.8
 

Veröffentlicht von

Kevin Lieser

Kevin Lieser

Kevin Lieser ist ausgebildeter Mediendesigner und seit 2008 mit der TYPO3 Agentur KA Mediendesign unternehmerisch tätig. Seine Leidenschaften sind gutes Webdesign und die PHP Programmierung. Als App Entwickler und Autor mehrerer TYPO3 Extensions engagiert er sich aktiv für die Weiterentwicklung von Webapplikationen und mobilen Anwendungen.

  • Peter

    Das ist alles irgendwo gut und schön, aber für mich bzw. uns als Agentur völlig unpraktisch.
    Wir setzen ein eigenes Class-based CSS-Framework ein. Da kann ich nicht einfach sagen, dass dieser Bereich in der CSS explizit nur „Above-the-fold“ betrifft.
    Die Klassen ziehen sich von Zeile 1-3000 beispielsweise. Somit müsste ich dann gleich die komplette CSS Inline anzeigen.
    Schade das Google hier mit dem PageSpeed diesen Schritt geht. Im Chrome ist noch der alte PageSpeed drin, dort wird bei 1 geladenen CSS-Dateien kein Fehler gebracht.
    Letztlich ist das für mich auch logischer, denn Inline muss mit jeden Aufrufen geladen werden. Die CSS-Datei bleibt dagegen im Cache.

    Trotzdem danke für den Beitrag und gut zu wissen, wie es trotzdem funktionieren „könnte“.

  • jemois5

    Hallo,
    Css für „Above the fold“ kann man ja auf sitelocity.com generieren und dan einfach copy/paste. Die combinieren auch alle css Dateien und erzeugen eine neue css Datei.
    Du findest dort auch die Code um CSS ‚after the initial page load‘ zu laden.