Mobile Optimizer treatment #2: Mobile SuperCache

Continuing in our series of under-the-hood posts about Mobile Optimizer, here's the thinking behind one of the features we're most excited about: Mobile SuperCache.

Caching is a basic optimization technique. It allows relatively static page resources such as CSS files, image files, and JavaScript files to be saved by the visitor’s browser. Once a resource is cached, the browser refers to the locally cached copy instead of downloading it again on subsequent visits to the web page.

Caching is an excellent technique for desktop browsers, but it needs to be completely reworked for mobile environments. Here's how we took on the mobile caching challenge and won.

The Problem (Geek Version)

All modern browsers use local memory to cache resources that have been tagged with CacheControl or Expires headers, which indicate how long the item can be cached. In addition, ETag and LastModified headers indicate how resources should be repopulated in the cache after they’ve expired. The browser fetches cached items locally whenever possible, avoiding unnecessary server requests, and it flushes items that have expired or haven’t been used recently when cache space runs short.

The resources stored in browser object caches commonly include images, cascading style sheets (CSS), and JavaScript code, and caching is essential to achieving acceptable site performance. (A separate cache holds entire rendered pages to support use of the Back and Forward buttons.)

However, mobile browser caches are usually much smaller than on desktop machines, causing items to be flushed quickly. Here's a sampling of how this plays out across various mobile browsers:

• The Mobile Safari browser on the first iPhone didn't support any component caching.
• The iPhone 3GS went to a limit of 25 KB per object and about 1 MB total.
• iPhone 4 browser limits cached items to just over 100 KB, with a total cache size just under 2 MB. (Revised 9/29/11. This information was based on this post on the Yahoo! User Interface blog, but we're now aware of a later post correcting this data.)
• iPhones automatically flush the cache when the device powers down.
• Android cache limits tend to be higher than for iPhone, and the cache isn’t flushed when the unit powers down, but the capabilities vary for different Android devices.
  
  

Takeaway: Caching, which is a key technique for achieving acceptable performance, works inefficiently for mobile sites.

The Problem (Layperson Version)

Mobile browser caches are much smaller than those of desktop browsers. In fact, your mobile browser cache can fill up after viewing just a few pages of a site in a single visit. When that happens, the browser begins to remove items from the cache, nullifying the performance benefits of caching. In addition, some mobile browsers also flush their cache every time a user powers down their device. 

The upshot: We needed to take a new approach to leveraging local storage of reusable resources.

Fortunately, HTML5 gives us an excellent framework for doing this.

The Solution (Geek Version)

Mobile Optimizer leverages an HTML5 feature called Local Storage to bypass the limitations of both desktop and mobile caches. The HTML5 Web Storage specification provides a great alternative to relying only on browser caching. The HTML5 localStorage JavaScript object has been implemented in all the major desktop and mobile browsers. Script code can easily check for support of HTML5 localStorage and then use it, if available, to save and read key/value data, usually 5 MB per domain. This capability makes localStorage very well suited for client-side caching, although read/write speeds do vary for different mobile browsers.

It is usually significantly faster to retrieve a resource from localStorage than to request it from a server, and it is more flexible and reliable than relying only on cache headers and the limited browser cache storage available on most mobile devices.

Interestingly, this is one area where mobile browsers are currently ahead of the desktop in efficiency. LocalStorage performance has lagged in desktop implementations where using the standard browser cache may still be your best option.

The Solution (Layperson Version)

Mobile Optimizer uses the scaffolding of HTML5 to offer a mobile browser cache that is comparable to the desktop browser cache. Mobile Optimizer leverages an HTML5 feature called Local Storage to bypass the limitations of both desktop and mobile caches. The resulting Mobile SuperCache offers site owners the ability to configure persistent, reliable storage.

The Benefit (Universal Version)

Pages render faster for repeat visitors.

Read more: Mobile Optimizer features 
Learn more: Talk to a Strangeloop Performance Expert