Website Performance

You might be sitting comfortably at home, using your new high-end, powerful laptop. You come across a website with beautiful, big, high-def images, and aesthetically pleasing (but unnecessary) animations sliding-in all over the place. "Ahh, that's nice" you might think?

You might be outside using your mobile smartphone and the connection signal is not great. You come across the same website; you wait forever for all the massive images to download, and when the page eventually does appear, you have to deal with processor-hungry, stuttering, confusing animations, because your smartphone isn't a super-computer! "What a terrible website" you might think?

You website needs to offer a good experience to everyone

Ideally your website needs to perform well for everyone, on every device, in every situation. It needs to be optimised to download quickly and be responsive to any user interaction.

Website's target audience

Your website's performance should also take in to consideration your target audience. You may be targeting a geographical area, where connection speeds are poor, and the devices used vary in computing power. Conversely, you might be specifically targeting a audience who typically use high-end devices.

Website performance techniques

Web Server Specification:

The hosting package you choose and the server specification that it comes with, will have some bearing on your website's performance. The quality of hardware or how many websites are sharing the same server are just two such examples. Most of the time though, only websites with very high traffic levels with multiple simultaneous requests, will suffer noticeably with regards to average server capabilities.

Optimise Images & Other Media

An important and sure-fire way of improving your website's performance is to ensure all your media is optimised. This process involves finding a balance between the visual/aural quality of your media and corresponding file size.

Most websites will self-host their own images (jpg, png, gif, svg, etc.), so it's important to have processes in place for reducing the file size of these file types as much as possible, so they will download quickly. Video and audio files are often hosted by 3rd parties (e.g. embedded via YouTube), but if you self-host these files you'll need to optimise those media files too.

As an extra file size saving, you may want to 'minify' your core website files too. HTML, CSS and JavaScript files usually include formatting for readability, but they can be automatically processed to remove all white-space and line-breaks, which reduces their file size.

Minimise Server Requests

Every time someone visits your website, they make requests to your web server to 'serve' them a series of files to view. Each file requires a separate request, and the more requests are required, the longer your website takes to appear.

Each of these server requests should only take a fraction of a second to complete, but if possible it's a good idea to minimise their number. This usually means all website dependency files such as JavaScript and CSS files should be merged in to single files, so that only one request is required for each.

Avoid Resource-Hungry Processes

The devices people use to access your website will vary greatly in terms of their processing power. So if you want everyone to have a good experience when using your website, you'll need to avoid resource-hungry processes

The worst processor-sapping culprit in recent years, has been the over use of animation. Web designers themselves are largely to blame for this, because offering 'wow-factor' animated design elements to their clients is an easy sell.

Unless there's very good reason, animation shouldn't be used when it's sole purpose is to be aesthetically pleasing. Animation should instead be used to enhance usability. For example, an animated button that helps draw the user's attention to what they need to do next.