When creating landing pages, the same critical CSS wont always include the CSS you need to render the page. If you know that your above the fold content is going to be similar you can use a simpler, more generic approach.

The easy way.

Add a file in Jekyll's _includes folder called critical.css.

In the head of you document include the following snippet. This will include all the CSS in your critical.css in the head of each page.

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

The easy Sass way.

Use Scssify to inline critical Sass.

If you prefer to write Sass you can still use the _includes folder to inline your critical CSS. You'll need to use Liquid's capture tag and Jekyll's scssify filter. The scssify filter respects the Sass settings in Jekyll's _config.yml file so if it's set to compress Sass it will compress the critical CSS in the head of the document.

Create a Sass file in Jekyll's _includes folder and write some Sass. In the head of your document include the following snippet.

  <style type="text/css">
  
    {% capture critical %}
      {% include style.scss %}
    {% endcapture %}

    {{ critical | scssify }}
  
  </style>

Liquid's capture tag will store the string (in this case the Sass written the aforementioned file) as a variable that can be referenced later. This snippet: {{ critical | scssify }} will take the captured Sass and convert it CSS that is inlined in the head of the document. If the _config.yml is configured to compress Sass the inlined critical CSS will also be compressed.

The slightly more complex way that is way more fun.

Keep all of your Sass files in the same place and use Gulp (or any task runner) to output compiled CSS into the _includes folder.

You don't need to split up the Sass files into the _includes folder and the folder you keep the rest of the sites static assets. Instead you can have a task runner process the critical Sass files and place them in the correct folder for Jekyll to process at build time.

This Gulp task will compile all the Sass files in the specified folder and drop them in Jekyll's _includes folder. When Jekyll compiles the site it will follow the same process described above.

gulp.task('critical', function () {
    return gulp.src('src/sass/critical/*.scss')
        .pipe(sass({
            outputStyle: 'compressed',
            includePaths: ['scss']
        }))
        .pipe(gulp.dest('_includes/critical'));
});

The way to create page specific critical CSS.

Marketing sites or landing pages might need their own critical CSS.

If you have a simple blog or a marketing site that doesn't have a lot of visual changes you can probably get away with a single critical CSS implementation. But if you're creating a series of complex landing pages the critical CSS that works great on Page One might be utterly useless on Page Two. Using Jekyll's Front Matter you can create page specific critical CSS with a little extra code.

In Page A's Front Matter create a new variable called critical and assign it a value that will match the name of the compiled critical CSS file. So something like pageOneCritical.css.

---
layout: page
critical: pageOneCritical.css
---

You'll now need to modify the head of the template to react to this bit of Front Matter. You can use an if statement to look for the existence of the critical Front Matter and add it the the page when Jekyll compiles the site.

  
  {% if page.critical %}
   {% capture critical %}
    {% include critical/{{ page.critical }} %}
   {% endcapture %}
  {% endif %}

  <style>
    {{ critical }}
  </style>
  

This will tell Jekyll to check for the existence of the critical variable in the page's Front Matter. If it exists it will capture the compiled CSS that the Gulp task dropped in the _includes folder and inline in the <style> element.