In this age of broadband, users are unlikely to leave your site for being too slow. However, if you want to create a feeling of satisfaction and a pleasant user experience you need to keep download times to a minimum.
In a recent interview usability expert Jacob Nielsen wrote:
One of the main guidelines is to show the next state (e.g., the next page) with one second of the user’s action (e.g., click) in order for users to experience the feeling of a freely-flowing interaction, as opposed to a sensation of delays.
The problem is that speed optimisation can often sound intimidating. Very clever people with very large beards throw around phrases like gzip, compression and caching. However, it doesn’t need to be complicated.
I have just tweaked Boagworld to make it slightly more responsive (yes I know it is not perfect) and I needed little technical knowledge and it took less than 30 minutes. Here is how:
1. Install YSlow for Firebug
Firebug is a Firefox plugin that is essential for any web designer. YSlow is a plugin to this plugin (confusing I know!) that allows you to carry out all kinds of speed tests on your site.
YSlow will grade the performance of your site, provide advice on how to improve things and even suggest some tools which might help.
2. If you are using WordPress install Super Cache
If like me you use WordPress as your content management system then be sure to install the Super Cache plugin.
This plugin generates static html files from your dynamic WordPress blog. After the first visitor views a page on your blog, an HTML copy is created and served to all future visitors. This means that the server does not have to continually recreate pages. This will significantly speed up your site especially when you are receiving a lot of simultaneous users.
3. Compress your images
Images are a significant proportion of most webpages download. However, Photoshop does not always do a very good job at compressing images. Sure, there are other tools out there but most of us do not have the time or inclination to use them.
In addition, if we are trying to speed up an existing site we are unlikely to download and recompress an entire website worth of images.
Fortunately, Smushit comes to the rescue with an online image compressor. Best of all it integrates with YSlow to find all the images on a particular webpage and provide a report of the savings it could make.
Once it has run, all you have to do is download the recompressed images and upload them to your webserver. It even saves the directory structure!
4. Compress your Javascript
Increasingly websites are using more and more Javascript. These files can become very large, especially when using Javascript libraries and plugins. Fortunately it is possible to significantly reduce javascript files by removing formatting and comments.
There are a number of tools that will do this for you:
- YSlow, which has this functionality built in.
- Minifyme, which is an AIR application that runs locally.
- Online minimizers, which allow you to copy and paste Javascript.
- A number of coding applications that also have this functionality built in.
Whatever approach you take, make sure you keep an uncompressed version of the file because it is very hard to read and edit minimized Javascript.
5. Compress your CSS
Finally, as well as compressing your Javascript you can also do the same with CSS. Minifyme not only compresses Javascript, but also does then same for CSS. However, I tend to use CSS Compressor because it provides me with more control over the level of compression.
These CSS compressors remove spaces, line breaks and comments in order to make the file as small as possible.
As with Javascript remember to keep an uncompressed version. That, or reduced the level to which you compress the files.
What else?
What I like about the approaches above is that they require no server side configuration or technical knowledge. They are fast, powerful and easy. There is no reason not to follow this advice.
However, there is a lot more that can be done. Perhaps you would be willing to share some of your speed optimisation tricks in the comments below.
