Mobile web performance

Even if modern browsers, such as Safari on iOS, offer rich functionalities through HTML5, even if they allow producing nice web applications with a usability close to that of a native app, they don’t guarantee the performance of a webapp. A webapp which doesn’t perform well will be quickly left out by the end users.

On the desktop, performance issues are often not even noticed because of the powerful environments (hardware/browser/network connection) on which the webapp runs. On mobile it’s different, heavy scripts, heavy images… make the application works slowly and make it unusable.

This article is the first of a series which will deal with mobile browsing in order to help you provide the best mobile web experience for the end users.

Before starting with the mobile performance, I’ll start by describing what makes the difference between the mobile web and the “desktop” web.

Mobile browsing

When we develop a mobile website we have to keep in mind what mobile browsing is:

• Browsing the Web but in a different context
• Reaching a service while you’re on the move
• Dealing with small screens
• Dealing with a different navigation
• Dealing with different input modes
• Facing poor/slow (if not at all) connections
• Trying to offer the same user experience as the one offered by the mobile device, i.e. a quick access to the information (and in that, the number of user actions to reach a function should be minimal).
• Not just taking care of iOS and Android: we have to deal with heterogeneous browsers, OS, screen sizes, input methods…

As we can see, mobile websites are not the same as desktop ones and they should not just be the adaptation of an existing website to a mobile screen size. Mobile websites should be dedicated to mobile devices and exploit their ergonomics as much as possible.

Web performance?

Before you start building a mobile webapp, all the actors should be aware of this problematic. By all the actors, I mean not just the technical guys but also the marketers, the ergonomists, the designers…

Because one of the aspect of the web performance is the page loading time, it concerns developers, as well as the architects for server side optimizations, network transaction optimizations… but it also concerns designers, marketers and ergonomists because they are the one who should come up with a user friendly interface and still worry for the weight of the resulting page (in term of images, CSS…)

A more subjective aspect of the web performance is the “client side feeling”.

Navigation should look fluid… user should be able to quickly reach the content of the webapp and have access to the main functionality of the service without having to wait for the graphical elements or some secondary feature to be loaded.

Web performance is something that has to be taken into account at each step of a service conception.

Why talking about performance on mobile?

Today mobile rendering is 40% to 80% slower on Smarthones than on PC for several reasons:

• Mobile processors are slower than PC ones
• Devices are heterogeneous in term of hardware and browser
• The mobile networks are slow (latency and bottleneck)
• The ergonomics expected by the users require a level of CSS and JavaScript which needs more processing than a simple HTML page with a light style sheet.

Web performance impact

The major search engines measured how much web site slowdowns hurt their business metrics:

• Bing: A page that was 2 seconds slower resulted in a 4.3% drop in revenue/user.
• Google: A 400 millisecond delay caused a 0.59% drop in searches/user.
• Yahoo!: A 400 milliseconds slowdown resulted in a 5-9% drop in full-page traffic.
• Shopzilla: Speeding up their site by 5 seconds increased the conversion rate 7-12%, doubled the number of sessions from search engine marketing, and cut the number of required servers in half.
• Mozilla: Shaving 2.2 seconds off their landing pages increased download conversions by 15.4%, which they estimate will result in 60 million more Firefox downloads per year.
• Netflix – Adopting a single optimization, gzip compression, resulted in a 13-25% speedup and cut their outbound network traffic by 50%

Source: O'Reilly Velocity Conference, May 2009

Design impacts on performance

As the park of devices is heterogeneous in term of hardware, OS and browser, as devices have several screen sizes, screen ratios and screen definitions and as devices have different navigation and input modes (touch screen, numeric keyboard, alphanumeric keyboard, virtual keyboard…) it’s difficult to offer a same level of interface on each device natively.

A common usual way to provide the same interface on each device is to emulate functions, which has a great impact on performance.

Emulating functions can be very time consuming compared to accessing native functions for many reasons:

• Devices on which we try to emulate features are most of the time less powerful than the ones which natively have the same features (e.g.: CSS Transforms on iOS that you don’t find on Windows Phone 7).
• Emulation often brings a surplus of JS, CSS and new images…

Nevertheless simple features can sometimes be emulated in some cases but you should evaluate the cost/weight of it first. So use emulation sparingly if you want to produce a performant webapp.

Some well known emulating features are rounded corners, background gradients and text effects. Let’s talk about it.

With modern browsers (FF, Chrome, Safari…) it’s easy to display a box with rounded corners, background gradients and text effects, it is native, and you just have to play with some CSS properties.

With older browsers (IE 6, IE7, IE mobile…) none of these functionalities are available, making the work harder than simply applying CSS properties.

Rendering this on CSS2/HTML4 compliant browsers requires:

• Images for rounded corner
• Image for background gradient
• Image for text-shadow
• JavaScript for visual transition

These emulations will make your application run more slowly (due to JavaScript processing, images downloads…)

The only way to avoid this performance issues is to have a progressive approach in your development starting with what works for everybody (html) and enhance the experience by taking advantage of the advanced features of each device (simple JavaScript à advanced JavaScript, CSS2 à CSS3, HTML5 API..) and accept that users will have a different experience depending on their devices.

For example a same code for a menu could render differently on each device family:

Some rules to keep in mind

When you develop a service, put function first because users want a quick access to their content whatever the device.

The best way to do this is to start with simple HTML markups and enhance the experience, using a progressive approach and by taking advantage of all implementable cool features of each device (CSS3 for the most advanced devices, CSS2 for others…).

Furthermore, keep in mind that a "progressive approach" will be beneficial for the SEO and the accessibility of your mobile website.

After that, you can start optimizing your webapp by applying the well known rules of the web performance (http://developer.yahoo.com/performance/).

In future articles, we will see, how some of these rules have to be analyzed and adapted to the mobile environment specificities.