Why your website needs to be fast for mobile users
How much of your business comes from customers on mobile devices? According to the Centre for Retail Research, UK online sales grew by 15.8 per cent in 2014. It also estimates that the proportion of ecommerce transactions completed on a mobile device will go up from 18.7 per cent in 2014 to 28.6 per cent in 2015!.
In short, Internet retailing is booming, and more and more of it is happening on mobile. Delivering a good user experience to these customers is therefore more important than ever.
However, getting a website to load quickly on a mobile phone presents a whole range of challenges.
One is higher latency on mobile compared to desktop – the extra time it takes for data to travel between the web server and the phone. Even with the advent of 4G, there’s no way to get around this, which means a different approach is needed for mobile performance optimisation.
Another challenge is data usage, which is often limited for end users. If your customers exceed their monthly allocation thanks to oversized pages, the chances are they won’t be coming back.
Finally, we talk about “mobile” devices as if they were all more or less the same. However, it’s important to bear in mind that the term covers a huge range of devices with very different characteristics and capabilities – from high-end tablets with retina displays to budget smartphones with small, low resolution screens.
So what are the options when it comes to websites that cater for mobile customers?
Redirect to a dedicated mobile site
This can work well because it means you don’t have to compromise. Instead, you can focus your efforts on building something that’s optimised specifically for mobile browsing. For example, you can take account of limited data allowances by stripping out all but the essential images. You might also want to leave out any custom fonts.
However, redirecting to a mobile site is not without its problems.
Maintainability is one – a dedicated mobile site means you have to maintain two websites, not one. Also, you need a mechanism to decide whether to send someone to the mobile site or the desktop site, and this isn’t always easy to get right. For example, what’s best for visitors using an iPad on a home broadband connection? Or for people using an iPad mini over 4G?
Redirecting to a mobile site also can also have an impact on performance. This is because the redirect itself takes time – time that’s largely wasted. You’re not loading anything useful, just sending someone to a different website.
Ironically, the higher latency on mobile means that the impact of this redirect is greater on mobile than it would be on desktop. This hints at a possible solution for those retailers who are already doing more business on mobile than they are on desktop – why not serve the mobile site by default and redirect desktop users to a different site?
A responsive website
Responsive design has become extremely popular in the past few years. It means the same site goes to all visitors, regardless of the device they’re using. However, the way that site is displayed varies according to a range of factors, not least of which is the size of the user’s viewport. Note that we’ve been talking about viewport size, not screen size. Responsive design isn’t just about mobile and desktop (probably a good thing, given the explosion in the range of devices available). It will also adapt when you resize your browser window, whether you’re on a desktop PC, a tablet or a phone. Page layout will reflow to deliver a design that works at a range of sizes. Certain images may also be hidden at smaller viewport sizes.
Recently, Google has given responsive design a bit of a boost. Earlier this year it announced that mobile-friendly sites would do better in search rankings, and while it doesn’t explicitly favour any one technique for making a site mobile friendly, all its advice on the subject focuses on responsive design.
However, if you’re not careful, responsive sites can be slow.
The problem boils down to this: since the way the page is displayed can vary depending on a range of factors, you have to deliver everything you need to display all those variations. And more content means slower load times.
For example, you will inevitably need more styles and therefore larger (or more) stylesheets. You may well also need more images if you use cropped versions for smaller viewports. Another danger is delivering very large images that scale down (or are not displayed at all) when the viewport dips below a certain size – visitors on mobile devices end up downloading bigger images than they need, draining their data allowance unnecessarily.
There is a better solution for images – a new responsive images specification, which means different viewport sizes and screen resolutions can be accommodated in the HTML markup, with different versions of images loaded only if and when needed. This is a great step forward, but full browser support isn’t quite there yet (at the time of writing, there’s no support in Internet Explorer or Opera Mini and limited support in Safari – source: caniuse.com).
Another option is to detect certain device characteristics – such as whether someone is using a mobile device – using server-side code. This means that when the browser first requests the web page, the server will work out what kind of device the request came from and deliver the appropriate content in response. This is the basis of a solution known as RESS (Responsive Web Design + Server Side Components) and is one way to help minimise the unnecessary content you send to mobile users.
There are a couple of drawbacks, though. Server-side device detection is not known for its reliability, so when designing desktop components, it’s best to assume that they’ll be seen by at least some customers on mobile phones. There may also be a performance cost. Device detection can rely on large databases of devices and their characteristics. The time it takes to look up a device on a database will add to the time it takes the server to send content back to the browser. If you decide to go down this route, it’s worth testing this to assess any impact.
Customers expect pages to load quickly, but they also expect those pages to look good on devices that are getting better at displaying high-quality imagery and colourful designs. Meeting those expectations is not easy. But as the amount of business done on mobile continues to grow, it has never been more important. Fortunately, designers and developers have a growing number of tools and techniques that will help them rise to the challenge.