How to load long-time-taking content?

Question

We have a page that takes very long to load (approx. 15 seconds, might be even more for some clients) as the data it generates is heavy and slow.

While we are trying to directly speed it up, 15 is so far the lowest we can go for now (used to be more!) and since it's the first loading page of our web app, it can be very frustrating (some people want to navigate away and have to wait for page load).

What I'm asking is, would it ruin the user experience if we loaded the fast components first, showed the page, and then showed an AJAX load on the parts that take a while to load, so that users can reach the page faster and navigate through it?

Answer 1

Does the user need all the parts to be loaded to use the page effectively ?

If so, then going with the approach of loading parts separately might not be a good experience as users might want to interact with these parts and find that they can only partially interact or not interact at all might ruin the user experience.

However if you can interact with the parts as they are loaded I would recommend going for it as users will be able to perform some actions in the intermediate time. That said, there are some recommended best practises how to handle long load times which you can use for the remaining loading parts

• Keep users informed of how long they have to wait : Users can get fidgety if they are not sure of how long they have to wait. Hence using an indicator to denote how much time is left or how much is loaded can be helpful. To quote this article

On the web, this means you should give your visitors a clear indication of how long they need to wait. Obviously, an absolute time would be most convenient. However, a percentage that indicates the loading process also does the job.

If we see that something is happening, it gives us a positive feeling, comforts us, and makes us more forgiving – even if the loading takes longer than expected. Besides, by keeping your visitors in the loop, you’re playing with your cards on the table and putting them in charge; It’s now their decision if they want to wait, or get a drink in the meanwhile.

Here are some examples of sites doing it well

• Inform users about why they are required to wait : A simple way of handling this might telling them about what is loading (like say images or the data is being fetched) with updated notifications to give them a semblance of how much is left .If that data cannot be computed or displayed, try using distractions to keep them occupied while they wait.A good example is HipMunk who uses distractions to keep people entertained while asking them to wait

• Overestimate the wait time while showing it : A common tactic is to overestimate the wait time by a reasonable amount to ensure you can achieve the load before the expected time. To quote this article

Research has shown that beating expectations will lift people’s mood. Articles and accounts from former Disney employees tend to support the fact that they will overestimate the times found on those pre-ride signs. If a guest makes it through early, they end-up with more time to spend on other rides, or more time to spend money in gift shop following the ride!

Achieving the expected time seems to be an emotionally neutral event. However, if the wait is longer than what was promised, a very negative backlash results. People become impatient and lose faith and trust in the system. Therefore, the axiom here is avoid over-promising and under-delivering.

This should hopefully give you some pointers about how to keep your users engaged during the weight time and reduce your dropoff rates

Answer 2

To answer your question: Yes, load anything non-critical via ajax if your page is loading too slow. You may want to do some data & opinion gathering to see which parts of the page are used the most by your users. Load those parts with the page so they can be shown immediately, and load everything else afterwards. This lazy loading is especially useful for any content below the fold. Just be careful of making too many separate requests because this could slow down the overall loading.

I saw some research recently that said that users tend to think they are waiting longer than they actually are when they see little waiting spinner animations. One way around this is to use some kind of animation that takes time, distracts the user, but also shows them that content is on its way. Maybe the content can slide in from the side or something? (Sorry I don't have any good examples of this concept...)