Brett Jankord Front-End Software Engineer

Inline SCSS with Jekyll and Grunt

Inlining critical CSS as great way to improve the performance of your site, it reduces blocking CSS requests needed for the initial render. I recently added this functionality to my site and with the help of grunt, inlining CSS in Jeykll is fairly straight forward.

Grunt setup

To inline CSS in Jekyll, we will be compiling SCSS with grunt. This is mainly because we want to compile CSS into Jekyll’s include directory so that it can be included inside of a style tag in our layout template.

To get set up with grunt, check out their Getting Started guide. Once you have grunt set up for your Jekyll project, install grunt-contrib-sass:

npm install grunt-contrib-sass --save-dev

Below is a sample grunt file you can use to compile you SCSS into CSS.

module.exports = function(grunt) {

  // Project configuration
  grunt.initConfig({

    // SCSS compilation
    // Let grunt handle this so we can get a .css file and copy it into the _includes dir.
    // This allows us to include the .css file inline when jekyll builds out
    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          '_includes/critical.css': '_scss/critical.scss'
        }
      }
    }

  });

  // Load the plugin that provides the "sass" task.
  grunt.loadNpmTasks('grunt-contrib-sass');

  // Registered grunt tasks
  grunt.registerTask('default', ['sass']);
};

Jekyll Setup

Now that we are compiling a CSS file into Jekyll’s include directory, we can call that include in our templates. In the head of you document, add the following code to include you critical CSS inline.

<!-- Inline critical css -->
<style type="text/css">{% include critical.css %}</style>

Taking it a step further

One could take this a step further by using Filament Group’s loadCSS utility to asynchronously load the remaining CSS for your site. By inlining critical CSS and asynchronously loading the rest of your CSS, you’ll see a nice performance boost in the overall loading time of your site.

Additional resources