Those of us who consider themselves developers (including the author of this article) are very task oriented. We like it when we are led to the optimal result , and we feel uncomfortable when we do not have a clear path to the goal. For this reason, we love to know how to do something; we like tutorials and how-to. However, such guidelines are based on certain theories, in-depth knowledge and experience.

Therefore, I will not give you, my reader, a structured answer to the question of how to make a website faster. Instead, I will try to tell you about the reasons and theories, why everything works in a certain way . I will use examples that can be observed offline and, based on the principles of psychology, research and analysis in psychophysics and neurology, I will try to answer some of the questions “why?”, For example:

• Why are time and productivity important?
• Why don't we like to wait?
• Why "faster" does not always mean "better" in the online world?

Alice: And how much is “eternity”?
White Rabbit: Sometimes, only one second.

Lewis Carroll, Alice's Adventures in Wonderland

In addition, we will look at the psychological aspects of some practical situations, such as optimizing the performance of an existing project, or how to be if the competitors site is faster, or how to make users not notice the expectations when using your service. I hope that after understanding these basic “why?” You will be ready to take a broader look at things and the next time you find yourself involved in the optimization process, choose your own, conscious path to an optimal result.

Notes on translation

Notes on translation

This article describes the reasons and theories why our UI / UX works in a certain way. In fact, this is the beginning of the “Why Performance Matters” trilogy, published in English by Denis Mishunov in Smashing Magazine in 2015, and not losing relevance to this day.

• Performance as a perception: the perception of time; (this article)
• Performance as perception: management of perception;
• Performance as a Perception: Managing Patience.

Anyone who takes on the design of a new web project or an improvement to an existing one should understand the contents of this trilogy. You can disagree with her, or on the contrary - to subscribe to every word, but the stated topics are the basis, and you should get your own opinion on them. A lot of additional information has accumulated over these two years: most likely, a completely new trilogy is waiting for us next year. This series of articles allows you to prepare for the update, catch up.
')
By the way, Denis was at the origin of the HolyJS conference - our main and only JavaScript conference in Russia:

• 2016, Peter: performed with the opening keyout ;
• 2016, Moscow: performed with closing keyout ;
• 2017, Peter: Member of the Program Committee ;
• 2017, Moscow: leads the Frontend Performance workshop the day after HolyJS 2017 Moscow .

In other words, Denis is a distinguished speaker, author of wonderful articles and an excellent engineer. If you suddenly decide, as always, to finish this post to the headline and quit: do not stop, read on. Well, or at least add to your bookmarks.

All sorts of how-to, tutorials and guides grow out of simple "why?"

Basic concepts

“I’ve never heard of this before, but it sounds unusually pointless,” said the Quasi Turtle in Alice's Adventures in Wonderland. So, let's start from the beginning: let's go through the basic terminology and principles and define the basic concepts that you find in the article.

Time can be analyzed from two different points of view: objective and subjective (psychological). When we talk about time that can be measured with a stopwatch, we are talking about objective time or “time by hours . ” Objective time has little to do with how users perceive time in the process of waiting or interacting with a website, application, etc. When we talk about the perception of time by the user, we mean psychological time or "time in the brain . " This time is of interest to psychologists, neurologists, and some strange people, such as the author of this article.

Psychological time in our brain usually differs from objective time on our watches.

Performance optimization is the process of improving the speed of a service, speeding up the receipt of feedback or any other response the user expects.

The form of communication that occurs when users have to wait for a response from the system is called human-computer communication. On the other hand, when the system practically does not linger with the answer, we will call it “person-to-person” communication, meaning normal, lively communication with other people we encounter in our daily life.

The concept of performance budget , as Tim Kadlez describes it, is “literally what the title means: you set a budget for a specific page and do not allow the page to exceed it”. For the purposes of this article, we will assume that the performance budget is directly related to time — for example, the page load time, the response time to user input, etc.

Armed with these definitions, let's go down the rabbit hole.

Part 1: Objective time

“Well, here, you know, you have to run as fast just to stay in the same place! If you want to get to another place, then you need to run at least twice as fast! ”
Lewis Carroll, "Through the mirror and what Alice saw there, or Alice through the looking-glass"

As we defined earlier, objective time is time that can be measured using a clock. In this first article of our series, we will discuss how to use this time more effectively for our projects.

"Remember that time is money"

This phrase, which Benjamin Franklin wrote in his book, “The Council of the Young Merchant,” is still valid in our modern world. According to a recent study , a visitor needs just 3 seconds to leave the site. With every time improvement of 1 second, Walmart received an increase in conversion of up to 2% on its website. When the auto parts retailer AutoAnything reduced the load time by half, it gave an increase in sales of 13%. Users value their time and increasingly expect to see a “person-to-person” reaction.

Increasingly, human communication is expected from online systems.

