Something that is often overlooked when building a web-site is optimisation of content. It’s one thing to design a web site that looks great… and it’s another thing to have it function efficiently so that users are able to learn as much about you in as little time possible. This is where web optimisation comes into play.

Despite internet connections getting faster every day, the general public’s patience has decreased significantly in tandem to this development. More sites, and greater speed in which to access them means users are getting into the habit of searching through pages as a rate of knots until they find what they are looking for.

This is where the 8 second rule comes in…

It has been found that the average user is willing to spend only 8 seconds viewing a website before they decide to either stay or leave, at least according to market research conducted by Akamai and JupiterReserach way back in 2001. In fact, more recent research done by these same folks suggest that this figure should be reduced to 4 seconds with the development of faster broadband connections. I, for one, do not believe that this “4 second rule” should be the new gospel, because despite connections getting faster, websites are getting bigger and richer at the same time. Not only that: a website that is fast in your country may be a lot slower in another due to distance factors. Also, there is the issue of some countries still having a relatively lackluster broadband network (heck, I am living in one). So, if at a worst case scenario your site is still able to load in less than 8 seconds, you are sitting on a winner.

8 seconds may not seem like a long time… but for the determined user who is trying to decide where they will spend their money, there is a huge difference between the guy with the page that loads in 8 seconds, and the guy who’s page loads in 2. And let’s not even get into the sites that take longer than 8 seconds! It’s like the web equivalent of channel surfing… unless you see something on the TV that you like, you will skip past every channel rapidly until you find one that catches your attention the quickest.

So it’s no surprise that the one of the biggest mistakes made by web developers, especially those responsible for building creative and media-rich websites, is to make the website’s content too rich or heavy. Images that take up a lot of space (hence take longer to download), too many scripts in the coding bouncing around, and poor management of content all increase the time it takes for your website to load. Once you’ve reached that 8 second threshold the likelihood of clients staying decreases exponentially.

I have learnt a lot about web optimisation over the past few years… but even more over the past few weeks. I have been guilty of initially designing a site with rich imagery, heavy content and a lot of scripting, carried away with how pretty I can make the site look. But whilst I may have the patience to admire the beautiful end result myself, I know John Citizen probably came to my site for more than just the pretty pictures.

Using the Mat Tyler homesite as an example. The initial design of the site was created with 3 important factors, which should apply to every website you are considering on building:

  • Visual Impact
  • Quality and relevance of content
  • Efficiency

…in that order.

A lot of people would give you a more elaborate list… but I find that keeping things simple is the best approach, especially when it comes to the web.

I will be addressing the 1st and 3rd of these items as I already assume you are fully aware of the relevance of having good written content on your site. After all, this is an article about the technical and visual aspect of web optimisation, and not a lesson in marketing in general.

Visual impact is first on the list because it becomes your target’s first impression of you. It should be impressive, yet not complicated. Unique, but not obscure. Contemporary, but also very you! Consider having your logo one of the first things people see. It will help introduce yourself before anything else. If you have a logo that is just a symbol (and does not contain your name) consider having both your logo and a brief title about your business. DO NOT simply have a logo there that says nothing about your business, and definitely DO NOT NOT NOT have a flash introduction! I cannot stress this enough.

While flash intros may be impressive to the person who is visiting your site, and only your site, to the person who is scanning through their Google results looking for the right company, it’s a deal breaker. 9 times out of 10 they will close the window and move on before the intro has even finished.

To help exemplify this, let’s refer back to that 8 second rule:

Most flash intros are (on average): 1.5mb in size. On an ADSL 2+ fast connection that will take most users about 3-4 seconds to load. Which leaves you with 4 seconds remaining to show your client: Who you are, what you do, and why you are the ideal candidate for their business. You can guarantee with most of the websites that have flash intros: by the time your subconscious clock has reached 8 seconds, you have barely seen a “Welcome to…” and then it’s game over. You close, and move on to the next company.

If you are dead set on having some kind of flashy introduction to your business, have it somewhere else on the site where the user may elect to watch it if they want to, instead of having it as the first thing they see, and making them navigate past it every time they visit your site.

