The state of the mobile web, from the point of view of the user, is largely broken; adverts fill our screens left, right and centre, page weights are high and getting the information you need is often far more difficult than it needs to be. 

So, what are we doing wrong?

Page weight

Over time, web content has become much more media based, be that images, video or audio. Whilst there's a strong drive to push such forms of content, this comes at a cost; the more information and data on a page, the more that needs to be downloaded before the user can view the page as a whole. 

While download speeds have, for the most part, improved across the country, it's important to remember that not everyone is fortunate enough to be on a 4G mobile network, or have super-fast fibre broadband (something that's easy to forget when you occupy the digital sphere for much of your waking and working life). Even those on 4G networks will likely have a data usage limit, so they won't appreciate your website using up a big chunk of their monthly allowance, even if it does look fancy.

The average page weight for a website is now starting to creep above 3MB... In fact, 6 of the top 10 news-based websites (ranked according to Alexa) have page weights above 3MB. These include: 

Reddit - 3.4 MB
The New York Times - 6.0 MB
The Guardian - 4.9 MB
Yahoo News - 3.1 MB
Washington Post - 3.0 MB
Forbes - 3.5 MB

How can we fix it?

Simplify

As a starter for ten, you can start by removing anything that's not really adding to the user experience. Got some big flashy animations that require huge sophisticated libraries? Get rid of or simplify them. Rather than providing reams and reams of content, streamline what's important and give the user what they're really looking for. 

Lazy loading

If you do have a lot of media (image and video) on your page, lazy loading is your friend. If you're new to the concept, lazy loading involves delaying the content loading onto the page until the user scrolls down and actually needs to view it. On an image-heavy page or article, this can substantially reduce the initial page weight and, therefore, the loading times - meaning much happier users! The majority of examples listed above load all of the content on their homepages, regardless of whether the user scrolls to it or not. If they find what they're looking for at the top of the page and click away to another article, a lot of precious data will have been wasted. Native lazy loading will soon be coming to Chrome (from version 75) so making use of this feature will be even easier for developers. 

Slow loading content and user flow

Slow loading content can be incredibly disruptive (and annoying) for the user; from their point of view, they want to go to the source, get the information they need and leave. That means that when a user lands on your website, they want to start consuming information as quickly as possible. Images or adverts loading in slowly as you scroll down, pushing the content that the user was reading further down as they appear, just means that the experience is frustrating and a bit of a hassle - which is not how you encourage repeat visits, and doesn't endear the user to you and your website. And it's not just smaller sites that are guilty of this - The Sun and The Guardian websites both suffer from this affliction. 

With the advent of the responsive web, we moved away from defining exact widths and heights of images, but without knowing the space required for an image, images which take their time to load can start shifting content around as they appear. The concept of a placeholder class is that it’s an element that reserves a ratio of space within the page that the media will then fill - this means that even if the image takes 10 years to load, the content below it will never shift.

Disruptive user prompts and cookie banners

It's something we've all experienced; you're making your way through an article and just getting to the point when an obnoxious pop-up appears asking you to sign up to the newsletter, or throws an advert in your eye line. Once a user has made their decision to read an article on your site, there are no good reasons to disrupt this intention - the most likely outcome is that you'll put off users from visiting your site in future, which probably isn't your goal!  

This issue has a straightforward solution, however. Just wait until someone reaches the end of the article before you ask them to take action. It's really a win-win, as the end of an article is actually the perfect time to guide them to additional content or ask if they want to hear more from you. 

The sudden influx of cookie consent banners is also disrupting the user experience on a lot of websites; the agency that designed your website is likely to have tried their hardest to deliver a slick user experience and make sure the users have a good first impression - but we're now finding more and more websites where the first thing a user sees is a less-than-visually-pleasing pop-up asking them to consent to cookies. Cookie banners can be subtle - they don’t need to take up the full screen.

In summary…

We hope these quick and simple tips will help you to build an improved user journey on your next project. Your users will definitely be thankful, even if they don’t realise it! 

Simon Willans is a Senior UX Developer at Engage