Faster Github Pages Hosted Jekyll

Jan 11, 2016

I have always been somewhat obsessed with performance. Most of the time it is on the side of backend. My website is one of the few projects I have that involve much more frontend than backend. In fact my website does not really have a backend at all. That being said, any optimization I wanted to make would be on the frontend.

The steps I took where:

Cloudflare

Github Pages sets all cache expiry header to be 600 seconds. I wanted to increase this given that my website is not constantly updated. The only way to do so was to set up Cloudflare, and use their more configurable cache timings. I set my expire header to be 4 hours, but with Cloudflare you can set it from 2 hours to 1 year.

Removing third-party resources

I was using Bootstrap and Font Awesome for styling, but quickly realized that they were bloat. A smaller personally website doesn’t need that much css. Bootstrap comes in at a whopping 22 KB compressed. That is bigger than all data loaded from my website combined. And since it was also a blocking resource, my website could not render until Bootstrap was finished loading. However, relatively speaking, Font Awesome was even worse in this situation. I only used three icons from Font Awesome and had to load 5 KB of data.

Simply rewriting my all the css on my website, I was able to skim down from 27 KB of css to 1.5 KB. I also did something unique with Font Awesome that I will explain later.

Turbolinks makes a website behave like a single page application. It uses clever javascript to make all links ajax-y.

Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body (or parts of) and the title in the head.1

I first stumbled across turbolinks through Rails. I was not sure if just dropping in the javascript file would work. Luckily it did. The only requirement is that you have to grab the .coffee file and compile it to javascript. This is easy enough with the coffee command that I installed through apt-get.

One option that is really useful before you compile is to enable transition cache. Normally, turbolinks caches versions of pages and uses them when you click the back button. Transition cache makes visiting any cached page instantaneous whether you click the back button or arrive there through another link.

To enable transition cache, change this line in the coffeescript:

transitionCacheEnabled  = true

Google Analytics would also need some tweaking. I recommending googling ‘turbolinks google analytics’ to help with that.

SVGs (and inline them)

I like svgs because they scale infinitely and look good at any resolution. Most of the time, they are also smaller than their raster equivalents. Why should you inline them though? Because it makes them part of the html file which reduces the number of requests for resources, and probably compresses better than a separate png.2 I mentioned that I did something unique with Font Awesome earlier. What I did was find svg equivalents to the three icons I used and inlined them. This made the icons load faster and also look much sharper.

Google Fonts reference

When choosing to use Google Fonts, there are three ways to import a font: html, css, or javascript. The ideal way is to directly put the reference in html. That is to pick the ‘Standard’ option on Google Fonts. It makes your html <head> a bit longer but it allows fonts to load concurrently alongside css, whereas the css @import method is blocked by loading css first, and the javascript version will not work if javascript is disabled.

Optimize CSS

Optimizing css is almost overkill because computers these days are incredibly fast and my website is incredibly small. The idea is to write better css selectors so the layout engine processes the styles faster. Mozilla provides many examples on MDN. I recommend reading it for anyone interested.

  1. github.com/rails/turbolinks ↩

  2. superuser.com/a/1013341 ↩