Now that I have convinced you NOT to have a flash intro (thank god), let’s look at what can you do to stand out. As I said before, start with your logo, a tagline, and maybe even an image demonstrating your key abilities. Using the Mat Tyler site as an example again: on loading, the logo is the first thing that shows up. As part of that logo you have what I do (“Multimedia / Design”). Just below that you have all the relevant sections of the website that users can skip to. And then, still in view you have an eye catching, humorous and colourful image detailing my key skills and benefits to you. I even went so far as to putting these benefits into a diagram, making the process of learning about me a lot more interesting.

But even though we have exemplified how all the relevant information can be accessible without the need for the mass fanfare, our work is still not over…


Efficiency

Even without a flash animation, imagery can take up a fair chunk of your download time. Initially, the front page design of the Mat Tyler website equated to 1.5MB of data. This figure included imagery, scripts, style sheets, etc.

Let’s put my first draft of my site to the test using out 8 second rule again:

ADSL 2+ fast connection will load 1.5MB of data in about 3-4 seconds (same as the 1.5MB flash into). This leaves my users with 4 more seconds to learn about me. But I have one advantage: they already know a lot about me thanks to all the content being in front of their eyes. But, I know for a fact that I can do much better than that.

When I first drafted the site I posted it to a community of folks whom I have known for many years, and are all in-the-know when it comes to web technology. Essentially, it’s a great testing methodology and I encourage most people to do this when creating a site. The feedback you gain is invaluable. One particular user provided me with an interesting comparison: he said that while 1.5MB of imagery and scripting may not seem like much, that’s still more than even the CNN News website. Sure, the site looked great… but why would you have a body of a Ferrari with the engine of a Camry!

First step was to compress the imagery to a fraction of their original size. I then merged all my scripts into one modular index, and removed the external scripts (such as the Social Networking Plug-Ins) replacing them with static links. This serves to reduce the need for referencing external sites which can cause bottlenecks. I also performed a whole series of server-side optimisations such as file compression, and cache enhancement. Some of these things you will already know how to do, and for all others I would recommend searching the web for web optimisation tutorials that go into greater specifics. One really good article that goes into quite a lot of detail with regards to specific optimisation is this one @ DotSauce.

After all these optimisations I was able to reduce the size of the entire main page of my site from 1.5MB, all the way down to 220kb! This meant that instead of taking 3-4 seconds to load the entire site, it now takes less than 1 second! Take that, CNN!

The best part about a lot of these optimisations is: they are relatively simple. By far the most effective was the image compression. You would be surprised how much you can compress an image (particularly a JPEG) before it reaches the threshold of being identifiable as “compressed”. A 150kb image can look just as good as a 1MB image, and the only time you would notice a difference would be to stare at both versions side-by-side. But remember, as a user who is subconsciously living by the 8 second rule, you are not too concerned about it to begin with.

A great set of tools I would also recommend when going through the optimisation process is Firebug and Page Speed. Firebug is a plug in for Firefox that enables you to check the guts of a website, and Page Speed is an extension of Firebug that enables you to benchmark your website, providing you will valuable information and steps you can take to further optimise your content.

Lastly, once you have done all the optimisations you are able to do, it’s good practise to run your site through the W3 Validator.

http://validator.w3.org/

Basically, it’s a website that will check the coding of your site and tell you all the errors it picks up. If no errors are picked up, it will be considered a “valid site”. If errors are returned, it identifies where they occur, which enables you to go back to the coding, and one-by-one eliminate the anomalies. Once all have been rectified, your site will then “pass” the validation. But don’t worry too much. If your site does not pass it does not mean it’s not going to work. Even the Google website has a fair share of errors according to the validator, and generally the larger the site, the more errors you will return, and most are harmless. The only benefit of having a fully validated site is knowing that no matter what platform your site is being displayed, you have done everything in your power to ensure it will display correctly. And even in the odd occasions that it does not, it will usually be a browser specific anomaly that you are not responsible for (aka. most of Google Chrome, which I strongly recommend people avoid, at least until it is better optimised).

Well there you have it! I hope this article provided valuable insight into the world of web optimisation. If you follow these steps and use the magical 8 second rule as a benchmark, you can be sure that you will have an efficient website that will snag potential clients quickly and effectively!

- Mat.