Optimising Website Performance

Optimising Website Performance

By Dan Davidson

Consider the following quoted from Sherice Jacob over at KISSmetrics:

According to surveys done by Akamai and Gomez.com, nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn’t loaded within 3 seconds. 79% of web shoppers who have trouble with web site performance say they won’t return to the site to buy again and around 44% of them would tell a friend if they had a poor experience shopping online.

The above is taken from an an article written in 2011, yet the main takeaway is as important today as it was then, performance is king. Slow, unresponsive user interfaces and long page load times will not only drive users away, but in some cases leave them so unhappy they’ll go and share their bad experience with their friends. Obviously not good.

Today there are additional challenges to consider when it comes to making websites high performance. High density screens delight in crisp, high resolution, larger filesize images. User tastes are trending towards more fluid, immersive web experiences, with ‘full-bleed’ edge-to-edge images becoming the norm. Many, many more devices websites exist to contend with, from mobile to tablets, to desktop and TV’s, and soon even wearable tech such as watches and glasses. All this is leading to new kinds of assets and technologies becoming commonplace, such as media detection, custom fonts, svg’s, third party libraries. All this is resulting in sites getting fatter and more complex, and it’s harder than ever to keep everything performant as a result.

A little consolation exists with what is perhaps a natural counterbalance to the growth in website size; the average global internet download speed is increasing year on year. According to Net Index, as of the date of this article average speeds are 17.30 Mbps for households and 7.8 Mbps for mobile. That is a marked improvement over the situation in years past, but it doesn’t mean you should stop thinking about performance, performance should still be a cornerstone of your website user experience and a key component in the design and development process.

Thankfully several new technologies, best practices, and tools exist to help developers and designers streamline their process for performance. Below are listed 5 tips to help make performance king on your website.

1. Design For Performance.

Design For Performance

It’s been said before, perhaps most notably by Brad Frost in his article Performance as design, but it bears repeating; perfomance is not just another technical checkbox to tick off on a list, it is design. Performance matters just as much as content, colours and shapes, as it is intrinsically linked to the overall user experience. The design decisions you take should be made and weighed against performance at all times.

One of the best ways to go about this is during the mockup and design stage. You should consider how much of the UI you’re designing is translatable to native HTML5/CSS3. The use of native HTML5/CSS3 is, almost without exception, going to be much more performant and responsive than using background image hacks or other trickery. Shadows, rounded corners, transparencies, gradients and even geometric shapes are just a few examples of what can be done natively on the modern web. In short, the tools available today to render elements natively in the browser are superb, use them.

2. Go Mobile First.

Thinking about your website with a mobile-first mindset will bring with it some natural constraints. These contraints often enforce the need to cut back things to the bare essentials, only those elements the user needs to consume and interact with. Such constraints will therefore influence your design decisions in major ways, asking questions such as if you really need another promotions box in the header, or should things go into the content area sooner?

This constraint is really a blessing, not a curse. Keeping your UI uncluttered, clean, and obvious to the user is not only good for user experience, it is hugely beneficial for the user experience named performance. If there are less elements to render, fewer http requests (the number of times a browser has to ask for something from a web server) and fewer files to download, this will all naturally result in more performance.

3. Performance Oriented Development Workflow.

Grunt + Bower + Sass = Awesome

Today many great tools exist to make website development faster and easier. I’ll focus on some of the ones we use here at mycleveragency.

A basic tenet of performance is that websites should at a bare minimum employ minification and concatination of CSS and JavaScript files so there are less http requests. If you use something like SASS or LESS you will probably know that you set these to minify CSS automatically when you compile, a huge benefit. There is also Uglify which will minify your JavaScript for you. In some cases though you’ll want something more configurable, that you can set up to automatically run several tasks for you at once, watching for changes. Our recent projects have made use of a task runner called Grunt. Grunt is an amazing tool, it allows tasks to be configured and triggered automatically and we set it up to do CSS compiling from SASS files, linting, concatenation and minification of  JavaScript, and optimisation of svg icons and other media.

If you set something like Grunt up at the beginning of your development projects, it allows for performance to be built-in from the very first stages. There is a great article about Grunt and optimising the workflow written by Chris Coyier over at 24 ways if you want to read more about it.

4. Performance Analysis.

Several services exist which can analyse and optimize your website such as Google Pagespeed or plugins like YSlow. These list common performance issues such as too many http requests, unminified files, and a grade for how performant your site is. Run this often during development so you know which areas you need to improve in performance.

5. Hosting, CDN’s and Monitoring.

Once you have developed a website the next step is to deploy it to production. Unless you run your own server farm, this usally means choosing a hosting platform. When choosing with performance in mind generally anything which looks too good to be true usually is, and avoid cheap packages such as shared hosting, pick someone with a track record. The big guys like Amazon AWS and Google are great, and there are smaller guys like Linode and Digital Ocean you could consider as well.

Aside from the hosting, you could also consider a CDN (Content Delivery Network). Using a CDN will have a major impact on performance, as it allows for assets to be served by closest geographical location to the user. There are many good CDN’s out there, but to get started you could try the free service from CloudFlare who provide an excellent service.

Finally you should also be monitoring your website performance over time, it is not just something to set up and forget. Services like New Relic and Nagios exist to offer in-depth performance monitoring of your website, allowing you to see any bottlenecks forming, and to keep on top of issues in near realtime providing invaluable insights.

This post was written by Dan Davidson

Dan is a Web Developer. He develops microsites and applications for brand campaigns.