Determine your critical CSS without Grunt or Gulp

Author: Joke De Winter

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?

Well, you can use various automated solutions involving Grunt and/or Gulp. You need to run terminal commands and set variables in obscure files. Which is fine if you are comfortable with that.

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.