Boosting Web Performance

One of the areas of front end development I’ve really got into in the last year or so is performance. It’s always been there in the background (along with SEO and accessibility) but it seems to have a lot more focus in the web community lately.

For a while I’ve been looking at different ways to speed up various sites I work on. This site has given me a perfect guinea pig for trying out some different techniques. Let’s give it a boost! Oooosh!

Static

My first idea for making this site super fast to load was to make all of the pages static. I started off by just making a few pages but soon realised that as things grew and I wanted to make design changes it just wasn’t scalable. It was fast though. If I was building a simple site with only a handful of pages this is the way to go.

Jekyll

To try to get the best of both worlds, static for speed and CMS for convenience, I moved on to using Jekyll, a static site generator. After jumping through a lot of hoops I got it set up. It works really well and if you’re planning to update a site from a single machine I’d say this is the perfect solution.

WordPress

For various reasons I moved back to good old uncle WordPress. It’s so easy to update from anywhere, which means I actually do it, plus I feel that it’s become so big in the web industry (almost its own industry) that I can’t really afford not to know my way around it.

So, my new challenge is to make my WordPress site fast. There are various well renowned caching plugins, e.g. W3 Total Cache, which would effectively turn my PHP into static pages. Unfortunately, these don’t seem to work with my multisite setup so I’ve tried something different.

Cloudflare

I’ve routed my site through Cloudflare. It’s a website fronting service which aims to improve performance and security. They host your site on various servers around the world so you get the benefits of a CDN – fast delivery to far flung parts of the world. They concatenate and minify static files for you – one less job. They also handle security threats and high spikes in traffic so your site doesn’t go down. As if that wasn’t enough, they also serve your files over https – cheaper than SSL hosting and great for SEO.

So far so great. Definitely worth a look on top of whatever other optimisations you’re doing. :)

Website Redesign – chrissmith.xyz

Over the last couple of months of 2015 and the start of 2016 I decided to redesign this site. There wasn’t anything particularly wrong with it before from a user’s point of view but from an author’s point of view I felt I could do better.

The site was built using Jekyll, which is a static site generator. You make changes on your local machine and everything gets rebuilt as static files. This is great for performance as static pages are much faster. The downside for me was that it meant only being able to publish blog posts or pages from that one machine. #firstworldproblems :)

My biggest issue with having my own site is giving it the love it deserves. Making time to write content is definitely the number one blocker for me. If I could make it as easy as possible to write content from multiple devices that would go a long way to making it work for me. I decided to go back to good old WordPress.

I now publish from my laptop as before but, as it’s all web based, I can just log on anywhere and write a draft. The Amazon Fire tablet (forked Android) has a WordPress app which allows me to write locally and sync at my convenience. I don’t think I’d really choose to write blog posts from my phone but if I ever needed to make a change, e.g. spotted an embarrassing typo, I could.

As a developer using something built on PHP and MySql is nowhere near as cool as Ruby and no database but who actually cares. Loads of great sites I use day-to-day are built on WordPress, like CSS Tricks. If it’s good enough for them, it’s good enough for me.

Adding or customising themes is very simple. I’m using the default Twenty Fifteen theme but have added my own little child theme to customise it beyond just colours and image background choices. I’m using a Google Font called Anton for headings plus I’ve changed some of the spacing and played with the perspective of the sidebar.

The vibrant pink hasn’t changed.