Critical CSS in your Ghost theme development workflow

Google PageSpeed Insights is my go-to place If I want to quickly improve the performance of the website I am working on.

Chances are you've come across this at some point while using this tool

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

It can be confusing at first, but pretty easy if you think about it. It's basically the way your CSS and JavaScript are loaded on your web page.

Critical-CSS to the rescue

By default, your browser will hold up page rendering until it has finished downloading and parsing all the specified stylesheets in the head of your page.

If you have large CSS files, it will take a while to download, thus you'll have to wait (staring at a blank page or half broken page) for all the files to be downloaded so that the browser can render the page properly.

Luckily, we now have this cheeky method that can allow us to optimise our CSS delivery and therefore lessen the blocking.

The critical part of a web page is what the user is expected to see as soon as the page is loaded. For this part (above-the-fold content) to load properly, we need a small amount of CSS compared to loading a whole file. For the rest of the CSS, we can load them asynchronously. So there's nothing to worry about.

To illustrate an example of how it usually works, I will explain what I did while developing my current theme. If you're not aware I am a big fan of the Ghost platform.

It works like this:

  1. Extract the CSS needed for the above-the-fold content and load then inline in head
  2. Load your stylesheet asynchronously so that the rest of the page can keep on downloading and rendering the rest.

If you're using a JavaScript task-runner, there are a number of plugins out there than can help you to identify your critical css. In my case, I am using Gulp.

Tools:

  1. Gulp
  2. Penthouse
  3. LoadCSS

Addy Osmani created an online generator if you're into that sort of stuff and absolutely dread command-line.

Here goes

I import all of my Sass components into a styles.scss file. When ready, I run Penthouse on my minified stylesheet to identify my critical css.

gulp.task('penthouse', function () {
  penthouse({
    url: 'YOUR URL',
    css: 'PATH TO YOUR STYLESHEET',
    width: 320,
    height: 480,
  }, function (err, critical) {
		fs.writeFile('assets/css/critical.min.css', critical);
  });
});

As you have noticed, I am writing the output into a new file critical.min.css. I didn't want to have it directly in my default.hbs. Having this whole chunk of CSS there gives me anxiety. So, I have the following

gulp.task('copy-critical-css',function(){
	fs.readFile('assets/css/critical.min.css', {encoding: 'utf-8'},function (err, data) {
	  if (err) throw err;
	fs.writeFile('partials/critical.hbs','');
});

});

What it does is copy the content on my critical.min.css into critical.hbs. Then I just called my critical css in my default.hbs.

Next you just need to asynchronously load your CSS with the LoadCSS function.

Pretty easy, right?

If you're interested in my Ghost theme development work-flow, I'll soon put the repo on my Github. If you want to talk about Critical CSS or have other ways to build wicked fast websites, you can mail me. :-)

Humeira Diljore

Humeira Diljore

Developer, lives on a little island call Mauritius in the Indian Ocean. These days, can often be found battling monsters & running around Hyrule.

Read More