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.
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 .
(function(){var styles = document.querySelectorAll('link[rel=\'stylesheet\']'); for (var s = 0; s < styles.length; s++) {styles[s].mediax = styles[s].media;if (styles[s].media === 'only x') { styles[s].media = styles[s].mediax; } else if (styles[s].media !== 'print') {styles[s].media = 'only x';}}})(); This code switches all the remote styles and your CSSOM has only inline css!
Frankly these things doesn't matter if your are on fast connection but if you are on 2G,3G it does matter.