Why speed is key for m-commerce web sites

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:

To view the raw data, click here >>

Loading Time

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

Start Render, on the other hand, is 67% higher on average on mobile compared to desktop.

Speed Index

Speed Index is 37 % 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.

LTE coverage

LTE speed

Page bloat

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... 🙂

The above list is obviously far from exhaustive. They are but a few examples of best practices that can be adopted to offer your mobile web users the fastest possible browsing experience.