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.
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“.
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.