Tune Your Performance

Introduction

Performance is critically important in this age of shortened attention spans. The longer your page takes to load, the more visitors will give up and try somewhere else instead. Slow performance stops people waiting for your site on first visit, stops people returning to your site and also impacts your search engine rankings leading to a further reduction in traffic. These directly impact the perception of your brand and your bottom line. Some performance issues will be very specific to your website and the technology you use on it (particularly if you have web developers writing code for your website), but there are a lot of general performance options and concepts that every website should at least be aware of and, unless there are very good reasons not to, should use.

Top 5 Performance Recommendations

Here at Tune The Web I'm aiming, first and foremost, to give practical and useful advice that website owners can use. With that in mind I have prepared this top 5 list of performance recommendations I think every website should consider as a first step into securing your website:

Measure your current performance

The first step in tuning your performance is understanding the current state of play. One of the best ways is to use Webpagetest.org. Enter your URL and optionally choose your location and browser and then let it do it's thing. This will produce a wealth of information including some grades in the top right, a summary set of stats, and then details of the "first view" and "repeat view" - including a very useful waterfall view of how your website loads and a set of stills showing you what your website looks like as it loads. This will show you how your website is loaded and in particular in what order all the resources are loaded in. It may surprise you to learn everything your website loads - the average website loads 102 items and is over 2Mb in size! This includes your main page, some CSS styling, images, javascript and then a wealth of third party content. Are those items being delivered in the right order so your web page shows as quickly as possible? Do all of them need to be delivered or is there some fat to trim here? Are there any blocking resources (e.g. javascript files) which are slowing down the initial display? Are there any resources (e.g. large images) which are taking up most of the time? Are Keep-Alives enabled or is each resource requiring it's own connection? Have you performance tuned your HTTPS or is each connection doing an expensive HTTPS negotiation? Learning how to read and use the information from webpagetest effectively does take some time and experience but there is a wealth of information here. Learn more about Webpagetest and other tools for measuring your website.

Gzip your content

One of the easiest performance improvements is to gzip your content. This basically involves your web server zipping up your files when requested, sending this smaller version across the network, and then your web browser unzipping again. This may sound like a lot of work, but with the network usually being the limiting factor (particularly on mobile) rather than processing time on either end, huge performance improvements are possible by setting this up. You can save 70%-90% of network traffic for text files with compression. This save transfer times (making your site faster) and also bandwidth costs for both your users (few people are on unlimited internet plans on mobile) and you (depending on how you pay for your usage on your site). Every modern web browser has supported gzipping properly for well over 10 years, and they will tell your web server if it does so your web browser will only send gzipped content where it needs to. 81% of web resources are compressed, so if you are not using gzipped content then you should have a very good reason for this. Learn more about gzip.

Set up caching

"The fastest HTTP request is the one not made." is a well known quote in the web optimisation community (though no one seems to remember who said it first). When a web browser requests a web page, or any other resource, your web server can send back caching information through HTTP Headers designed specifically to improve performance. This tells the browser how resources can be saved and reused again, saving the request and download time the next time it needs that resource. You will likely have a lot of common content on each page (your standard header, your site logo, some standard CSS...etc), so if you do not cache data then, as visitors browse around your website they are downloading the same resources, over and over again. This slows down their browsing and uses up valuable networking resources - using up any internet bandwidth limit they have, and any download bandwidth that you may have to pay. Setting up a caching policy on your web server is one of the kindest things you can do for your web visitors. The main downside is that it complicates when you do want to change content but there are ways around this. Learn more about caching.

Tune images

Images make up 62% of average websites. So, as the largest resources used by far, they are one of the first places you should look to optimise. High quality photos can look very impressive on a website, and some devices have very detailed screens, but if half your visitors give up waiting and go somewhere else, then there is little point in having them. So make sure you are using the correct image format, and optimise your images to ensure they are as small as possible without losing quality. Also consider how to handle images on different screensizes and resolutions. Learn more about tuning images.

Optimize for mobile

Mobile use has overtaken desktop usage and is only going in one direction. Smart phones are incredible devices and, in many ways they are more modern, and standards-compliant than the desktop browsers most users use making them easier to program for in some ways, but in other ways they are extremely limited. While screen size is the most obvious constraint, network limitations (in terms of speed, latency and cost to users data plans). So designing for mobile takes special consideration. In this day and age you need a mobile friendly website - either as a separate website or, as is increasingly common, a responsive website that adapts to smaller screen size. However it's important you truly understand the term "mobile-friendly" and don't just concentrate on screen size. Aim to make your website as lean as possible, particularly in terms of resources downloaded. This will also improve your website overall even for non-mobile users. In fact in the last few years there has been a trend towards "mobile first" websites with the thinking being that concentrating on what you would put on a more limited mobiles sites, will lead to a better overall website.

Summary

Performance is one of the most important aspects of your website. Web browsers are fickle and will move off to the next website and, unless you have a completely unique idea, there will be another website that they can move on to. Improving performance is better for your users, can reduce both their and your internet costs, and has huge SEO benefits meaning people will be able to find your website easier in future. Luckily for you there are some well known ways of improving performance, some of which are listed above and which will be expanded on as time goes by. Some of these (e.g. setting up gzip) are very easy and require little or no maintenance after you've set them up, some (e.g. caching) may require a little more thought and some (e.g. optimising your images) may require you to put better processes in place for how you upload content to your website but the upsides are huge.

There is a huge community of performance experts on the internet, including people like Steve Sounders (pretty much the original web performance evangelist), Ilya Grigorik (of Google and W3C) and Lara Hogan (who has very kindly put her entire Designing for Performance book online for free - though I recommend buying your own copy and reading it cover to cover!), all of whom are working tirelessly to improve the internet and make life better for us all.

This is also an area that is constantly changing. HTTP/2 is one such change that is just coming into the mainstream and promised to dramatically improve performance as well as removing the need for a number of work arounds.

This page only touches on some of the more obvious and basic ways of improving web performance that people like them have suggested but the hope is to point you in the right direction for where to start with performance improvements and also build up this website with more and more links and information as time goes by.

This page was originally created on 22-Aug-2015 and last edited on 28-Jun-2022.