Jekyll: CSS Optimierungen "above the fold" mit Grunt
Bevor der Browser die Seite darstellen kann muss er die Formatierungen (CSS) und den Inhalt (html) der Seite im Speicher haben. Das bedeutet in den meisten Fällen das die Seite erst dann dargestellt wird wenn CSS und HTML Datei geladen sind.
Eine auch von Google empfohlene Möglichkeit ist das man die großen CSS Dateien erst am Schluss lädt und die für die Darstellung des sichtbaren Bereichs notwendigen CSS Information direkt in den HTML Bereich stellt.
Dann kann der Browser mit der Darstellung des sichtbaren Bereichs beginnen wenn er Formatierungen und Inhalt und der Rest wird nachgeladen.
So weit die Theorie. Die Frage ist nur “Welche CSS Formatierungen” brauche ich?”.
Wenn man Grunt verwendet gibt es hier ein Werkzeug das einem genau diese notwendigen CSS Anweisungen heraussucht.
Diese Beschreibung für meinen Jekyll Blog geht davon aus, das Grunt bereits installiert und konfiguriert ist.
Zuerst die Module installieren
sudo npm install grunt-penthouse --save-dev
sudo npm install penthouse --save-dev
vi Gruntfile.js
penthouse: {
extract : {
outfile : './_includes/critical.css',
css : './css/style.min.css',
url :'http://localhost:4000/',
width : 1200,
height : 500
},
},
grunt penthouseMit diese Anweisung wird Grunt angewiesen sich die URL anzusehen und für die Bildschirmgröße 1200 x 500 alle CSS Anweisungen aus der Datei css/style.min.css herauszusichen die man braucht und das Ergebnis in die Datei _include/critical.css zu schreiben.
Die Informationen aus dieser Datei importieren ich dann im Jekyll Build Prozess in meinen <head> Abschnitt
vi _includes/head.htm
<style>
{% include critical.css %}
</style>
Damit bin ich zu mindestens für den Desktop Bereich mit den von Google Pagespeed vorgeschlagenen Optimierungen durch.
