Web Performance Calendar

Measuring time is an important activity in your performance efforts. After all, how else would you know if gzipping your javascripts helped or it didn’t matter, or it slowed you down (because your server is now busier)? You have to measure and monitor what you measure in order to quantify whether or not you’re making progress. With the exception of your own personal sites you have to measure time in order to show your boss or client that you are, in fact, working on something that matters. Time is important but the milliseconds don’t tell the whole story.

Remember folks, we’re dealing with humans here. The users of our sites are mainly humans (with the exception of a few (ro)bots, spiders and worms) and humans are irrational, some would say predictably so. Not only are we irrational, but we also have a very skewed idea of reality, we’re easy to manipulate and our senses are not nearly as accurate as we believe them to be.

Mind hacks

“Mind hacks” and “Your brain: the missing manual” are excellent reads that show how unreliable our brains and our senses are. There’s no other way actually, the reality is extremely complex and there’s so much information to absorb and process and make sense of at any given time. Doing everything properly is just not possible. We need to take shortcuts in information processing, make guesses and sometimes just make up stuff so that out mental idea or the outside world is complete and consistent.

Magicians for example use our attention and processing flaws to do “impossible” things. Optical illusions work the same way. In the image above both A and B squares are the same color. Have fun figuring it out (short of using a color picker). It is the same rgb (100, 100, 100) or #646464 but you literally have to hide everything else on that image in order to see it. And even then, when you look at the image again your mind will still refuse to believe that it’s the same color. Not only we’re easily swayed, but we’re also reluctant to accept a fact even after it has been proven to us.

The problem with that image is that we perceive things relatively, compare new information with previous knowledge and make a decision based on that. We’re also suckers for patterns.

That’s just the way we work – imagine you wake up tomorrow and before getting out of bed you decide to consider all the options ahead of you, their pros and cons. The number of choices is so daunting, you’ll never do anything, you’ll just lay there and calculate the risks and uncertainties associated with your every move. Because, you know, getting out of bed has its drawbacks (and is, generally, wildly overrated ;))

Time

Back to the time – the unit of measure that helps us judge how fast a page is. Needless to say, our idea of time is also inaccurate. And relative. Think about it – time flies when you’re doing something you love and crawls when you’re on the line at the cache register (although smart folks have decided to put celebrity magazines there to keep you distracted from the thought how much you hate waiting).

Time is relative to our enjoyment of what we do.

Turns out time also flows differently depending on the age – perceived 3 minutes for a 20 year old are in reality 3:03 and for a 60 year old 3 minutes are in reality 3:40.

Time is also relative to our expectations.

Maister’s First Law of Service (service as in fast food service) states that:

Service = Perception - Expectation

When people perceive that you exceed expectations, they are happy and everything is fast and pleasurable. So you have to care about how users perceive your page load time and also what their expectations were. Naturally, both of these are subjective to begin with.

Competition

When it comes to expectations you should consider what type of site you have and how does the competition’s sites compare. This will give you an idea of what experience the users expect. If you’re in the social networking business, no one expects you to be search engine-fast. People come to comment to their friends’ photos, to write messages and so on. They can wait a second more when they’ll be spending minutes crafting their comment, they are probably thinking about the comment already and don’t necessarily pay attention to the load time. The search engine experience is different – users are hunting for information, they want to move away from your page ASAP and get to their answer.

Painful = slow

Back to relativity of time. You’ve probably noticed that when you’re in pain time goes slower, when you’re frustrated with a site that is in your way of finishing a task, you find it pretty slow. When your bank site prompts you with half-baked extra security features and prevents you from paying that late bill, you don’t care that time-to-onload of that page was under a second. You still hate the experience and think the site was slow (paying the bill actually took you longer than you imagined it should take).

On the opposite, when you’re happy and having fun, you can tolerate a slower site and it will actually feel faster than the miserable experience with the objectively faster bank site.

People also expect certain types of pages to behave a certain way. If it’s a light page with one-two graphics, it better be fast. People will perceive it as slow if it doesn’t meet their expectations. On the other hand, a YouTube page is ok to be slower, you’re there to watch funny cats (and enjoy yourself) and everybody has learned through experience that web video is normally slower than text-only pages.

Another illustration of pain and frustration being equal to slow. In WWII people who were likely to be captured and tortured for information were trained to deal with pain by counting. Because pain makes time run slow, the prisoner feels the torture go on forever. When you count, you have a more realistic idea of time and that helps.

Speed doesn’t matter

Of course it does, just wanted to make sure you’re paying attention 🙂

There’s a fascinating study (and podcast) that claim “the truth about download time”. The findings were that when people complete their task they perceive the site as fast, although it may be slower than another site that frustrated them.

