The Freaky-Deaky World of Optimisation

Here’s a word that pops up everywhere and seems important. In fact, it is critical– and here’s why.

To cut straight to the chase: optimisation is the difference between a great web experience for your users, and pure nightmare fuel. Either way, people will remember their browsing experience, either great or otherwise.

To optimise a website is to cull out all the extra, unnecessary stuff that slows down performance. An experienced web designer does this habitually.

Where exactly is all this cruft?

The first, most obvious port of call is images.

Not all image processing software solutions are made equal. Two near-identical images can have very different data weights, depending on where they were generated; if one image is a quarter the weight of the next, guess which one will download faster?

This is the crux of  image performance. The bottleneck is download time, which becomes critically important when considering mobile users and those on slow connections.

Photoshop is notoriously bad at generating lightweight images; its purpose is to produce high-quality images, after all. I usually leverage TinyPNG for optimising images on the fly, given their ‘lossy’ compression is actually very tidy; their example of pre- and post-optimised images is pretty telling.

57kb in size below:

vs 15kb in size:

A second facet of image optimisation that many don’t consider is physical size. Imagine a background image that is 2500px wide; this is going to look great on a large screen, but it’s going to make smartphones cry tears of blood. An experienced designer has several tools in their arsenal, from using Media Queries to load certain image sizes to specific devices, to generating correctly-sized images on the server for each device, or a combination of both to cover both HTML and CSS images. There are some cool things on the horizon that will work well with many websites, but at this moment support still worries me a little and using these tools relies on the website’s primary audience.

The other side of optimisation is in the code.

For one, sheer volume of code is a key problem. This is where commercial themes fall over; to cover all use cases across all conceivable devices, there’s an awful lot of code doing many, many things. For any given website, many of those things probably don’t apply. Regardless, every browser that visits the website is still reading every single one of those 8000 lines of CSS and processing those 20 linked JS files.

Compare: uncompressed and human-readable, as part of a fairly comprehensive boilerplate, the main CSS of this website is only 1080 lines as of right now. This is a major advantage of bespoke design. Add to the fact that there are no CSS frameworks being used here (this entire website is written by hand!), the CSS is blazing fast. Leaves plenty of headroom for the fancy moving gradient in the background, amirite?

A trickier part is what the code is doing. Websites these days are laden with JS, CSS animations and all manner of bells and whistles. Optimising what this code is doing isn’t just about reducing the volume of it, it’s also writing code that is efficient in what it does. Experienced developers understand how browsers work under the bonnet and aim to leverage methods that use the least browser resources. This part is rather complicated, but an important facet of performance…particularly on underpowered devices.

Oh God, maybe this is why my website is so slow!

It could very well be, especially if you’re using a commercial theme or if your website is a bit of a veteran.

You can give me a bell and show me your slow website; I’m keen to help make the Internet a faster place!