New ways of communication require new thinking in the design and development of online systems. In the web industry, we have been talking about speed and performance for quite a while. We emphasized the importance of fast communication, and we always try to achieve certain goals, expressed in seconds, kilobytes, frames per second, and the like. As a result, we know how to make our sites fast with technology. In addition, we continue to receive recommendations from leading developers and companies on the preferred times of interaction between users. In November 2014, Dimitri Glazkov, Jochen Eisinger and Chris Harrelson in the State of Blink video on the Blink rendering engine proposed a platform success model based on interaction time.

Platform success model

Google’s success model

After several years of recommendations to withstand the two-second loading time, the platform’s success model has technically set a limit on the page loading time, reducing it to one second. Usually the average developer or project manager is satisfied with an explanation like: “Increasing download time leads to a lower place in the search results.” But what recommendations are based on these explanations? How freely can we set goals for improving operation time and budget performance? Simple and understandable numbers are important, but more importantly, can we creatively approach the definition of these numbers, specific values ​​of time? Can we play with them so that as a result the user will notice improvements? These are the questions we will discuss here.

Performance budget selection

As defined earlier, the performance budget is the limit that we set for certain temporary operations of the online system and which we do not allow the system to exceed. Usually, the style of human communication suggests a rather short time interval between the question to the interlocutor and his answer. In psychology, we must take into account four important time intervals when it comes to short duration:

Duration of psychological time

• From 0.1 to 0.2 seconds. Studies call this interval the range of the maximum allowable response time to simulate instantaneous behavior — the interval during which users barely notice (if they notice at all) the delay.

  This is the average person’s reaction time to a simple stimulus, for example, to catch a falling handle or to tear a hand from a burning cup. This is probably the most important time we must remember.

• From 0.5 to 1 second. Maximum response time for an action perceived as immediate . This interval is usually the response time of the interlocutor in a “person-to-person” conversation. Delays in this interval are noticeable, but easily tolerated by most users. During this time, the user must receive confirmation that his command (for example, clicking the button or link) has been understood and accepted, even if the signal has not yet been sent during the previous interval.

  According to JA Miller, most adults can store from five to nine simple elements in their short-term memory . Studies confirmed by a number of experiments, in particular, conducted by M. Green and A. Oliva from MIT, show that “processing complex images of natural origin and recognition of visual objects” takes no more than a tenth of a second. This means that processing short-term memory from five to nine elements, similar to those that participated in the study, should take from 0.5 to 0.9 seconds. Therefore, 1 second is considered the maximum time when the flow of thought of the user remains continuous.

• 2 to 5 seconds. Psychologist Mihai Chikszentmihaii defines the concept of flow or “optimal experience” as a state where people experience concentration, complete immersion in activity and deep enjoyment.

  While the optimal experience time varies according to the subjective parameters, for most of the tasks that the average user encounters on the Internet, the concentration time ranges from 2 to 5 seconds. That is why for several years we have been working with 2 seconds as the optimal page load time.

• 5 to 10 seconds. According to the National Center for Biotechnology Information at the National Medical Library of the United States, the average length of human attention decreased from 12 seconds in 2000 to 8.25 seconds in 2015. And you know what? This is 1 second less than the attention span of goldfish! For the sake of simplicity - and in order to emphasize our superiority over a goldfish - we consider 10 seconds as the absolute maximum time interval for the user's attention . The user will still be focused on his task, but will be easily distracted. This is the time when the system should involve the user in the process; if this is not done, the user is likely to be lost forever.

  Of course, the state of attention focused as a whole does not go far beyond 10 seconds and can reach 20-30 minutes (this long-term attention is called “selective constant attention”). However, first, this time interval is much more subject to fluctuations due to various uncontrollable circumstances; secondly, not many website owners can boast that their site is actively used by the average user for more than a couple of minutes.

Now, if we apply these temporal definitions to the above - mentioned platform success model proposed by the Blink team, we can translate their emphasis on 1-second load time and 0.1-second response time to something more understandable to humans:

• Page loading should happen instantly .
• Users should receive feedback from the specific action immediately .

Instantly load the page and immediately show feedback on the specific action.

People have internal time meters (stopwatches, if you like), which are well tuned from the time of our ancestors - the inhabitants of the cave. Therefore, when choosing a performance budget for your next web project, you can safely rely on the time periods specified above. But time itself is useless, if you do not include it in some context. Consider an example. What do you think in response to the statement: “The process will take 10 seconds”? Do not hurry.

"The process will end in 10 seconds"

Ready? I bet the first thing you thought was, “What process?” Your brain considered possible options based on your life experience, current lines of thinking, mood, and so on. Then, as soon as your brain stopped at the dominant guess, it estimated your expectations regarding the duration of this process against the stated 10 seconds.

In this case, most often we do not choose a random length of time on our own; we choose time according to a specific context. First, the context can be set by our own limitations, such as the need to optimize performance so as not to deceive user expectations in the sense of a human communication style. Secondly, the context can also be set by competitors; in this case, we are dealing with the option of running after the leader in order to achieve the level of performance set by others. We will cover both scenarios below.

The need to optimize performance: the rule of 20%

