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?