Chapter 10. Going Beyond Performance

In Chapter 1, Faster Web—Getting Started, of this book, we mentioned that performance is also about perception. Indeed, as previously stated, time measurement depends on the moment of measurement and can vary depending on the complexity of the task to be performed, the psychological state of the user and the user's expectations as he might have defined them according to what he considers to be the software of reference when executing a certain task. Therefore, a good manner in which an application does what it has to do also means that the software would have to meet the user's expectations as to how this computer program ought to do things. Hence, quicker is not always better.

In this chapter, we will try to better understand the principles behind UI design when it comes to the perception of performance. We will see how these design principles can have a real effect on the user's subjective perception of time and improve perceived performance when there...

Clocked and perceived time

In the previous chapters, we have addressed the question of performance as it is measured by objective time. Objective time is measuring, by the means of a tool that divides, in equal units of measurement, a duration between an imminent future and an imminent past whose parts are in a continuous persistent flow of being.

This definition of objective time shows us that time is the effect of a movement of existence that takes us from an undetermined future to the state of a frozen past by the means of a constant present. It is objective inasmuch as a third-party being is used as a witness to this passing of being from one state to the other by dividing it into equal units of measurement. This is the reason why objective time is often named clocked time, as it refers to the concept of dividing time into equal units of measurement (for example, seconds, minutes, hours, and so on). Obviously, the field of science that studies objective time is Physics.

This being said...

Speed perception

Firstly, according to Paul Bakaus, a person's consciousness lags about 80 milliseconds behind what is currently happening. Indeed, the subjective present is always an objective past. Moreover, a person will need more time to understand and fully perceive current events if these are more intellectually complex in nature. These factors are true of any person. Thus, all users will unconsciously grant this free start up time for computer processing.

Secondly, the emotional state of the user has a strong effect on perceived time. In a fairly recent study by Awwwards and Google [1], it has been stated that anxious or rushed users will perceive more than 50% of websites as loading slowly compared to less than 25% for calm and relaxed users. This is equally true for users that are on the move compared to those that are comfortably sitting down:

The influence of a person's emotional state or level of activity when it comes to speed perception

Thirdly, age is an important factor when...

Reasonable delay and response times

Another factor is what the user perceives as reasonable delay. As stated in Chapter 1, Faster Web—Getting Started, this is directly related to what the user considers to be the optimal performance of a certain type of application. This optimal performance is often determined according to what the user might consider to be an application of reference. In the case of web-based applications and websites, there are certain thresholds to be taken into account as they are shared amongst all web users on average.

Firstly, most users consider a response time of 300 milliseconds or less to be instantaneous. This is in great part explained by the previously mentioned "consciousness lag." As for response times between 300 milliseconds and 1 second, these are considered to be a reasonable delay and give the user the impression of a smooth transition. Many users will start losing attention and begin feeling impatient beyond a three second delay in response time unless...

UI design principles and patterns

Given all the previous factors and notions, certain UI design principles can now be abstracted and understood.

Firstly, speed is important to users. So, if no other optimization of your application can be done, make sure your users have the possibility to start using the application even before the initial page has finished rendering. This means getting to the First Meaningful Paint (FMP) of the page as quickly as possible in order to reduce the time it takes to get to the "time to interactive," which is the first moment when a user can start to interact with the application. One basic technique that can help you load the page's "above the fold" content before anything else is to place all blocking JavaScript at the end of the body of the page. Also, certain parts of the page can be cached for faster rendering or can be loaded in the browser through AJAX requests that are triggered with a periodical timer for example. Finally, HTTP/2's server push feature...

"Beyond Performance" tools

In order to get a better idea of how to implement these types of solutions, we will create an animated transition that will wrap itself around a very slow PHP script. Thus, we will try to influence the perceived speed of the original script.

Our original PHP script will simulate slow execution by running a sleep command. Here is the content of the original script:

<?php

// chap10_slow_before.php

sleep(5);

echo 'The original page loads very slowly...';

If we run this script immediately, we definitely perceive that the script is slow and that the elapsed time could make us believe that something is going wrong:

The script's slow execution might make us believe that something is going wrong

The script truly gives us the impression that it is momentarily hanging.

We will now create an HTML script that will query the original PHP script and obtain the script's output through an AJAX request. This new HTML script will also add some transition animations in order to influence...

Summary

In this chapter, we have better understood the principles behind UI design when it comes to the perception of performance. We have seen how these design principles can have a real effect on the user's subjective perception of time and how they can improve perceived performance when there are no real optimizations left to do.

We hope that you have found this book useful to better understand the notions of performance and efficiency, to discover most of the new underlying web technologies that make up what the Internet has become today and to help you on your way to mastering the Faster Web.

References

[1] https://www.awwwards.com/brainfood-mobile-performance-vol3.pdf