Inlining critical CSS

Here a couple of test pages to see the effect of loading of critical CSS. Critical CSS was extracted using Penthouse.

Pure CSS Framework

Below are test pages based on Pure.

Before: Blog example

loadCSS: Optimised version with critical CSS inlined and loading the full CSS using Filament Group's loadCSS.

Footer: Optimised version with critical CSS and the full CSS in the footer.

Bootstrap CSS Framework

Below are test pages based on Bootstrap.

Before: Jumbotron example

loadCSS: Optimised version with critical CSS inlined and loading the full CSS using Filament Group's loadCSS.

Footer: Optimised version with critical CSS inlined and the full CSS in the footer.