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
Gulp tasks that are part of the deployment process are:
- Autoprefixer and unused CSS selector remover
- 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
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
The best ways to improve load times are:
- Compress images. Tools for image optimization is an excellent resource
- 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: