The Easy Fix

Setting up your project in a way you can manipulate output is the first step. I’m not going to go into too much detail on project structure, but a solid workflow for web developers is to have a development folder with expanded content for editing and a production folder you can output, compress, and manipulate for performance. We’re using Node.js and Gulp in our example to achieve this format.

Once Node.js and Gulp are set up into your project, you can use the NPM (node package manager) library and search for a package titled “Critical” that can be added to your project Gulp file. We will use Critical to do all the heavy lifting, because it ensures exactly what Google requests. It extracts the CSS from the main file and injects it into the head of the HTML (above the fold).

Install Critical into your project and take a look at the output configuration options that come with Critical. Here is an example of how it could look in your project’s gulpfile.js file: