The forgotten art of performance optimisation

Our websites are getting more creative with the use of HTML5, CSS3 and the super-awesome JavaScript. But haven’t the recent bandwidth upgrades spoiled us? Have we forgotten about optimising our websites? It think so, and it’s time to change that.

The very very bloated Web.

The initial steps of designing something, are about adding to a blank canvas. We add shapes, colours, we add text and graphics. We add a lot of things, but since the advent of CSS3 we don’t need to export everything to graphics anymore. We can safely use gradients and web fonts to our advantage. We can use clever JavaScript libraries to power certain parts of our designs. But all of this payload comes with performance penalties.

“What can we set aside, that will not have a huge impact on the overall user experience, but will increase the performance at the same time?”

Just look at what The Next Web has become: the payload for an average UK user is about 6.5mb of data (on a Retina MacBook Pro) served through over 100 requests. It takes it a whooping 7 seconds to become usable/browsable, and further 13 seconds to load completely, on a 10 Mbps connection. That’s right, 20 seconds in total!

Question everything.

In order to solve this problem, we have to go back to the foundation of good user experience design: start asking questions. What can we set aside, that will not have a huge impact on the overall user experience, but will increase the performance at the same time?

• Do you need a whole family of your favourite font to be loaded from CDN, just to display a few paragraphs of text?
• Do you need jQuery, just to show/hide a single element on your page?
• Do you need that super-awesome lightbox plugin, just to display a single basic lightbox with a message?
• Do you need to have 100% quality images if they are intended for low-fidelity thumbnails?
• Do you need additional (often heavy) JavaScript frameworks just to run a great responsive website?

I don’t think so. What you might need however, is to remember that more people use mobile devices to browse the web nowadays than ever before, so optimising for their small screens (and often second-rate bandwidth) should be our first priority.

“Some people who start using CSS Media Queries think that they can stuff their code with more and more, and everything will be worked out automagically by the browser. This will never happen.”

Based on the examples above, you could use jQuery for your fancy animations, but also write a simple and super-fast lightbox functionality yourself, which won’t be 20kb in size, but a mere 1-2kb at most. This saves you more than a half of what jQuery weighs. Or you can try my BoxMe jQuery plugin (1kb gzipped).

Reducing your web footprint.

Simple UI interactions can be accomplished with pure JavaScript, without any reliance on jQuery, so if you don’t need it, don’t load it.

Thumbnail images can be optimised without a visible/noticable difference. Tools such as ImageOptim for Mac can be a great asset here, allowing you to shed even 30-40% of the total image weight without making it look worse.

Use AJAX to your advantage: load a basic version of your page and fill it up with remaining pieces progressively. Your visitors will be able to see the site’s content before deciding whether to stay or go. Some people who start using CSS Media Queries think that they can stuff their code with more and more, and everything will be worked out automagically by the browser. This will never happen.

The philosophy behind responsive web design is to tailor the experience to a given screen space in response to a request for such experience. So if I have an iPhone, I expect a website to be readable/usable from the time I load it on it. But how can a website be readable/usable when you ask me to load all these ads, widgets, lightboxes, social buttons and hefty images, while forgetting that I’m on a 500mb/month data plan and 3G/4G coverage is nowhere to be found near where I am right now?

Use the “mobile first” approach, and deliver an experience which is worth my (definitely not cheap) data plan, by optimising your website. If you start with mobile, a desktop version of your site will only benefit from this, because it will gain more focus and clarity, not to mention that it will be much faster to load and render.

Make your tools work for you.

Leverage the power of your server to do the hard work. If you have a LAMP stack, make sure you have mod_deflate enabled, then install the latest stable version of Google’s mod_pagespeed module for Apache, to leverage compression, combining of resources, caching, image compression and CDN distribution of your content.

If you use PHP, enable xcache and gzip extensions to cache and compress your content. You can also minify HTML files to reduce the output. Servers can do a lot of optimisation for you, you just have to let them do it.

“Servers can do a lot of optimisation for you, you just have to let them do it.”

Our journey doesn’t end here.

We have barely scratched the surface of performance optimisation for websites and web applications. There are many different ways of making our content less obese, although I imagine how hard some of them may be to understand, not to mention implement. That’s why we need to make this knowledge more accessible to people without an engineer’s degree.

Educating web designers & web developers about the importance of performance optimisation is key to making the Web a fast, accessible place for everyone, regardless of their connection speed or available memory.

Can you share any other tips for optimising our websites and web apps?