If you are familiar with Google PageSpeed you will know that loading a CSS file blocks the rendering of your page. It will tell you to inline critical elements of your CSS in the HTML. But how do you determine what CSS is critical for above-the-fold content?
I am not.
Instead I create my critical CSS using a CSS pre-processor. I use SASS, but the same method works for LESS and Stylus.
Inside a website folder you have a CSS folder. This contains your CSS files and a CSS pre-processor folder. The pre-processor folder contains a master file and a series of files with styles for elements and sections of your website. The master file imports the sections and element files.
To extract the critical CSS I create another master file and name it ‘critical’. The critical file only imports elements and sections files necessary to render the critical CSS above-the-fold.
And that’s it. Not as hardcore as using terminal, but it works. And it saves me time. I am a web designer, not a back-end developer geek.