I am using gulp as our build system and LESS as CSS pre-processor. How do I extract only the "Above the fold CSS" and inline it? Does it give significant performance boost? What if someone is using a CDN for CSS delivery - In that case how crucial is inlining critical CSS?
Thanks guys.
Mayank Chandola
Use this tool to inline critical css . If you are using Bootstrap , Foundation etc make sure that you remove unnecessary css. Franlky I'm not a fan of Bootstrap , Foundation as most of the css in these frameworks is not used by designers. Most people use them for grid-system and responsiveness but after flexbox everything has become easy.
Use this tool to remove unused css.
Why inline critical CSS?
If you want something on screen on first render/paint you need to have some css for above the fold content. You don't want to rely on 330kb of framework css for first paint which will load after sometime .
Type this in your console to check how your page look without remote styles . Your above the fold content should look good enough .
This code switches all the remote styles and your CSSOM has only inline css!
Note : Make sure you don't inline a lot of css it will make your page load slow . Make sure your html is <40k gzipped.
Frankly these things doesn't matter if your are on fast connection but if you are on 2G,3G it does matter.