Website loading time is one of the important variables influencing the success of a website. Unfortunately, it is impossible to have a site that instantly loads a site that loads instantly, some waiting times are technically incompressible. That’s why today we offer you another vision of optimizing web performance.
What if it were possible to make a user forget that he is waiting?
Website Waiting time, our perception is very subjective
To start, it is good to distinguish two different levels:
The actual website loading time: easy to measure, it represents the interval between the action of the user and the obtaining of the result.
User perceived waiting time: the measurement of perceived time is a complex exercise. Indeed, we are interested here in a subject that will depend on many criteria (actual loading time of course, but also variables related to the context and environment of the user).
A study looked at the perception of website loading time and goes back to this information:
Less than 100ms: the delay is not noticeable;
Less than one second: the delay is perceptible, but the user assumes that the treatment is in progress and that this is not abnormal;
More than a second: one loses the sensation of rapidity;
More than 10 seconds: we lost most of the user’s attention. Even if it does not give up its action, it risks having forgotten some of the associated contexts, and the resumption of the action in progress is likely to be problematic.
These first elements are brought, we 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.
So we will see how to play on the perception of loading time, ie how to make your visitors think that your page is faster than it actually is.
In short: Our perception of time varies according to the context and many other elements. Where the actual loading time can be technically incompressible, there are often solutions to play on perceived time: this is the subject of the rest of this article.
Focus on important content and essential actions
What if we simply reformulate the basic problem? Absolutely, an internet user is not interested in the loading time of your page! It seeks to perform an action or to consult content. It is, therefore, the waiting time before the availability of this action or content that should interest you.
You can naturally establish a hierarchy of the importance of the contents of a given page, even if it is necessary 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 a user arrives on a product card, you must first provide him directly with the product: description, price, illustrations, etc.
Conversely, some content or functionality has no immediate utility for the visitor. This is the case, for example, of social widgets: it is very easy to imagine that loading this functionality before the main content has 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, ie the content that is immediately visible to a user (without having to scroll to scroll the page).
This approach is all the more interesting when your page is long. The implementation of this concept is however quite technical (images base 64, CSS inlining, etc), so we will not go into the details here, but do not hesitate to ask your questions for comment.
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 ensure that secondary content (social widgets, etc.) do not delay loading the main contents.
Notify the user of taking his action into account
When on your site, some operations do not return an instant response to the user, be sure to notify the user that their request has been taken into account.
As a reminder, you can consider an instant response for a delay of less than 100ms.
It is a safe bet that you have repeatedly clicked a button, thinking that the action was not taken into account. Then understand a few moments later that the result was simply slow to happen. We have all had experiences of this kind, and yet this frustration can, in most cases, be avoided very simply.
A simple change of state of the button for example, or a message indicating that the request is being processed.
It certainly seems like a source, but remember that often sites are tested under conditions that do not reflect reality. An action whose response is instantaneous on a site in a recipe on the local network of a company will necessarily result much better than those of a 3G surfer on a mobile of the old generation.
Do all your actions lead to a signal to take into account? That’s fine, but we can go further!
Let’s take the example of an Internet user assigning a note on a product card. This operation is not critical and the risk of error is almost zero. Why wait to inform the user of the taking into account of his action? From the user’s click, 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 consequences.
This is a very good illustration as some social widgets will even increment their share counter at your first click before you even display the popup To allow you to publish!
You will probably find on your site comparable actions, which you can deal with optimistically without any prejudice to your users.
In short: make sure that any interaction of a user with your site gives rise to a visual notification (by testing your site under degraded conditions). Identify non-critical actions that can be processed optimistically to tell the user directly that the result of his action has been obtained, even if you do not have the absolute certainty.
Use relevant loading 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 expectation can be significant because some operations are complex and cumbersome (search for the ticket at the best price, etc.)
An action must return a signal, and this signal must be consistent with the expectation that will follow. When you know that a long waiting time is going to be necessary, consider using a load bar (or progress bar) for example.
Indeed, it is imperative to inform your user not only that the action has been taken into account, but also that the treatment is in progress. Without this, you expose yourself to what the user thinks of a malfunction, restarts his action or abandons it completely.
The progression bars also have the advantage of giving an idea of the remaining waiting time to the user, thus providing additional information. However, be careful not to underestimate the waiting time announced: in which case you would cause considerable frustration.
The choice of the indicator is not trivial since you can even give an illusion of speed (page in English). In this article, we realize the importance of perceived time: by playing only on the graphic aspect of a loading bar, your users may think that the wait is 10% shorter!
Be careful, however, do not abuse load indicators. If the wait is low, the presence of an indicator will be harmful, because even if its display is brief, you have sent the user a signal that the processing is slow.
In brief: loading or progression bars are relevant indicators when an action causes a rather slow processing. Be careful not to use them otherwise. Working on the graphical aspect of these elements can represent a 10% gain on the perceived expectation.
Take advantage of your pop-ups (choice of language, promo)
Many websites to display, via a pop-up, promotional content for example or a request for the choice of countries. E-commerce giants regularly use this technique and rarely benefit from it to improve the experience of their users. On the contrary, pop-ups often contribute to degradation.
Who has never seen a page load, start reading a few words there, and suddenly be interrupted by the appearance of a pop-up? Why did this pop-up not take priority if we want to impose it?
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 invisibly since hidden by the pop-up.
Indeed, the time the visitor consults the promotion presented (or other), part of the requested page will have had time to take charge.
Contrary to certain approaches used, on the one hand, the frustration of interrupting an action initiated by the user is avoided and, on the other hand, the loading time of the main page (which is done in Background while viewing the content of the pop-up by the user)
So why is this technique rarely applied? Probably because if the site was technically not 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 success factor, the speed of your site should 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 frustrating because they interrupt the user’s browsing, they could be displayed immediately and used in a relevant way to preload the content of the page 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 will be necessary at the time of a next action of the user, and therefore to anticipate the treatments required by this action.
Thus, the loading will be accelerated when the user triggers the step concerned.
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 the loading of page A.
And we can go even further because some browsers not only allow to anticipate the recovery of the contents but also to precalculate the rendering of the page. Thus, 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 upstream the necessary processing to display B!
The future looks quite promising on this subject. For example, probabilistic approaches are being developed, in particular, to take account of the user’s bandwidth or battery (mobile) constraints.
If a fiber optic user has a 30% chance of seeing a C page, it may be worth considering the preload, as its connection allows it. If you’re talking about an Edge mobility user with a low battery, taking the risk of loading a page that has only one chance in 3 to be consulted is probably not a good calculation.
A few simple cases of preloading exist, but the extensive use of this technique is often a complex subject. Fortunately, several tools are developed in this direction, to automate its implementation from the exploitation of navigation data.
In short: By studying the behavior of visitors to a site, we are led to anticipate certain navigation patterns. This knowledge can be used to perform pre-treatments to improve loading time. A subject possibly full of future!
Waiting is sometimes necessary, some treatments are incompressible. But with the techniques that we have mentioned, you have the basics that will minimize the expectation of your visitors. Their satisfaction on your site will be improved.
Also, make sure you have optimized your loading times. Hide the waiting is a good thing, to reduce it concretely is necessary or even indispensable! You can freely read the technical optimizations available on your site by analyzing it on dareboost.com.
As an owner of Gossip Web design Productions, I am a graphic and web graphics designer/video producer that strives to consistently upgrade my skills in order to provide solutions for my clients’ design problems—both online and offline (print media).