By Dennis Burger, Waddinxveen aug. 2014
This Grunt workflow task is using grunt-penthouse
and grunt-contrib-cssmin
plugins to extract Critical Path (above-the-fold content) Css from various URL's. This extracted Css can then be (re)inserted as embedded Css (using a HTML <style>
-tag) back into the HTML-head of the corresponding webpage.
Using a lazy-loading technique, the other Css files could be loaded into the HTML-DOM later by Javascript. This greatly speeds up the initial page rendering and perception of page speed.
Google PageSpeed Insights recommends inlining this Critical Path Css into the HTML page to stop Css rendering blocking issues in the webbrowser. Website performance (and initial page render speed) are more and more becoming a important search-engine ranking factor.