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.