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:
- using cloudflare for increasing cache ttl
- removing third-party resources
- using inline svg when possible
- moving google font references to html
- optimizing css
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.
coffee command that I installed through
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
<head> a bit longer but it allows fonts to load concurrently alongside css, whereas the 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.