There are now some 5.052 billion mobile users, accounting for 67% of the world's population. And with WiFi and 4G now widely available, the pace of mobile activity is continually on the rise: mobile web traffic is up 21% over the previous year.
Beyond its usefulness to consumers, mobile commerce offers key advantages from a business perspective:
- Tablet devices account for the highest add-to-cart rates on e-commerce websites at 8.58%. (Smart Insights)
- Average smartphone conversion rates are up 64% compared to the average desktop conversion rates. (CMS Report)
Alibaba is a prime example: “Mobile revenue for its Chinese e-commerce business increased 80 percent to US$13.18 billion, generating 80 percent of its total retail revenue in the country. Monetisation of its mobile commerce platforms outstripped that of desktop”.
Given this surge in mobile activity, there can be no doubt about it: e-commerce operators must eliminate any potential points of friction that users may experience on their web sites. Consumers are more demanding than ever and expect a slick and seamless experience. Speed is therefore among consumers' top requirements when it comes to the mobile experience. This then raises the question: how can we reduce loading times on our mobile web site?
The Mobile First approach consists of designing a web site with mobile use primarily in mind, and then gradually adapting it to larger screens.
Speed: a key bugbear for mobile web users
According to a Google study, slow page loading times on mobile are what web users say they dislike the most (46%).
They expect web pages to load (at least) as quickly on mobile as on a desktop browser (71%). But 46% feel that at present, web pages are slower to load on mobile than on a PC.
Loading times clearly have an impact on consumer behaviour: Google says 61% of users are unlikely to return to a mobile site they had trouble accessing and 40% visit a competitor’s site instead. (MicKinsey & Company).
What progress is being made by the major e-commerce players?
Here is the low-down on the world's top 5 e-commerce web sites. We compare corresponding web performance on desktop and mobile.
We are interested in 3 metrics:
- Loading Time: the overall time taken for the page to load (all scripts are loaded, and 'onload' has been reached).
Given that Load Time is not representative of the user's actual experience, we also assess:
- Start Render: this is when the blank page begins to be filled with the first elements of the web page.
- Speed Index: indicates how quickly elements are displayed "above the fold". The lower the scores, the faster the page is displayed. It is the metric that is most representative of users' perception of a web site's speed.
Here is a more concrete example:
Tool used: webpagetest.org
Cohort: the top 5 e-commerce web sites by Alexa ranking
Pages tested: "product" pages
Runs per test: 10
Connection used: ADSL (7 Mbps) vs 3G (2.7 Mbps)
To view the raw data, click here >>
Mean loading time on desktop systems is 15.044 seconds, compared to 14.304 seconds on mobile. No significant difference is therefore observed.
Start Render, on the other hand, is 67% higher on average on mobile compared to desktop.
Remember: the lower the score, the faster the page is displayed.
In other words, the top 5 web sites tested here load slower on mobile compared to desktop systems from the point of view of user experience.
The discrepancy between our test results here and mobile users' expectations is striking.
Specifically, 60% of web users judge that a web page should load in at least 3 seconds on mobile. 74% state that they are prepared to wait up to 5 seconds. Beyond this 5 seconds limit, they would rather leave the site in question.
Therefore, if companies wish to improve their users' experience on mobile, they must pay particular attention to performance.
What are the causes of these slowdowns?
The Internet: a complex network
The Internet is made up of thousands of different networks connected to one another. This in turn means there are any number interdependencies and interconnections that can be a potential cause of slowdowns. The longer the chain, the more potential weak links there are in that chain.
Varying quality of mobile connectivity
Two statistics should be borne in mind here: 4G coverage and 4G network speed. As shown in this study, access to 4G is far from similar from one country to another. This is a key detail to bear in mind when developing an e-commerce web site aimed at a global market.
In October 2000, the average data size of a web page was 89KB (including scripts and images).
Today, this average data size or "page weight" has risen to 2.6MB. In the space of 15 years, web pages have thus become 30 times larger in terms of the data they use! And the figure is continually on the rise.
With an ever increasing number of trackers, widgets and data to load, the web has become bloated, and is slower as a result.
Web site coding
In 2007, Steve Souder published "High Performance Web Sites", a book that sent shock waves across the web. Since its publication, the best practices described in his book have been implemented to some degree or other across many web sites.
But since 2007, things have moved on: first, smartphones appeared, changing the way we use the web, followed by tablets, which have since become part of our daily lives. The trusty HTTP protocol also reached a turning point at the beginning of this year, making way for HTTP/2 (with one of its core improvements being to speed up the web).
Clearly, therefore, web performance best practices must also move with the times.
Some have become ineffective or even counter-productive. It is therefore important to refresh your knowledge of best practices in the field to ensure your mobile web site remains slick.
What is the solution?
While you may have no control over improving throughput and latency, you can optimise your mobile web site to give it the best possible chance when it comes to speed.
Indeed, this was the motivation behind Google's AMP (Accelerated Mobile Pages) project.
Unfortunately, AMP requires pages to be re-coded to use specific semantic HTML markup. In the meantime, here are some details to help you reduce loading times on mobile:
1. What type of mobile web site should you choose?
There are three types of mobile web site: a mobile site of the form m.mysite.com, a site that uses responsive design and one that uses adaptive design. When it comes down to it, all three of these schemes will enable mobile users to view the content of your web site. But they are not necessarily equal in terms of performance:
- the first method or creating a mobile web site such as m.mysite.com means that two separate copies must be maintained, while redirection delays the rendering of your content
- meanwhile, responsive design can be a double-edged sword. The reason: according to one study, 72% of web sites employing responsive design result in the same data size, regardless of the screen size or connection type (ADSL, 4G, Edge, etc.). This inevitably leads to slowdowns.
- adaptive web sites offer the advantage of a single URL used to display different content depending on the device being used.
2. Large images: preventing them from being loaded
Images account for an average of two thirds of total page weight. They therefore often slow down page loading.
One way of getting round this is to use lazy loading. This method saves the browser from having to download images that are not actually displayed.
NB: One image that should be loaded is an image telling the user that content is being downloaded:
3. Desktop and mobile web sites do not always need the same CSS rules
We are of course not denying the importance of styling. But a trade-off is sometimes necessary.
For example, some fonts are not available natively on all systems (both iOS, Android etc). Some font formats are not supported by all browsers. Loading these can therefore block or slow down web page loading.
4. Widgets do not necessarily mean performance
Widgets add value, and from that point of view offer a kind of performance: increased engagement (social buttons), data analysis (analytics and/or A/B testing) or increased revenue (ad banners).
Performance from a technical point of view, on the other hand, can be impaired when some widgets are loaded. A slow web site means low conversion rates. The relative pros and cons of installing each widget therefore need to be assessed. I encourage you to read this article on Performance Budget to find out how to make the right trade-offs.
5. 3 caching techniques that you should be aware of
- HTTP caching: this technique is well known and the idea is to cache static resources for as long as possible (e.g. one month). However, care should be taken, as this method can be extremely volatile. If cache size is limited, items may be purged from the cache over time.
- Local Storage: this is a mechanism for storing data within the browser. It has more storage capacity than with HTTP caching. This is because the HTTP cache is shared across all sites, while local storage allows (by default) 5MB per web site to be stored. In addition, local storage does not require any fields to be added to the HTTP request header. However, to store more than 5MB, the user's permission must be sought.
- Application Cache (or off-line cache): this method can be used to download the entire user interface and keep it off-line when the user first connects. Browsing then occurs locally, and content updates are made when the user reconnects. While this can be a godsend for mobile browsing, it is a mechanism that is likely to become obsolete once a new technology, Service Workers, becomes widely adopted (this technology is beyond the scope of this article... 🙂