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:
- Using a CSS media attribute of “handheld” to serve a stylesheet specifically tuned for mobile devices.
- Parsing the User-Agent header, which provides detailed information on the Web browser used to access the site. At Tuts+, Connor Zwick gives a detailed example of how to perform mobile browser detection using PHP.
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!
Brilliant post. Indeed very nicely articulated. Thank you for sharing this post on Mobile Web performance. Performance testing using cloud is another aspect that you may like cover. Look forward to your next post.
Thank you very much for the kind words. You probably noticed that there is no reference to LoadStorm doing mobile-specific testing. That’s because our tool doesn’t offer mobile load testing….yet. We definitely have it on the roadmap, and we hope to have it into the product by the end of the year.
Our development team is currently working on a very large project where mobile devices and servers are communicating via REST calls. The outcome of this project will lead to built-in features of LoadStorm that will simulate mobile traffic. We understand that mobile is experiencing hugh growth globally, and we want to support our customers that need to load test and measure the performance of potentially millions of concurrent users.
If you have signed up for a free account, then we will be emailing you with updates as we get closer to beta release of our new version.