How a Bad Delivery Can Ruin Your Website’s Presentation
You open a page on your desktop, tablet, phone, TV, anything and you expect one thing across all of them to be the same: you see the information you want, right away.
This universal expectation can be the difference between someone staying on your website or someone leaving your website. How you handle the loading on certain content-rich sites can ensure that you retain visitors for longer periods of time despite the factor of having to load a LOT of information.
Not everyone browses in the same web-browser environment. So we need to pay attention to the construction of websites to adapt to very different demands.
Some people are at home on high-speed internet, some are on an LTE mobile network. People can be in those same environments with single differences that will drastically affect their browsing experience. For instance, that person at home on high-speed internet could simply be on a connection shared with 6 other people streaming movies, music, and more. The person on an LTE mobile network just walked into a subway station and all signal was lost.
There are many ways to go about dealing with a user’s slow or nonexistent connection speed. These below are some of the more common strategies you see on websites and within applications.
Imitating True Content
One of the best ways to ease content loading is to design a transition into the content.
The acknowledgement of content is on its way (‘loading’) for the user resembles a customer service method – communicating that their request is in process, and their time is being treated with respect. Information treated the same way keeps the attention of the user in the transitional period between their initiating action (content request) and the receiving process (content delivered).
One tactic that you see commonly on Medium, Facebook, and many more is to deliver a very tiny, blurred preview version of image content before the full-size intended version completes loading. This leaves something in view for the user and informs them that their content is on its way, rather than going from nothing to something, where nothing leaves the viewer hanging (or hanging up!) and can last up to – however weak the connection is.
With CSS animations as a tactic, the animation loads super-fast, and the wait transition can be smoothed out even more and gracefully brought into the page for viewing.
Staggering Content Entry
Trying to load too much at once can cause everything to become slowed and barely reach the intended users.
By staging what is shown indefinite intervals (ex. load four images before the next four) you can control the strain put on the user’s connection, and ensure that some content gets there, instead of gambling on ‘all or nothing’. The common term is “lazy loading”, as you only load a portion of the content, rather than all of it. By loading content in small chunks, you can ensure that something concrete is seen despite a weak connection weaker or connection being lost entirely.
The main drawback of this is finding the middle-ground of how much content to load, and how much you can load on a small connection.
Doing What People Expect
Sometimes the best thing to do is to just follow what people know. Have content load in from top to bottom and if it slows down, it slows down.
Not every situation can perfectly bring in all the content needed and sometimes no magical method will remedy that. Optimize the content itself to make the delivery method not carry such a burden.
Technical tactics range from minimizing CSS/JS files, optimize images for different devices, to add and remove relevant content to the viewport so that nothing irrelevant is loaded. Removing elements that are surplus is the simplest method, but probably the most important one to take away, as it can be applied to nearly every situation you need to implement.
Closing Comment
All these methods and tactics have the right moments to be used, some more often than others, but you should always take care to optimize the content you serve to someone viewing your website.
Whether the optimization lies in the method being used to deliver it or the content itself, getting it in front of the user as fast and as smoothly as possible is the best step toward a great visitor experience.