Strategic insights
Wanted: Faster Web Applications

Every time I have finished a web application, and every time I start a new one, there is one thing that people want - speed. I continue to hear things like "it is slow, I am waiting all day, and it is not fast enough."

I was astounded at first, because the new web applications was not only fast, but insanely effective compared how things was done previously.

Recently we completed a project where we changed a manual task that took 3 weeks to do. We optimized the process, and automated several sub-tasks. Today it takes 2 days from start to finish.

When we evaluated the result, people wanted it to be even faster. Some even argued that it was slower than previous manual workflow. My immediate response was confusion. I showed them the actual increase in effectiveness - 1,000%, but they still wanted it to be faster.

What is speed really about?

As it turns out, speed has nothing to do with speed - instead it is about 2 things; Acceleration and activity,

Take driving. The first time you ever try to drive a car at 30mph (50km/h) it is very fast. Today, after driving for many years, it is slow.

Speed is not a constant. It is variable to a change in velocity - the acceleration. It might last for a short while, but as soon as you get accustomed to it, it turns from fast to slow.

The second element of speed is activity and it is just as important.

Take walking to a bus station. As long as you are walking you feel the sensation of speed. You know if you stop, you are going to be late. If the trip takes 10 minutes, it is going feel like a very short time - especially if you are in a hurry.

Then, when you arrive at the bus station, you discover that the bus itself is 10 minutes late. Suddenly 10 minutes feels likes ages. The wait is slow.

You only get the sensation of speed when it is linked to activity.

How to make fast web applications

Since you cannot continuously accelerate the web application - it is bound to reach a technical upper limit very quickly - you can make it "fast enough". You can also introduce a number of shortcuts, to quickly get people to their wanted destination.

These are some of the things you can do:

Optimize

The code to run a web application tends to be huge. We deal with massive amount of data and complex interaction (XMLHttpRequest, Ajax, DHTML, and JavaScript). All of this drastically reduces the speed of the page. You need to optimize this.

1. Create highly effective scripts and share them among different interactive elements.
2. Keep the tag-soup to a minimum. You might like to use a zillion DIV's because it is easy - but can you do the same with 2?
3. Use external files for All CSS and JavaScript - they can be cashed and will drastically improve loading time.
4. Use specialized CSS and JavaScript files. It is easy, just to have one JavaScript file for all the interactivity for the entire site. But, it is highly ineffective in terms of speed. Make a specialized script or CSS file for each section of your site.
5. Take a look at how you save or retrieve data from your databases. Use stored procedures, use database caching, and look at the query code. (Recently we manage get an 800% speed increase just be changing a single character in the query).

Remove wait time

Waiting feels slow - even if it only lasts 5 seconds. If people have to use a specific functionality 300 times per day - a 5 seconds wait time is going break your user experience. You need to completely remove wait time.

Technical you can:

1. Use caching
2. Use server-side preloading
3. Use client-side preloading (just make sure it does not effect initial loading time)
4. Remove any unnecessary database retrievals (you will be surprised how many times the database I not needed).

More importantly you can optimize the flow - create shortcuts.

Amazon.com uses shortcuts extensively. They have:

• Recommended books just for you
• A convenient list of the last items you watched
• One-click buying with selective "ship to" and "gift-wrap" options
• Quick links to other areas you might be interested in.

This drastically improves speed sensation of amazon.com.

Specifically you can:

1. Find out what people mostly use, and give them quick access to this information.
2. Pre-fill any forms with as much information as possible, so the people only have to change it in those rare occasions where it is different.
3. Determine what people need next, based on what they just did, and give it to them (AJAX and XMLHttpRequest are excellent tools for this)
4. Use live-editing, live-manipulation (like backpack's drag and drop to-do's) and live-feedback

Base web applications on user-activity and workflows, and move any system activity behind the scenes (loading, processing, saving etc.).

But...

If you find yourself in a situation where you cannot remove wait time, make sure you add a progress indicator - and make sure the progress indicator is actually progressing and not just some fancy animation.

Alternatively, display a warning that the next step might take a long time, thus mentally preparing the user for the delay.

Read also:

• The Browser is Slow (Baekdal.com, July 2005)