Compressing HTML in Jekyll without a plugin



For a couple of years this site has been hosted on the excellent Squarespace, but it has always been on my to-do list to create something simple and static. Last week I took the plunge and everything is now up and running using Jekyll hosted on GitHub Pages.

I was keen on keeping the site as lightweight as possible, but I assumed some performance tweaks like minifying html would be impossible without plugins (which don’t work on GitHub hosted sites).

That changed when I stumbled across jekyll-compress-html, a jekyll layout that minifies HTML using pure Liquid, which means it works perfectly when building on GitHub Pages.

Using it is dead simple, simply download compress.html, save it in _layouts, and update your base layouts to reference it:

---
layout: compress
---

The compression behaviour is configured in _config.yml. The full set of options are detailed in the documentation, but mine looks like this:

compress_html:
  clippings: all
  comments:  ["<!-- ", " -->"]
  endings:   all

Digging into the source, the magic is achieved by capturing the content of the page into a variable

{% capture _content %}{{ content }}{% endcapture %}

followed by a bunch of string manipulation using split, remove and replace. For an example of the results you can view the source on this page.

This is a brilliant hack, and a great reminder of the power that Jekyll provides out of the box - you might not always need to reach for a plugin!