The secrets of psychological performance optimisation.
Before getting to the psychological part of performance optimisation, let's answer one question: what is web performance? For the majority of frontend developers, the answer would cover things like page response time, speed of animations, load times.
Guess what? The world is a cruel place and unfortunately not only web developers have access to the web. So how do regular users gauge web performance? Usually it's 'fast' or 'slow' ("The SpeedIndex of this site isn't as good as of that one. 280 millisecond slower first paint is the reason, I guess" – said no user without DevTools ever).
These diverging approaches to performance come from the fact that our estimation of time can be objective (the time we can measure with a stopwatch, the way we developers approach it) or subjective (time as it's perceived by users).
The reason why we should be looking at subjective, or psychological, performance is that unless users perceive the site as fast or faster, whatever we've done to our performance optimisation matters very little.
Time perception in humans
Mental activity makes waiting barely noticeable
Perception of time by humans is a complex process. We can sense the flow of time, but the exact nature of the mechanism by which this is done remains unclear. The lack of a dedicated brain area for temporal processing makes understanding the process difficult. This does not mean we are out of control. There is enough knowledge about it for the purpose of performance optimisation. Let's start with the basic functional mechanism.
Event in a nutshell
Our memories about some period in time consist of events. Try to remember your last vacation. Probably, you don't recall it as a continuous process but rather as a set of events: dinner with a loved one, trip to mountains, broken leg (maybe that last one is just me, but nevertheless, you get the idea). The same happens on the web, all interactions with a web application are defined by events: loading a site, requesting a page, searching information and so on.
Almost all of such events can be split further into smaller events or phases. For example, the event of loading a page usually consists of the following two phases:
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
User is looking at the white screen
User starts consuming the information on the page
Here, the original event (fully loading requested page) is not necessary over and might continue in the background, considering some basic optimisations are in action.
Phases during which our brain is triggered into active state and is forced to output information or process incoming one (typing, reading, etc) are called active. On the other hand phases when our brain is idling (looking at the white screen) are called passive. Multiple research suggests that people have a tendency to significantly (by about 36%) overestimate passive durations while underestimating active durations. Why so?
Sometimes there is a big difference between time measurable with a stopwatch, and time as we perceive it
At any given moment our limited attentional resources are divided between all the concurrent tasks, including timing. As aforementioned, the brain lacks a dedicated temporal processing area, and to build our perception of time, it has to use information from different sensors. During the active phase of an event, mental activity drags attentional resources off the temporal processing, making users consider the wait as a shorter one or not noticeable at all.
Passive phase is not defined only by brain idling. Typical features of it are:
Waste of time: The more valuable the customers' time, the more negative their perception of those that waste it
Boredom: This is the result of the idling state. Boredom arises when an individual does not get enough interesting information
Lack of control: Users either have to wait for the event to be over or cancel the event (close the tab in our case). Lack of perceived control has a significant, negative impact on human physical and psychological well-being
Due to these features, users' complaints about waiting, in most cases, are related exactly to the passive phase. Let's summarise:
Events, even remaining objectively unchanged, can be split into active and passive phases
Active phase is well tolerated by users, does not cause troubles and does not need to be treated anyhow. Contrary to active, passive phase is the core of the waiting problem and is the part that should be addressed
Using this knowledge let's proceed to the basics of psychological performance optimisation (PPO).
Reducing perceived waiting time
Psychological performance optimisation does not change the duration of an event; instead it extends the active phase at the cost of the passive one
Here we should make an important note, changing the objective duration of the event is not the aim of PPO even though most of the techniques do reduce objective durations. Instead, it's all about manipulating users perception of time.
So how do we make users perceive an event as a shorter one without changing its objective duration? Simply, within the time limits of an event, we should reduce the harmless passive phase by increasing the tolerable active one. We should either a) start the active phase as soon as possible or b) keep users in the active phase as long as possible. Once this becomes clear, understanding a lot of performance optimisation techniques and their purpose won't be a problem for you.
At first, it might look like an unusual view at performance. But when it comes to the examples of the PPO there is nothing new I could tell. As long as you do performance optimisations, there is a high chance you're already using PPO even, possibly, without realising it. The list of relevant techniques includes but is not limited to:
Critical rendering path optimisation: rendering the very first bits of information on the screen as soon as possible. If we speak events, this one is for loading a site or a new page.
Optimistic UI: update interface in response to user's actions optimistically, disturbing the user only if something goes wrong. Optimistic UI is useful for any type of non-critical action.
Resource hints: rather new specification of special <link> instructions to the browser that speed up communication and connection to external hosts or assets on your own site. Very broad field of application when it comes to events, from faster loading of subsequent pages on the same site to faster loading of the external pages if you need to.
PRPL: pattern in general and its separate parts. Again, when it comes to events, PRPL pattern benefits loading the whole site or a newly requested page.
Animations: probably the most seductive tool available to our disposal. But it comes with a warning. Animations, removing the boredom of the passive wait, indeed can significantly improve time perception of short events, related to the same page: outputting search results, putting item into cart, requesting additional information etc. It might even be used for cross-page transitions in SPAs. But, animations done badly might significantly harm not only performance, but also accessibility and overall perception of the project.
When we talk about psychological time, unfortunately, there is no way we could universally measure perception. But, are there any metrics we could rely upon in order to know how good our site is perceived by users?
What to measure?
Conventional parameters like an onload event are not very informative for measuring perception as they do not take users into consideration. Instead, we should rely on the new generation of metrics:
First Meaningful Paint: this parameter is responsible for triggering your user from passive to active in the phase of the page loading event. But rendering on its own might not be enough. The browser window might still be unresponsive to a user's interactions due to the browser's blocked main thread.
Time to Interactive (TTI): this is exactly the parameter that shows when users can actually use the site instead of simply taking a look at it.
Both parameters can be measured with popular monitoring tools like WebPagetest or Lighthouse. It also lands in Chrome DevTools. It goes without saying that these parameters should be as low as possible. You might also want to keep an eye on the Speed Index parameter to know how fast the visual part (not only the first paint) of your page is being output.
Conclusion
We've covered the basic principles of PPO. I would encourage you to keep going, read papers and any materials you can find on time perception. You will be surprised how weird and controversial our brain is. Better understanding of how humans are wired up might give you new opportunities in your work.
