Loading time is one of the important variables that influence the success of a website. Unfortunately, it is impossible to have a site that loads instantaneously. Some waiting times are technically incompressible. This is why today we offer you another vision of web performance optimization.
What if it was possible to make a web user forget that he is waiting?
Waiting time, our perception is very subjective
To begin with, it is good to distinguish between two different levels:
The effective loading time: easy to measure, it represents the interval between the user’s action and the obtaining of the result.
The waiting time perceived by the user: measuring the perceived time is a complex exercise. Indeed, we are interested here in a subject that will depend on many criteria (effective loading time of course, but also variables related to the user’s context and environment).
A study has looked into the perception of loading time and provides us with this information:
Less than 100ms: the delay is not perceptible;
Less than one second: the delay is perceptible, but the user assumes that the processing is in progress and that it is not abnormal;
More than one second: The sense of speed is lost;
More than 10 seconds: we’ve lost most of the user’s attention. Even if he does not abandon his action, he may have forgotten part of the associated context, and resuming the action in progress may be problematic.
These first elements being brought, we can clearly see the difficulty of the stakes: almost no web page is displayed in less than a second and even less in 100ms, even under ideal conditions.
We will therefore see how to play on the perception of loading time, that is to say how to make your visitors think that your page is faster than it is in reality.
In short: Our perception of time varies according to the context and many other elements. Where the actual loading time may be technically incompressible, there are often solutions to play on the perceived time: this is the subject of the rest of this article.
Focus on important content and essential actions
Why don’t we just start by rephrasing the basic problem? In the absolute, a web user is not interested in the loading time of your page! He is looking to perform an action, or to consult a content. It is therefore the waiting time before availability of this action or content that should interest you.
You can quite naturally establish a hierarchy on the importance of the contents of a given page, even if you have to take into account that all your Internet users do not have the same interests or the same behaviors.
By displaying the most important content of your page as soon as possible, you allow your users to quickly obtain the information they are looking for and thus reduce the feeling of waiting.
For example, when an Internet user arrives on a product page, you must first provide him/her with the information directly related to the product: description, price, illustrations, etc.
Conversely, some contents or functionalities are not immediately useful to the visitor. This is the case for example with social widgets: it is easy to understand that loading this functionality before the main content is of no interest. Why would a user share content that he has not yet viewed?
In the same vein, it is important to prioritize the display of content above the waterline, i.e. content that is immediately visible to a user (without having to scroll down the page).
This approach is all the more interesting when your page is long. The implementation of this concept is however quite technical (base 64 images, CSS inlining, etc), so we won’t go into details here, but feel free to ask your questions in comments.
In short: your most important contents must be present above the waterline (the user must not scroll to see them) and loaded in priority. You must make sure that secondary content (social widgets, etc.) does not delay the loading of the main content.
Notify the user that his action has been taken into account
When on your site, certain operations do not return an instantaneous response to the user, make sure to inform the user that his request has been taken into account.
As a reminder, you can consider an instant response for a delay of less than 100ms.
Chances are that you may have repeatedly clicked a button, thinking that the action was not taken into account. Then to understand a few moments later that the result was simply slow to arrive. We’ve all had experiences like this, and yet this frustration can, in most cases, be avoided very simply.
A simple change in the status of the button, for example, or a message indicating that the request is being processed.
This may seem obvious to you, but keep in mind that sites are often tested under conditions that do not reflect reality. An action with an instantaneous response on a site that is being tested on a company’s local network will necessarily have much better results than a 3G user on an older generation mobile phone.
All your actions do indeed lead to a response signal? That’s good, but we can go further!
Let’s take the example of an Internet user assigning a note on a product sheet. This operation is not critical and the risk of error is almost zero. Why wait to inform the Internet user that his action has been taken into account? As soon as the user clicks, you can thank him for his action, no need to wait for the result of the request to the server, since a possible error will have no significant consequence.
Do the test with the share bar on social networks in this article 😉 It’s a very good illustration since some social widgets even go as far as incrementing their share counter from your first click, even before displaying the popup to allow you to publish!
You will probably find comparable actions on your site, which you can handle optimistically without any prejudice to your users.
In short: make sure that any user interaction with your site results in a visual notification (by testing your site in degraded conditions). Identify non-critical actions, which can be handled in an optimistic way to indicate directly to the user that the result of his action has been achieved, even if you are not absolutely sure.
Use relevant load indicators
Unfortunately, not all interactions can be treated optimistically. The simplest and most common reason: you need to query the server to retrieve content or a result.
There are cases in which the wait can be significant, because some operations are complex and cumbersome (searching for the cheapest airline ticket, etc).
An action must send a signal, and that signal must be consistent with the expectation that will follow. When you know that a significant amount of waiting time will be required, consider using a load (or progress) bar for example.
Indeed, it is imperative to signal to your user, not only that the action has been taken, but also that processing is in progress. Otherwise, you expose yourself to the risk that the user thinks of a malfunction, restarts his action or abandons it completely.
The progress bars offer the additional advantage of giving the user an idea of the remaining waiting time, thus providing additional information. However, be careful not to underestimate the announced waiting time, in which case you would cause significant frustration.
The choice of indicator is not insignificant, since you can even give the illusion of speed. In this article, we realize the importance of the perceived time: by playing only on the graphical aspect of a loading bar, your users may think that the wait is 10% shorter!
Be careful, however, don’t overuse the loading indicators. If the wait is low, the presence of an indicator will be detrimental, since even if its display is short, you have sent the user a signal indicating that processing is slow.
In short: load or progress bars are relevant indicators when an action results in a slow processing time. Be careful not to use them otherwise. Working on the graphical aspect of these elements can represent a 10% gain on the perceived wait.
Take advantage of your pop-ups (language choice, promotions).
Many websites display, via a pop-up, promotional content for example or a request for the choice of country. E-commerce giants regularly use this technique and rarely take advantage of it to improve the experience of their users. On the contrary, pop-ups most often contribute to degrading it.
Who has never seen a page load, start to read a few words, and be suddenly interrupted by the appearance of a pop-up? Why didn’t this pop-up load in priority if they wanted to impose it on us?
A more relevant use of such a pop-up would be to display it as quickly as possible, and thus allow the page to load in the background in an invisible way, since it is hidden by the pop-up.
Indeed, by the time the visitor consults the promotion presented (or other), a part of the requested page will have had time to load.
Contrary to some approaches used, on the one hand, we avoid the frustration of interrupting an action started by the user, and on the other hand, we hide a large part of the loading time of the main page (which takes place in the background while the user is consulting the pop-up content).
So why is this technique rarely applied? Probably because if the site was not technically designed to anticipate this kind of use, it becomes quite complex to implement. We remind you: the loading time of your site is a key factor of success, the speed of your site must be considered as a priority feature in your specifications! A good solution is to set a web performance budget.
In short: while pop-ups are often a source of frustration because they interrupt the user’s navigation, they could be displayed immediately and used in a relevant way to preload the page content in the background.
Learn from your users, preload content
Several techniques exist to preload a web page at different levels. The general concept is to anticipate that an element is going to be necessary during a next action of the user, and thus to anticipate the treatments required by this action.
Thus, we will accelerate the loading when the user will trigger the concerned step.
A simple example: you have a landing page A, which leads 95% of its visitors to a page B. In such a case, it is possible to preload the contents of page B as soon as page A has finished loading.
And we can go even further since some browsers not only allow you to anticipate the recovery of the contents, but also to pre-calculate the rendering of the page. So when the user moves from page A to B, the result is almost instantaneous, because he has already downloaded the contents and the browser has done the necessary processing upstream to display B!
The future looks quite promising on this subject. For example, probabilistic approaches are being developed, in particular to take into account the bandwidth or (mobile) battery constraints of the Internet user.
If a fibre optic Internet user has a 30% chance of consulting a C page, it may be considered interesting to preload it, as its connection allows it. If we are talking about a mobile Edge user with a low battery, taking the risk of loading a page that has only one chance out of 3 to be consulted is probably not a good calculation.
There are a few simple use cases of preloading, but the advanced use of this technique is often a complex subject. Fortunately, several tools are being developed to automate its implementation based on the exploitation of navigation data.
In short: By studying the behaviour of visitors to a site, we are led to anticipate certain navigation patterns. We can take advantage of this knowledge to perform pre-processing in order to improve loading time. A subject that is likely to have a bright future!
Conclusion :
Waiting is sometimes necessary, some treatments are incompressible. But with the techniques we have mentioned, you have the basis that will allow you to minimize the waiting felt by your visitors. Their satisfaction on your site will be improved.
Also make sure you have optimized your loading times. Hiding the waiting time is a good thing, reducing it is necessary and even indispensable! You can read about the technical optimizations that can be made on your site by analyzing it on dareboost.com.
