The Inflexible Web

When designing or developing websites, it’s easy to forget that users may try to access your site on poor network connections like 3G or patchy train, bus or plane(!) wi-fi. Some may be using their phone to carry out a quick task on the web. As web professionals, we should be thinking about these users and asking ourselves:

  1. Is my website downloadable? i.e. Will it take a while for a 3G user to download your content? Think images, video, fonts.
  2. Does my website have immediate and accessible content? i.e. Is important content hidden away, or do users have to face annoying modals or adverts?
  3. Is my website robust? i.e. Are click areas large enough; does my website show text immediately, or does it hide content until the web font has loaded?

With those questions in mind, here are some ways to make our websites perform better under less-than-ideal network conditions.

Remove non-essential background images

All too often, a website hero section houses a gigantic background image. The file size can range from 300kb up to and beyond 1mb! Ask yourself: will this background image benefit my user? Is it worth their time in waiting for it to download? You don’t necessarily have to remove the image. If there is text overlaid, the image could be compressed heavily, with a CSS gradient dropped on top to obscure the poorer quality.

Remove non-essential videos

Similarly, your background video could be eating up several megabytes. If it is ‘nice-to-have’ content, perhaps show the video on desktop and remove it on touch devices. Harvey JS, Javascript media queries, may come in handy here.

Reconsider timed animations

By timed animations, I’m referring to scroll points in the web page at which an animation will be triggered. These are fun to code and to play with, but may be frustrating your user. Things to consider: does the animation play when the item is fully in the viewport, or only partially? If the user is scrolling fast, will they miss content that has not yet appeared?

Remove animation barriers and allow users to browse at their own speed.

Watch out for browser reflow

Reflow is the web browser’s process for re-calculating positions of elements in the DOM, in order to re-render parts of the document. Reflow acts as a barrier for users, and prevents them from interacting with the page. We can minimise reflow by not changing visible content. For animations, use absolute positioning and translations to both avoid a reflow and improve performance by shifting animations from CPU to the GPU. See Google Developers on reflow.

Oh, and cut those adverts that pop up in the middle of an article.

Be wary of web fonts

Ideally, we’d drop web fonts altogether and reap the benefits of smaller websites and smoother text loading, but they can make our sites look funkier (a technical term) and improve usability. I’m not going to tell you to drop web fonts.

We should, however, ensure that our web fonts are being delivered as quickly as possible to the device, and that we don’t leave our user hanging with a textless website (and invisible text)! For further reading, check out Filament Group research and CSS Tricks.

Know when to keep it simple

Users may not pore over your tasteful design, the stylish background videos or the swirls of animation. If they want to read an article or get a task completed promptly, they won’t interact with your site like they would with a exploratory game like Monument Valley. Of course, websites differ in their purpose, but it’s vital to provide the quickest and most straightforward user-experience on as many network variants as possible.