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 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 LastModiﬁed 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 ﬂushes items that have expired or haven’t been used recently when cache space runs short.
However, mobile browser caches are usually much smaller than on desktop machines, causing items to be ﬂushed quickly. Here's a sampling of how this plays out across various mobile browsers:
- The Mobile Safari browser on the ﬁrst 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 ﬂush the cache when the device powers down.
- Android cache limits tend to be higher than for iPhone, and the cache isn’t ﬂushed 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 inefﬁciently 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 beneﬁts of caching. In addition, some mobile browsers also ﬂush 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)
It is usually signiﬁcantly faster to retrieve a resource from localStorage than to request it from a server, and it is more ﬂexible 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 efﬁciency. 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 conﬁgure persistent, reliable storage.
The Benefit (Universal Version)
Pages render faster for repeat visitors.