Here is a situation that in one way or another may affect most of us. Your client says the search function on your site is slow. Your measurements show an average of 5 seconds to display search results. After using some optimization methods, you reduce it to 4.5 seconds. Happy (well, how happy you can be with a figure of 4.5 seconds to display the results), you send an email to the client with information about it. The answer comes: "In my opinion, this is not fast." It's a shame! Let's try to understand why the client did not notice any difference.

Users will not necessarily notice the difference, so it's too early to celebrate

In 1834, one of the founders of experimental psychology, Ernst Heinrich Weber postulated a law defining a differential threshold or just a noticeable difference (just noticeable difference; JND) as the minimum difference in impact (weight, light, etc.) that a person can detect of the time. Later, Weber's student, Gustav Theodor Fechner , applied the law to the measurement of sensations, creating the basis for psychophysics . This work of Weber and Fechner is known to us as the Weber-Fechner Law . The law is still considered by many scientists as the most important tool in understanding perception.

Time is no exception to the Weber-Fechner law. Practical experiments in psychophysics show that time intervals are subject to JND on average from 7% to 18% on average for shorter periods (with a duration of less than 30 seconds). On this basis, a good rule is to simplify Weber-Fechner's law into a 20% rule . That is, in order for users to see the difference in time, the change in duration should be at least 20%.

Weber-Fechner law can be simplified to the 20% rule for short periods of time.

Let us return to our example of a client who does not see any difference in the display of search results after our optimizations. Initially, search results were returned after 5 seconds. Using the 20% rule, we can say that in order for the user to notice the difference, new search results must be at least 1 second faster:

5  × 0,2 = 1  

That is why the client simply did not notice an improvement of 0.5 seconds.

We are talking about performance optimization, but this method works in the opposite direction. If, for example, you are developing a feature that slows down your web page, you can apply the 20% rule to determine if the performance will be reduced at all. Allowing our code to get a little slower without harm to the user is called regressive permission .

Note: When we talk about 20%, we mean a “just noticeable” difference. Noticeable does not mean significant . For users to rate your performance optimization, you must go far beyond this threshold.

But what will you do when a competitor enters the market with significantly better performance for a comparable function? What if a regression resolution of 20% relative to a competitor’s time is technically simply impossible for us? In this case, we should at least strive to what J. Moore in his book “Dealing with Darwin” calls neutralization .

Neutralization, or the race for the leader

Temporary neutralization occurs when the time difference between the two services is noticeable, but does not affect the user's preference to choose one service instead of another. In this case, reliability, usability, and other quality- related service factors play a much larger role. In other words, time neutralization is good when you provide services better than competitors.

What to do when your competitors perform the same function, but much faster?

Returning to our example again with the output of search results in 5 seconds, let's assume that a competitor enters the market with a very similar search service: the same functionality, the same results and the same sensations. The problem is that the results of their search are shown in 2 seconds, not 5. Applying the 20% rule to our 5 seconds does not make sense in this situation. We will not overtake them with such our time; rather, we should at least match the competitor. We can make some logical assumptions here:

1. We cannot simply reduce the search time to 2 seconds (if it were that simple, we probably would have done so already).
2. If the value of 2 seconds is unattainable, the next best option would be to use the 20% regression permission rule relative to the competitor time: 2 seconds + 20% = 2.4 seconds.

At a time of 2.4 seconds, users will not notice any difference between the display of search results by us and our competitors. But if we can not provide a time of 2 seconds, then perhaps the value of 2.4 seconds is also impossible.

We can not match either the time in 2 seconds, or 20% regression permission

When comparing two durations (2 and 5 seconds, in our case), we will find a “magic” psychological threshold between them. Duration of time that exceeds this threshold will be perceived by the user as “closer to 5 seconds”. A duration of time less than this value will be perceived as “closer to 2 seconds.” Surprisingly, studies in the perception of time by animals , in particular, conducted by R. Church, M. McInnis, P. Gilhardi and others at Brown University, show that this threshold is not just an average of two durations. This threshold turned out to be predictable and turned out to be a geometric average , rather than an arithmetic average. Studies with people confirm the same conclusion.

From the mathematics course, we can remember that the geometric mean between two numbers is given by the following formula:

 √ (A × B) 

Applying this formula to our numbers, we get:

 √ (2 × 5) ≈ 3,2  

Geometric mean as an illustration of neutralization

For our results at 2 and 5 seconds, a value of 3.2 seconds is the neutralization threshold. At this point, users will notice the difference, but the difference will be perceived as irrelevant to their choice of service. However, other factors, such as quality of service and reliability, will play a much more important role, but managing them is beyond the scope of this article.

This concludes our basic analysis of objective time. By now, we had to figure out how some of the widespread concepts in the web industry appeared !!! , such as page load time and response time for the system. We also have a performance budget tutorial , and we understand how to deal with time when we need to improve website performance or catch up with competitors' website performance .

But, as we mentioned earlier, a different kind of time is usually much more important for users than that measured by a stopwatch. Ladies and gentlemen, let's meet in the second part and talk about psychological time!