Improving Web Site Performance on Mobile Devices | LoadStorm

As we’ve noted in previous articles, Web site developers and system administrators are paying greater attention to mobile performance these days. Wading into these waters requires a new approach to Web performance measurement, as well as new tools to support it. In this article we will review the difference between mobile testing and desktop testing, the tools (both free and commercial) currently available for measuring mobile performance, and, finally, some tips and tricks for developing Web sites that exhibit high performance on mobile operating systems such as iOS, Android, Windows Phone, and Blackberry.

Client-Side vs. Server-Side Performance

The first factor in improving mobile performance is figuring out exactly how much improvement your site needs. This requires an accurate measurement of the current state of performance. But what do you measure, and how? As Web Performance Today recently pointed out, over 90% of performance gains on mobile devices are to be found on the mobile client’s front end, and not on the server side. This suggests the need for tools that measure mobile performance on the device side.

Measuring Mobile Performance

Given the importance of client-side performance for mobile sites, how do developers capture client performance data? This isn’t an easy task, given the plethora of devices and operating systems (iOS, Windows, and multiple flavors of Android) in today’s market.

The pcapperf toolkit goes a long way to meeting the need for a mobile performance measurement tool. Using pcapperf, developers can upload PCAP files captured from a private wireless network and analyze them using the online tool to pinpoint performance issues.

Development teams can also take inline measurements using LoadTimer, an IFRAME-based test harness that can be used from your mobile Web browser of choice. Besides capturing page load measurements, LoadTimer also supports recording and submitting data to creator Steve Souder’s live database of crowdsourced mobile performance results.

A third option for measuring mobile performance is Mobitest, an online tool from Blaze.io that runs a given URL through a variety of mobile operating system devices. This sophisticated but simple tool gathers performance information for iOS 5.0, a number of Android versions, and Blackberry OS 6.0. The downside is that Blaze.io has a limited number of devices available for testing, so users may have to wait a few minutes for their results.

Improving Mobile Performance

Mobile device users have less power and less bandwidth speed available to them than users on desktops or laptops. The most significant work a team can undertake to increase mobile performance is to offer a streamlined version of its site. Developers have a few options in front of them for accomplishing this, including:

Developers who use some form of mobile browser detection can greatly optimize performance by using HTML, CSS and JavaScript code that is fine-tuned for mobile platforms. In particular, development teams should take care to leave out any code that simply is not relevant to the mobile experience (e.g., background images, most event handlers). David B. Calhoun published a great series of posts that cover many of the coding tricks required to make a site function properly and perform smoothly on mobile devices.

Next, to reduce reload latency times, developers should serve up their mobile site directly, rather than redirecting to a new URL that hosts a mobile version of the site (e.g., redirecting from foo.com to mobile.foo.com.

Developers should take care to reduce the amount of data flowing over the network from server to client. This includes:

• reducing both the number and size of images included in any given Web page
• reducing the number of HTTP requests required to load a page
• reducing the size or number of external dependencies (JavaScript and CSS files in particular) that a page loads
• replacing separate images with CSS sprites, CSS gradients, and inline images

This is where performance data can help guide development. If the data shows an inordinate amount of data flowing to the client, or a large number of requests being issued to load a single page, developers should target these areas for performance improvement.

Finally, all of the tips and tricks that we have covered in previous articles for reducing data delivery over the network apply to mobile devices: use GZIP compression, use caching and Content Delivery Networks (CDNs) judiciously, and Minify all JavaScript and CSS files.

Conclusion

Mobile Web performance is a huge topic, and the knowledge base behind it is growing rapidly as the popularity of mobile computing continues to climb. For more information on mobile performance, readers should check out some of the wonderful presentations that have been given by experts in this arena, including Maximiliano Firtman and Steve Souders. And stay tuned to this blog – we’ll have more articles on mobile Web performance in the near future!