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.

What I Learned in 2015

I thought I’d do another quick run-through of what I’ve picked up this year. It feels good to show myself that I’m still learning at a healthy pace.

SVG

I’ve started using SVG more, creating some simple charts and building dynamic graphics for use with Google Maps. I made markers or pins, which have colours and characters set dynamically according to data. I think I’ve finally got my head around the whole viewBox, which took me a while. CSS Tricks provided me with some very useful SVG tutorials and introduced me to the work of Sara Soueidan.

Angular.js

I’ve been tinkering with Angular for a while but have really got into using it day-to-day this year. I found it hard at first because it’s so different to using native JavaScript or jQuery to manipulate the DOM. In Angular you basically set conditions in the HTML, e.g. show this when the data is that, and then to make things happen you just change the data. The data changes and the UI updates. It means you’re not making data changes and UI changes – just change the data and Angular looks after the UI. Once you’ve got that it’s actually a lot easier to manage than writing an app with jQuery.

React.js

I’ve done my first project using React. This is a very clever framework for updating the UI as quickly as possible. It checks what actually needs to change on screen and only updates the HTML nodes that require a change, making the UI very fast and, well, reactive. It’s based on building components which each have their own properties and state. The component or modular approach certainly feels like the way forward for building UIs.

Jekyll

I built the previous incarnation of this website using Jekyll. It’s a static site generator. It works in much the same way as any content management system with templates and a build process but spits out static HTML so it’s faster for the user. It took a lot of setting up on Windows and involved some scary new stuff for me, like Ruby, Python and using the command line. It is an amazing bit of software for building fast sites and very flexible. Definitely worth trying. I eventually moved away from it and back to WordPress as it was just easier to update – I can update from any device anywhere without having to have the complicated local set up. As my content is mainly just text, I didn’t feel the performance gains balanced out the usability for me as an author.

Markdown

Using Jekyll also introduced me to using markdown. It’s a quick way of writing HTML without having to use tags. It keeps the content clean and easy to read, whilst containing formatting. It kind of lets you write HTML without having to break your creative flow to think about formatting. It also enables non HTML savvy authors to publish formatted content easily.

New JavaScript Syntax – EcmaScript 6

I haven’t used it yet but started reading about ES6. There are a few good introductory articles, which show off some of the new features without getting too bogged down in the details. Here’s a good basic ES6 intro. It feels like a lot to learn but it becomes evident very quickly that we’ll be able to write less code and it’ll be easier to understand. Win win.

Google Analytics Event Tracking

I’ve used Google Analytics for years but have just discovered how to use event tracking. I can now track clicks on a particular UI element to see how it’s used, check pre-defined user preferences by reading data out of the browser’s localStorage, measure download numbers for PDF documents. It’s opening the doors to a lot of previously missing data with regards to user behaviour and can help me make better decisions on designing the user experience.

Responsive Web Design

I’ve made big strides forward this year with responsive design. I’m starting, late I know, to think about it in everything I do. It’s a lot more work but leads to much more usable UIs and often forces me to keep the design simpler than I would otherwise, which is probably a good thing.

Bootstrap

I’ve actively avoided Bootstrap for the last few years. I always had 2 major concerns with it: 1) that my sites would end up looking the same as everyone else’s and 2) that I was loading up a hefty framework and then only using a fraction of it, which would be very wasteful.

A colleague reintroduced me to it and I was delighted to find that it’s now possible to create customised builds so you can choose the parts you want to include (no waste) and even set colour schemes, default padding, etc. in the build, replacing the defaults, so there’s less needed to overwrite in a custom theme.

I’ve started using it as its grid layout makes responsive design so much easier than handling each page element and I know that the ready made components and UI elements are accessible where my own might not be.

Codepen

And finally, Codepen. I’ve covered this in another post, Developing in Codepen. In short, I use it every day, it’s awesome.