This study was done in 2001 and things have changed since then. I mean they talk about 36 seconds page load times for Amazon. I found it particularly amusing how they measured the real page load time – interns with stop watches looking at the videos of the usability study and checking when the Netscape logo stops spinning (actually was it IE’s logo that was spinning and NS had some shooting stars?)

These days we have data showing that sub-second delays make you lose visitors (sometimes forever) and it’s clear that when given a faster and slower version of the same site, people will prefer the faster, naturally. This study was comparing sites against each other and looks like with different tasks.

But still, the findings that task completion determines you speed perception is fascinating and something to keep in mind when designing user interactions. If you bog down the user with pages and pages of lengthy forms with insanely strict and annoying validation, then no amount of super fast page loading will cause the people judge your site fast.

Flow

Flow is a concept that aims to answer the question what makes us tick, motivates us and makes us happy. In the words of the flow researcher Mihály Csíkszentmihályi flow is:

Being completely involved in an activity for its own sake. The ego falls away. Time flies. Every action, movement, and thought follows inevitably from the previous one, like playing jazz. Your whole being is involved, and you’re using your skills to the utmost.

Web page performance can play critical role in stimulating the sense of flow. If a page takes too long, you leave the flow, you start thinking about things other than what you do, the brain wanders and the experience is ruined. On the other hand – clear goals, immediate feedback, balance between skills and challenge help create and maintain the state of flow.

It’s an interesting topic, you can read up a bit on how flow relates to web sites here (see the pdf) and here.

Blink of an eye

“In a blink of an eye” is fast, right? As fast as it gets. Turns out a blink of an eye lasts on average 300 to 400 miliseconds. Can you load your page in a blink of an eye? Probably pretty difficult, but what you can do is provide some feedback in this time window. This way help the user maintain flow and get an idea something is going on. That’s why progressive rendering is really important (subject for a separate post) – to let the user know that there was no error and the page is coming. Feedback, progressive rendering and progress indicators of any kind communicate and reassure.

Talking about milliseconds here’s another number to keep in mind – 200ms. Our eyes move in a succession about 5 times a second or every 200ms, taking snapshots of the outside world. But these 200ms are relative too. When something appears or moves we’re likely to focus on it and stay focused (who knows maybe there’s a danger in there 🙂 ) for more than 200ms before the eye moves to examine the rest of the world. If that thing dissapears, we’re likely to move our eyes faster. That’s why if you want to highlight something on the screen, say you showed object A and then B, B is more likely to be noticed if you first hide A.

Transitions

Things in real world don’t just pop and disappear. It’s actually pretty scary when someone we didn’t notice all of a sudden seem to appear from nowhere. In real world objects move from one state to another. You can simulate that on the screen with transitions and animations. Otherwise people are taken by surprise a little bit and are feeling not in control which may hurt the state of flow. Often if you animate something on the screen, it will feel more natural even if it takes longer. But not too long, of course, not to make it look unnatural (As a friend said for my first YUI animation – it felt painful and made him tense waiting for it to finish, because I was so proud I can animate stuff on the page that I made the animation take its time). Using easing animations is also preferable.

White is fast

Google Reader used to have this blue background on the left hand side menu (where the list of feeds is), but it’s now white. Turns out they made a user study to ask people what they think given the two options and nothing else changed in the app. People consistently said that the version with the white background was faster, although it’s the same page. How crazy is this?

Clutter

One last thought – clutter. In these times of TV and limited attention span (who doesn’t suffer from ADD, raise hand!) an often mentioned advise is to minimize clutter. It makes sense – the less information you have to process, the less anxious you feel about the new environment (the new web page just loaded). We don’t have control over how we percieve things – a flashing animation will attract our attention away from the reason why we’re on this page. And we won’t like that. So it’s good to avoid clutter, too many options, decoration images of beautiful people shaking hands and so on. Less stuff will also mean less markup, images, less page weight, which is great for performance. But clutter is also… relative.

Clutter is not simply a lot of things. Clutter is a lot of useless things and distractions. If you have a lot of exactly what you need, that’s not so bad. (If I had a room full of guitars and gear and virtually no option to walk in this room, I won’t complain, I’d say it’s awesome.)

Also – you can consider culture differences. In Asia people often find it better if they have more content and options to parse through and make sense of on the same page and they don’t find it cluttered. They would prefer to wait a bit in order to have their options in front of them. For illustration – just checked that yahoo.com has 146 links on the page and Yahoo! Taiwan has 334.

Parting words

And this concludes day 4 of the performance advent calendar. Takeaways?

• Time is relative
• Keep flow in mind
• Consider the competition, the purpose of the page, the user expectations
• Try to answer “what’s the user perceived load time?”
• Provide feedback
• Transitions
• Progressive rendering
• Strive to render something (part of the page) in a blink of eye