This site is run by Jekyll on GitHub pages and its CSS is built using SASS. Today I decided to boost performance even more inlining the render-blocking critical CSS, but even searching the internet I struggled to find an easy way to do it. This post is for you, in case you want to do the same.

Blurry, uncomprehensible and colored code

The critical style

In the critical SASS file, use the SASS @import directive to include all the partials that have an impact on the layout of your page. Also include your variables and mixins that might be required from the imported partials.

For instance, I’m importing:

  • the base partial, which contains the basic rules of the website like the CSS reset and the typography rules,
  • the layout partial, which styles the header and layout of the page,
  • the posts_above partial, which styles the above-the-fold part of the posts list and the post detail,
  • the utils partial, which contains some helper classes (e.g. visuallyHidden).

The posts_above partial initially was a single file called posts, but I decided to split it in two separate files to optimize even more. The other partial, named posts_below, contains information to style the post footer (the author section, the share button) so it’s not included here.

→ Create a critical.scss file inside the includes folder.

File: includes/critical.scss:

// Import partials for critical css content
@import "variables", "mixins", "base", "layout", "posts_above", "pages", "utils";

IMPORTANT: Place this file in the includes folder! You’ll need to include it in your HTML later.

Stick it in your head

Inline the critical CSS inside a style tag in the <head> section of your HTML. You can do that using the following Jekyll code, which is based on the Liquid template engine used in Jekyll.

→ Open your head.html partial if you have any.

File: includes/head.html:

{% capture critical %}
  {% include minima_critical.scss %}
{% endcapture %}

{{ critical | scssify }}

Also, it’s a good idea to preload the main.css file that will be served to your users later in time. Use the following code to render the link tag pointing to your main CSS file.

<link rel="preload" href="/assets/main.css" as="style">

The rest of your stylesheet

If your website is simple enough, you can import the rest of your partials inside a single SCSS file, which you will load asynchronously using JavaScript.

I for instance imported there all the SASS partials which style the page sections that are likely to appear below-the-fold:

  • the syntax highlighting style,
  • the footer style,
  • the pagination style,
  • the SVG icons style,
  • the iframes and tables styles

→ Put the rest of your SASS rules inside your regular CSS file.

File: assets/main.scss:

---
---

// Import partials for below-the-fold content
@import "variables", "mixins", "posts_below", "syntax-highlighting", "footer", "code", "pagination", "icons", "iframes", "tables";

IMPORTANT: The two lines with a triple dash at the beginning of the file are required by Jekyll to recognize and deploy the file as content.

Load the rest of CSS using Javascript

There are many ways to load the rest of your CSS using Javascript, but I’ve decided to write the script myself since it’s a very small portion of code.

→ Just before the closing body tag, load non critical CSS using JS:

File: default.html:

<!-- Non critical CSS -->
<script async>
  var href = "/assets/main.css";
  var link = document.createElement("link");
  link.setAttribute("rel", "stylesheet");
  link.setAttribute("href", href);
  document.documentElement.appendChild(link);
</script>
<!-- Fallback for disabled JS -->
<noscript>
  <link rel="stylesheet" href="/assets/main.css">
</noscript>

Conclusion

Inlining the critical part of your CSS makes your pages to display faster since CSS is in the browser’s critical rendering path.

Give it a try! If you have any comments, let me know in the comments section below!