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 penthouse

Mit 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>
         .highlight,h1,h3,p,pre,ul{margin-bottom:15px}.wrapper{max-width:-webkit-calc(800px - (30px * 2));max-width:calc(800px - (30px * 2));margin-right:auto;margin-left:auto;padding-right:30px;padding-left:30px}@media screen and (max-width:800px){.wrapper{max-width:-webkit-calc(800px - (30px));max-width:calc(800px - (30px));padding-right:15px;padding-left:15px}}.wrapper:after{content:"";display:table;clear:both}.page-content{padding:30px 0}.post-list{margin-left:0;list-style:none}.post-link{display:block}.highlight{background:#fff}@font-face{font-family:icons;src:url(/fonts/icons.eot?d30c1b80659ee9dba62c4125fe8fca0c);src:url(/fonts/icons.eot?#iefix) format("embedded-opentype"),url(/fonts/icons.woff2?d30c1b80659ee9dba62c4125fe8fca0c) format("woff2"),url(/fonts/icons.woff?d30c1b80659ee9dba62c4125fe8fca0c) format("woff"),url(/fonts/icons.ttf?d30c1b80659ee9dba62c4125fe8fca0c) format("truetype"),url(/fonts/icons.svg?d30c1b80659ee9dba62c4125fe8fca0c#icons) format("svg");font-weight:400;font-style:normal}.icon{font-family:icons;display:inline-block;vertical-align:middle;line-height:1;font-weight:400;font-style:normal;speak:none;text-decoration:inherit;text-transform:none;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon_Blue_and_yellow_ribbon:before{content:"\f101"}.icon_box_archive:before{content:"\f102"}.icon_glyphicons-28-search:before{content:"\f104"}.icon_glyphicons-66-tag:before{content:"\f108"}.icon_glyphicons-social-38-rss:before{content:"\f10c"}.icon_meisen-cam:before{content:"\f10e"}.icon_solar_pannel_solar_cell:before{content:"\f10f"}.icon_weather-station:before{content:"\f111"}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}header{display:block}a{background-color:transparent}img{border:0}pre{overflow:auto}code,pre{font-size:1em}button{color:inherit;font:inherit;margin:0}button{overflow:visible}button{text-transform:none}button{-webkit-appearance:button;cursor:pointer}button::-moz-focus-inner{border:0;padding:0}@media print{:after,:before{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.42857;background-color:#efefef}button{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#ff8f00;text-decoration:none}img{vertical-align:middle}.img-circle{border-radius:50%}h1,h3{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,h3{margin-top:22px;margin-bottom:11px}h1{font-size:35px}h3{font-size:28px}code,pre{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}pre{display:block;font-size:15px;line-height:1.42857;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.container:after,.container:before{content:" ";display:table}.container:after{clear:both}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.row{margin-left:-15px;margin-right:-15px}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}.col-md-9,.col-sm-3,.col-sm-9,.col-xs-6{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-6{float:left}.col-xs-6{width:50%}@media (min-width:768px){.col-sm-3,.col-sm-9{float:left}.col-sm-3{width:25%}.col-sm-9{width:75%}}@media (min-width:992px){.col-md-9{float:left}.col-md-9{width:75%}}.collapse{display:none}.nav{margin-bottom:0;padding-left:0;list-style:none}.nav:after,.nav:before{content:" ";display:table}.nav:after{clear:both}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.navbar{position:relative;min-height:50px;margin-bottom:22px;border:1px solid transparent}.navbar:after,.navbar:before{content:" ";display:table}.navbar:after{clear:both}@media (min-width:768px){.navbar{border-radius:4px}}.navbar-collapse{overflow-x:visible;padding-right:15px;padding-left:15px;border-top:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);-webkit-overflow-scrolling:touch}.navbar-collapse:after,.navbar-collapse:before{content:" ";display:table}.navbar-collapse:after{clear:both}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-fixed-top .navbar-collapse{padding-left:0;padding-right:0}}.navbar-fixed-top .navbar-collapse{max-height:340px}@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-top .navbar-collapse{max-height:200px}}.container>.navbar-collapse{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container>.navbar-collapse{margin-right:0;margin-left:0}}.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}@media (min-width:768px){.navbar-fixed-top{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-brand{float:left;padding:14px 15px;height:50px}@media (min-width:768px){.navbar>.container .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;margin-right:15px;padding:9px 10px;margin-top:8px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:22px}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:14px;padding-bottom:14px}}@media (min-width:768px){.navbar-right{float:right!important;margin-right:-15px}}.navbar-inverse{background-color:#607d8b;border-color:#4b626d}.navbar-inverse .navbar-brand{color:#fff}.navbar-inverse .navbar-nav>li>a{color:#fff}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse{border-color:#516a76}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:transparent;border:1px solid none;border-radius:4px}.visible-xs{display:none!important}@media (max-width:767px){.visible-xs{display:block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}#sidebar{height:100%;padding-right:0;padding-top:20px}#sidebar .nav{width:95%}@media screen and (max-width:767px){.row-offcanvas{position:relative;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;transition:all .25s ease-out}.row-offcanvas-right .sidebar-offcanvas{right:-41.6%}.sidebar-offcanvas{position:absolute;top:0;width:41.6%}#sidebar{padding-top:0}}ul{list-style:square inside}ul li{padding-left:1em;margin-bottom:.5em}body,h1,h3,p,pre,ul{margin:0;padding:0;color:#757575}p{margin:0 0 9px}body{padding-top:50px;padding-bottom:40px}.sidebar-nav{padding:9px 0}img{max-width:100%;height:auto}.hb-entry-title a{color:#757575;display:block;margin-top:10px;padding:0 0 3px;text-decoration:none}.widget-header{font-size:22px}.navbar-inverse .navbar-nav>li>a{font-size:20px}.navbar-brand{box-sizing:border-box;display:block;font-size:24px;color:#fff;font-weight:400;letter-spacing:.02em;line-height:1;position:relative}.widget-content{margin:5px 30px 30px;position:relative}.highlight pre{overflow-x:auto}.highlight pre code{white-space:pre}.highlight pre,pre{background-color:#f8f8f8;border:1px solid #ccc;padding:6px 10px;border-radius:3px}.navbar-toggle .icon-bar:nth-of-type(2){top:1px}.navbar-toggle .icon-bar:nth-of-type(3){top:2px}.navbar-toggle .icon-bar{position:relative;transition:all 500ms ease-in-out}
      </style>

Damit bin ich zu mindestens für den Desktop Bereich mit den von Google Pagespeed vorgeschlagenen Optimierungen durch.

page insights

29.8.15 Weitere Beiträge zu: jekyll grunt performance

Dies ist ein privater Blog von Hagen Bauer- berufstätiger Vater, Ehemann, Naturliebhaber, Läufer, Zelter, technikverliebt.


Creative Commons License
This blog is licensed under a Creative Commons License