Turbocharge Your Jekyll Blog

5 minute read Updated

How to dramatically speed up your static blog.

The need for speed is upon us. Out of the box the speed of an Octopress site kinda drags. However, there are a number of things you can do to to speed it up without a complete overhaul. Learn how to turbocharge your Octopress blog.

Update 2016-11-22: You can find the open source Octopress version of this blog circa 2015 open sourced. Once you’re ready to move on from GitHub try Simple Websites with Jekyll and Docker. And, once you’ve nailed that approach, try going for PageSpeed 100 with Jekyll, S3 and CloudFront.

If you followed along with the above and are using something like S3 or CloudFlare to host your images you should be at or near a 90+ rating for both mobile and desktop on PageSpeed Insights.

PageSpeed tool screenshot

Optimize JavaScript

The first speed offender on a stock Octopress install is the JavaScript. The stock Octopress configuration does not include an asset pipeline to concatenate and uglify JS files, resulting in a greater number of external script requests. But we can remedy that without too much effort.

After a little digging I found some Rake tasks on Making Octopress Fast to handle combining and minifying JS files into a file called all.js, eliminating the need to include individual JS files. Incorporate the JS-related tasks into your Rakefile. While you’re at it, add the CSS related tasks as well — we’ll be using them later.

Note: The Rake tasks in the above article make use of but don’t mention a couple of NPM modules required to function. To get them working install Node or io.js and NPM, then install the dependencies:

npm install -g clean-css && \
npm install -g uglifyjs

Once the Rake tasks are functional you’ll be able to remove a few of the script tags from source/_includes/head.html as well as any asides or plug-ins making external script requests.

Tip: Use the async attribute on the script tag that loads all.js (move it to head.html) to mitigate script blocking and receive an instant bump in your PageSpeed score.

Now that we’ve combined JS files and squeezed down their size we’re ready to move on to the CSS. Bravo.

Optimize CSS

Like the JS in the section above, we’ll want to leverage Rake tasks to optimize the CSS. Use the CSS tasks previously copied into the Rakefile from the last section.

Once the CSS-related Rake tasks are incorporated into the Rakefile tweak the minify_css task, changing the assignment to output as shown here:

desc "Minify CSS"
task :minify_css do
  puts "## Minifying CSS"
  input = "#{source_dir}/stylesheets/all.css"
  output = "#{source_dir}/_includes/inline.css"
  system "cleancss -e -o #{output} #{input}"

This will create an include file called inline.css during the site generation process enabling us to inline the CSS inside the page’s head tag. Use the new include by updating head.html, replacing the link tag pointing at screen.css with the following:

<style>{{ "{% include inline.css " }}%}</style>

If the Rakefile is configured correctly and the NPM dependencies installed, the result will be a generated page with the CSS embedded inline within a style tag in the document. Sweet.

Note: Though an anti-pattern to check-in generated files inline.css must be checked into source control for the CSS inlining to function correctly.

Optimize images

To squeeze down your blog’s footprint even further, look at optimizing your images. Leverage PageSpeed Insights or an analytics tool to find the squeeky wheels.

For images which can be further compressed, leverage the following rake task (requires imagemin, which can be installed with npm install -g imagemin):

desc "Optimize Images"
task :optimize_images do
  puts "## Optimizing Images"
  Dir.glob("#{source_dir}/images/*.{jp,pn}g").each do |f|
    ext = File.extname(f)
    optimized_file = "#{File.basename(f, ext)}-optimized#{ext}"
    if test(?f, f) and not File.exists?(optimized_file)
      ok_failed system("imagemin #{f} > #{source_dir}/images/#{optimized_file}")

Alternatively you could optimize images manually with a GUI application like ImageOptim, though it’s a much more manual process and I’ve found the application may choke while compressing certain files.

After images are optimized ensure they’re efficiently delivered to the browser with a CDN and properly cached by looking for the Cache-Control and Expires headers in the HTTP response headers during asset fetching. If you’d like to use Octopress with Amazon S3 for image hosting check out my post titled Host Images on S3 With Octopress. Done and dusted.

Inline Web Fonts

The last major piece is handling the Web Fonts installed. If you’re using the Classic theme you should find two LINK tags in source/_includes/custom/head.html. Remove them both. It’s okay if the file is empty afterwards. Then inline the two ts using Data URIs. Then use this tutorial from SoSweet creative to produce base64-encoded fonts and drop them into sass/custom/_styles.scss like so:

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: normal;
  src: local('PT Sans'), local('PTSans-Regular'),
    url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAHowABMAAAAA+OAA) format('woff');
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: normal;
  src: local('PT Serif'), local('PTSerif-Regular'),
    url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAIQYABMAAAAA/MAA) format('woff');

This step should earn you around a 5 point bump in Page Speed but will typically slow down your website by increasing initial download size. Just so you know ;)~

And that’s all the big stuff.

Performance flotsam

Here are some other ideas to eke out a just a little more speed from your Octopress blog:

  • Still on GitHub Pages? Host Simple Websites with Jekyll and Docker on DigitalOcean for improved performance.
  • If you embed YouTube videos on your site the iFrames are slowing things down. Instead, generate video preview placeholder images using Responsive YouTube frames.
  • Reduce DNS look-up time for external requests using DNS prefetching. Leverage WebPageTest and ShowSlow to help pinpoint worst offenders.
  • Look through the CSS and Sass used and work on discarding unnecessary style rules.
  • Check out all these articles as they help influenced this post in one way or another.

In review

It’s likely much of this will no longer be necessary given the new Octopress asset pipeline for and Octopress 3 — which is coming. But until then enjoy these tips to turbocharge your Octopress blog.

Ledger Nano X - The secure hardware wallet