With the growing popularity of smart phones like the iPhone and Google’s Android, as well as new players on the market like Palm’s Pre, the idea of having an always-connected general computational device is finally being realized. Today’s smart phones are not only used for making calls, taking pictures, and listening to music; now people are using their phones to do business, build presentations, make quick edits to important files, and even surf the web.

Yet contrary to what the commercials would have you believe, few smart phones provide a web experience equivalent even to a netbook. In large part this is because web application developers rarely consider the memory and CPU constraints of smart phones. At the same time, an increasing number of people are using their smart phones as a secondary or even primary method for accessing the web (http://www.theiphoneblog.com/2009/03/02/iphone-mobile-browser-share-67/). This becomes problematic because most websites are slow to download, hard to navigate for mobile users, and, most importantly, often take a long time to render, which is driving more and more mobile users away from the interactivity and power that Rich Internet Applications promise to deliver. The answer to this dilemma is that developers need to create RIAs, generally using AJAX, that are specifically designed and optimized for mobile phone users. In this series of blog posts, we are going to look at how to make applications that are not only rich and powerful, but respond quickly and offer users the experience they have come to expect from the web.

Caching

Developing high performance Rich Internet Applications for the web is challenging. One of the biggest problems is creating low foot print applications, which entails reducing the size of your HTML, graphics, CSS, and JavaScript to the absolute minimum. Yet often just minimizing the application is not enough, and this is where caching comes to play.

In general, when we talk about caching we are referring to the duplication of data or content to avoid unnecessary calls to the system to reduce bandwidth and computation. Using caching for mobile web applications is a fundamental method of increasing performance. It reduces unnecessary HTTP requests as well as the work a cell phone’s operating system and browser have to do, yet many application developers for smart phones like the iPhone do not understand how the cache works nor exactly how much they can cache. Apple’s documentation on the subject is either outdated or nonexistent. One of the best resources on the web currently is Yahoo’s UI blog, which states that the iPhone’s cache works optimally in chunks of 32k or less (http://yuiblog.com/blog/2008/02/06/iphone-cacheability/). However, the actual limit is greatly dependent on the system memory available as well as the current content in your iPhone or iPod Touch’s cache. You can see this for yourself by running a number of tests (we use SafariWatir (http://safariwatir.rubyforge.org/) but you could do this manually) and using a HTTP inspection tool like Fiddler (http://www.fiddler2.com/fiddler2/). This should give you an idea of just how much your application can optimally cache, which for the application in Figure 1 was 76k. Just make sure to clear your cache before you test (http://support.apple.com/kb/HT1676).

Caching on the iPhone and other mobile browsers should be the second major initiative behind minimization of assets, but it is something that needs to be thoroughly tested for your specific application to find an optimal sizing.

Figure 1: An example of Fiddler showing what content is being cached by the iPhone browser on a page request where purple is CSS and green is JavaScript.

What’s Next

In our next post, we’ll take a look at optimizing your mobile application’s JavaScript. JavaScript is especially important because most AJAX APIs make no consideration for the minimal resources of mobile browsers and frequently have to be stripped of any extraneous code or libraries and rewritten to perform optimally on browsers like WebKit, Safari, Opera, and the mobile version of Internet Explorer.

In later posts, we will begin to examine performance considerations for Flash, Flashlite, and even rich media applications such as real time video streaming. Finally, we will explore how to test everything in your application via automated functional testing using tools like the Open Source SafariWatir project to make sure that your application not only works the way you expect, but performs as expected, even as you make changes. In the meantime, let us know what performance topics matter.

Read more from Robi Sen.