For a positive user experience, a website should load in two or at most three seconds. Based on what cognitive psychology tells us, a website should ideally load in less than one second!
But, more important than how long a website actually requires to load is how fast the user perceives it to be. In this article, we explain the difference between perceived and actual loading time, how people perceive time, and how you can improve the subjectively-experienced loading time of your website.
Time can be thought about from an objective and a psychological perspective. Time measured with a stopwatch is the objective time. Optimizing the objectively-measurable loading time of a website has technological and financial limitations. Developers and web designers therefore have to take actions to ensure that the users subjectively perceive the website as faster than it actually is.
This analogy from everyday life will help to illustrate the difference between these two concepts.
A few years ago, the company Eurostar, which connects London and Paris with its fast trains, invested billions of pounds to reduce the travel time between London and Paris by a good quarter of an hour. They thought this would please their customers.
In a TED Talk, Rory Sutherland pointed out that it would perhaps have been wiser to make the journey more pleasant for travellers instead of spending a huge amount of money for a relatively insignificant shortening of the travel time.
For example, they could have equipped the trains with Wi-Fi for a fraction of the cost which would have improved the user experience and reduced the perceived travel time. The travellers barely noticed the reduction in travel time.
Website operators often make the same mistake. They play around with technical performance improvements but lose sight of the main goal: creating a positive user experience.
It is not just absolute page speed that decides a website's performance; our brain tells us whether a website is loading slowly or quickly. According to Ilya Grigorik from Google, perceived performance is dependent on the expected performance, the user experience, and the actual loading time.
It doesn't make a big difference to the user if the site is displayed in one second, or in 0.8 seconds. According to the Weber-Fechner law, differences in length of time are not perceived until there is a different of at least 20%. But if the user feels like they have to wait a long time before anything can be seen on the site, they'll have a negative first impression of the site. This doesn't mean you should neglect the optimization of the technical loading time – just the opposite! Ideally, you would improve both the actual and the subjectively-perceived loading time.
It's not news that slow-loading websites negatively impact user behavior and lead to increased bounce rates; this has been confirmed in numerous studies. But what you might not know is that increased loading times for online retail can mean a loss of up to 15 million Euros per second of loading time. The bounce rate increases significantly per second of loading time, and the conversion rate sinks up to seven percent per second.
If you take into consideration that users leave after three seconds of loading time, it will become clear just how important fast loading times are. Google has proved that an increased loading time of even 100 milliseconds leads to a strong reduction in search inquiries. Amazon also loses a percentage of sales if the loading time of the sites is increased by 100 milliseconds, according to Greg Linden.
Why do internet users react negatively to long loading times? To answer this, you have to understand how complex behaviors. These behaviors consist of a series of stimuli and actions. For example, if we hammer a nail into the wall, we immediately see the result of our behavior. Hammering is instantaneous. Now imagine that we are virtually swinging the hammer. In this case, the nail is driven into the wall a few seconds after we have ended our movement. Only then can we begin the next stroke. How do we perceive this waiting time between the stoke of the hammer and the reaction of the nail?
We cannot differentiate stimuli less than 100 milliseconds. That means that if the click gives feedback within this time frame, our brain perceives the action as "immediate". We perceive short delays that are less than a second, but they do not break the rhythm of perception and action. Longer delays, however, allow our brains to begin to wander and allow other impressions to arise in place of the current intention; this causes the user stress. To understand the above example with the virtual hammer: In order to maintain the virtual experience, the virtual hammer must create a reaction within 0.1 seconds after the swinging movement.
Based on the findings of perceptual psychology, usability guru Jakob Nielsen created three important time intervals for the perception of the reaction time of a web presence back at the beginning of the 1990s.
Up to 0.1 seconds: : The user does not recognize any perceptible delay. Its behavior has an immediate effect.
Up to 1 second: The delay is slightly perceptible, but the flow of work is not interrupted.
Up to 10 seconds: The user must wait and must therefore actively maintain his or her concentration.
That means that after a waiting time of ten seconds, attention clearly sinks and the probability that the user will start doing other things increases. This can lead to them leaving the website and moving to the competition.
Times are absolute and cannot be changed. That is why we should aim to keep the loading time of a website under one second – or even better, under 100 milliseconds, as described in the introduction. This is obviously impossible when you look at how many different things have to be done before a website can be displayed in the browser window: DNS lookup, creating the TCP connection, HTML parsing, downloading style sheets, and the execution of JavaScript. The current study of conversion power shows that, of the top 100 German online shops – measured by sales – around 70 percent have a loading time of, at most, three seconds. Around 25 online shops even show a loading time of only 1.5 seconds.
Technical optimization of loading time so that it is less than three seconds is an aspect of conversion optimization. A second aspect is the reduction of the subjectively perceived loading time. This must also be observed and optimized in order to increase the conversion rate. It is possible to shorten the objective loading time of three seconds psychologically, or to reduce an objective loading time of five seconds to a perceived time of three seconds.
Here are a few tips for improving the perceived loading time of your website:
1. Integrate progress indicators
You can reduce the perceived loading time by having a loading bar displaying what percentage of the site has already been loaded, because the user is informed of how the site is progressing, and how long they must wait before they can interact with the site. APPs, Facebook, and YouTube also work with so-called progress indicators – also called preloaders.
2. Load "above-the-fold" contents first
It is also important to program the code of the website in such a way that the area "above the fold" – that is, the visible area – loads first. This means the user will quickly be shown something that they can look at or read. After that, the website contents "below the fold" can be loaded.
An eye-tracking study by the Nielsen Norman Group showed that, when the most important contents on a website were loaded first, users spend about 20% of their time looking over this content. However, if this area takes eight seconds to load, a user will spend only 1 percent of their time viewing this area.
3. Use progressive JPEGs
The loading time can also be shortened if you use progressive JPEGs. This means that the user will quickly be shown a rough thumbnail before the entire image file is loaded. This is done by using interlaced scanning to display the image. This procedure is especially useful if an image's loading time is longer than a half to a whole second. Most applications, however, store JPEGs in baseline format. If an image is stored in progressive format, it can be converted with GIMP or Photoshop, for example.
4. Preload products
Preloading content functions similarly to the focused loading of the "above-the-fold" area. Therefore, relevant content can be immediately shown to the user and the rest of the site will load in the background. Amazon works this way: the first 3 products are always shown while the rest are loaded in parallel. For this to work, it is imperative that a concrete search inquiry was placed, so that the user can see the results they searching for.
5. Use auto-preloading
Auto-preloading means the automatic preloading of content based on the evaluation of user behavior on a website. Based on the data evaluation, the content the user will view next can also already be loaded. Thus, he or she will have this available without a delay and unnecessary loading will be avoided. Subpage can be preloaded when the system recognizes that the cursor is moving in the direction of a link. Find out more about preloading in this article.
6. Make inevitable wait times visible to the user
For example, with travel portals and flight search engines that comb through thousands of providers, when users have started an inquiry, the perceived value (the long loading time) should be made visible. Thus, these portals usually show a loading bar that shows how far the search is progressing and the concrete number of the thousands of suppliers that were compared for the personal search inquiry.
In general, fast loading time is one of the most important factors in a website's success. Even with a site loading time of 3 seconds, the conversion rate sinks drastically. All possible measures should be taken to keep the perceived loading time as short as possible, both objective and subjective. Don't blindly follow the recommendations of website speed testing tools, because these only answer the question of whether all best practice measures have been implemented. They say nothing about whether the website is fast enough for the user.
Published on May 4, 2017 by Raphaela Kyra Bohl