Along with some other common website design mistakes, you really want to avoid a slow website so checking and improving the speed of a website must be one of the things that you perform when it comes to releasing a new site for a client. We've come up with a quick checklist of some of the things we do before "going live" which you can hopefully incorporate into your own list.
1. Infrastructure
Running a commercial website from a shared host can become a nightmare when it comes to performance. They are great in the short term as they are cheap and can offer you pretty much everything you need to set up as many new sites as you like. However, you may find that you are sharing this server with 100's of other websites and you don't know what traffic they may be getting. That's why as soon as we started out with new clients we went and purchased a dedicated server in a secure UK data centre (all of our clients are UK based anyway so it make sense to have less latency). We have complete control over the server and we can see exactly what effect customer sites have on the server (in case you are wondering, we've never got anywhere near the limits of what it could handle!). It really is worth the initial outlay and it helps us deliver a quality and fast service to our customers.
2. Semantic and well structured HTML
Really, for any professional web developer, it should be a given that in this day and age that they are using semantic and well structured HTML for any website they develop. However, it still amazes me to see some web design companies (both locally and nationally) that churn out come awful behind-the-scenes mess when it comes to the actual HTML. Nested tables, outdated tags like <b> and <i> and in a recent case I even saw a (what I though was extinct!) <marquee> tag! Not only do this type of design make it difficult to maintain, I really think it gives other respectable web firms a bad name. It also compounds to the problems of a slower website as the browser needs to download more HTML that it can't easily cache.
3. Use HTTP Compression
One of the easiest ways to dramatically speed up a website is to use HTTP compression. This means that whatever files you tell your web server to compress, they will be a smaller file when they are sent to the client's browser. Therefore, if the user has less to download, they will be able to do it quicker! We use IIS to deliver our client websites, and it was easy to setup with the help of this Microsoft guide on HTTP compression.
4. Check your image sizes
One of the mistakes people can make when it comes to images is that they forget to check the image size, compression and type of their images. There are quite a lot of times when you can drastically reduce the file size of an image, without losing quality, simply by making it a different type of image. The three main types that are used are:
- .gif -These are best used when your don't have an extensive colour pallete. Images with few colours can often be compressed really well in this format. It is also often used for animated images.
- .jpg - If you have lots of colours and detail in an image, like in a photograph for example, then this may be a good choice. Remember, with this format you get different options when it comes to compression so try having a play around with your images and see if you can reduce the file size without losing too much quality.
- .png - This is best utilised when you a qaulity image with varying levels of transparency. They can produce a much higer quality image but can also be large in size so make sure you only use them when appropriate and check their sizes before going live!
5. Caching
We've automatically built caching into our content management system (CMS) so all of our client sites benefit from not having to repeatedly re-query information that has already been found and served. Our algorithms check for changes in file structure and content to make sure that updated files are sent when requested, and the same goes for our javascript and CSS files. This means that the user has the benefit of nearly always getting their web page loaded quickly from a cache repository until a time when that page is updated. If you don't have something like this built into your site, you can still manually set an Expires or a Cache-Control Header.
Mark Smith
MDS Solutions