App developer

Keeping Jekyll Build Times Down While Minifying Files

PageSpeed Insights annoys the hell out of me. For a long time this website was sitting — harshly, I thought — with a score in the 60s. I had a few issues:

  • Cache-Control headers not being set on images
  • Render blocking CSS
  • Unminified CSS

I resolved the Cache-Control issue by adding headers to those files using gsutil.1 I’m happy to live with render blocking CSS but I’ve minimised its impacts by moving to asynchronous loading of webfonts from TypeKit, rather than Cloud.Typography’s CSS method. Minifying CSS turned out to be a bit trickier.

I initially implemented a minifier using the Jekyll Asset Bundler plugin. This worked perfectly except for one flaw: it added around seven seconds to the build time of the website. I found that to be unacceptable, so in my search for another solution that doesn’t impact performance I came across a node package called Minifier. Minifier is able to minify CSS without impact to performance but it does require a bit more work to integrate than the Jekyll plugin I was previously using.

Integrating with the Build Script

I build my Jekyll site using a build script, so my first decision was where I want to integrate Minifier in the script. I’ve decided to add it after the Jekyll build is complete:

echo "1. Build Site"
cd ~/blog
bundle exec jekyll build

echo "2. Minifying"
cd ~/blog/public/css
minify poole.css
minify lanyon.css
minify syntax.css

echo "3. Copying Minified CSS to site"
cp poole.min.css ~/blog/_site/public/css/
cp lanyon.min.css ~/blog/_site/public/css/
cp syntax.min.css ~/blog/_site/public/css/

echo "4. Committing"
git add .
git commit -m "Commit via Script"
git push 

Reducing the Number of CSS Files

Using this approach, build time remains constant, and steps 2 and 3 take no time at all. However, there’s one further optimisation I made: combining multiple CSS files into one and then minifying the combined file. Steps 2 and 3 are updated as follows:

echo "2. Minifying"
cd ~/blog/public/css
cat poole.css lanyon.css syntax.css > combined.css

echo "3. Copying Minified CSS to site"
cp combined.min.css ~/blog/_site/public/css/

This reduces the number of requests the browser needs to make to get my CSS files and comes with no performance hit during build.

SUCCESS: These little tweaks keep the build time of this site to around two to three seconds on a 2016 MacBook (m5 CPU) and as a result of the changes above, this site now has a 91/100 score for mobile and 97/100 score on desktop.

  1. Most of the static files for this website are hosted on Google Cloud Storage. I’d recommend this approach as it will help greatly in the event you ever migrate your site to a different platform. ↩︎