How do we avoid jumping content due to asynchronous loading

Question

Delivering content on the web has over the years become more complex and heavier. Dependencies on third parties and external web services is increasing, causing longer loading times. The “click and wait” analogy is frustrating for users, and to overcome this problem, asynchronous technologies have been implemented on the web with great success. The reduction of loading times on web requests is an important step forward.

Lately, I’ve noticed that the asynchronous loading have caused content to jump, causing the user to re-focus and possibly re-aim a mouse-click or a touch event. Even worse, the focus can sometimes be pushed out of the viewport, which is at best confusing.

To address this problem, we need to stop the page from jumping. Question is how we do that best. We can most certainly not go back and download the whole web page before displaying it in the old request-response fashion. An alternative would be to show the structure of the web page with blanks which would lately be filled in upon asynchronous loading, but the page would look empty at first glance, and user would start to wonder why.

How do we avoid jumping of content upon asynchronous feeding without displaying an empty webpage on first rendering?

Answer 1

Assuming that the technology in use supports it, an improved experience will be

• If have never retrieved data from that source, but do know the size, render a place-holder image. A subtle loading animated gif, with different desaturated icon per source.

• If have never retrieved data from that source, and don't know the size then render a place-holder at the smallest expected size, then animate expansion to new size after content is received.

• If have retrieved data from this source before, then render a version of the data placed into local storage (e.g. could store previous HTML and data, or even store a "screenshot" of that component). Display changes if newer data is sent from sever. May need a "last refreshed at" or "data changing now" hint.

Answer 2

Nobody got it right actually. It has to do with smartphones and touchscreens. Once you get past the BS of smartphones being a computer in your pocket you will soon quickly realize that touch and non touch devices are more different then they are alike.

Webpages are designed now with touch pad first which asynchronous loading works because on a small screen estate you only see a few items at once which you swish with your fingers and the rest load later as you go.

On a laptop/desktop however you see all the 20 items/objects sometimes moving at once all trying to load causing the page to jump around then finally the ads load THEN you can navigate. The ads want to be the first to load by the way so if the webpage is busy with other crap to load it will not do it until the ads do it then you often get something blaring in one of your 10 tabs open if it's a desktop/laptop.