5 ways to give your site a speed boost in less than 30 minutes. | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Tuesday, 20th October, 2009

5 ways to give your site a speed boost in less than 30 minutes.

In the age of broadband it is to think download speed does not matter. However, nothing could be further from the truth. I share 5 ways to add some zip to your site.

Development:
The estimated time to read this article is 4 minutes

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.

Screen capture of YSlow

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.

Yahoo! Smush.it

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.

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.