Not much coding went into Rival Fortress this week as I decided to give the website a facelift. It has been a while since I dabbled in web dev stuff, so it was fun to get up to speed with how the cool kids are “left-padding”.

Get ready for some buzzwords.

The web stack

I’m using Jekyll to generate the website. I think it’s one of the best static generators out there. It has sensible defaults and is sufficiently fast for my needs.

The luxury of having a static website also allows for fast and simple deployments: all you need is a webserver that can serve static files like nginx or Apache. I’m using Github Pages, as it’s essentially just a git push to get the site online.

The asset pipeline is handled by jekyll-assets as I’m a big fan of SASS and Coffeescript. I’m also using a Ruby plugin to generate Hogan JS templates and one for sprite-factory to generate image sprites.

Automating with Gulp

Build tools like Grunt and Gulp help automate tasks like image compression, and asset minification.

Gulp tasks that are part of the deployment process are:

• Autoprefixer and unused CSS selector remover
• Javascript, JSON, CSS and HTML minification
• Inlining of CSS stylesheets
• Image compression using pngquant, jpegtran and optipng
• Video encoding to MP4 and Webm using ffmpeg
• Uploading to Amazon S3 of encoded videos
• Pinging Google and Bing with the updated sitemap.xml

A full deploy starting from an empty folder takes about 10 seconds. Successive deploys are in the order of 1-2 seconds thanks to Jekyll’s --incremental flag and the fact that images don’t need to be re-compressed unless changed.

This is what a full deploy looks like:

Fast page load times

It’s easy to bloat even the simplest website by adding one too many Javascript libraries, forgetting to compress images, or embedding too many external resources.

Fortunately there are many tools that help us diagnose such problems, like Google’s PageSpeed Insights Webpage Test or Pingdom Website Speed Test.

The best ways to improve load times are:

• Compress images. Tools for image optimization is an excellent resource
• Minify and combine Javascripts and CSS files into bundles
• Remove unused CSS
• Inline essential CSS to render above the fold content or, for small websites, inline all your CSS
• Combine images into sprite sheets and use icon fonts like Fontawesome
• Use something like Turbolinks or pjax to increase responsiveness
• Use a CDN to deliver static content or signup for CloudFlare for a fast and easy solution

Here are the results from Google Pagespeed Insights when run on this website: