Modern web pages are complex and the number of resources required to download a page continues to increase. To load a web page a browser may need to download HTML, images, stylesheets, scripts, video, fonts and a variety of other resources. As of July 2015 over 30% of web pages request more than 100 resources, and based on cache lifetime statistics 67% of these resources are cached for less than a day.
Eliminating round trips by caching frequently-used resources is one of the most common suggestions for improving web page performance, so why are so few applications applying this technique? Unfortunately browser caches offer no application control and unpredictable performance gains. In order for a quality user experience, an application needs to control what content gets cached, with what priority, and where it is stored. With the availability of HTML5 storages such as WebStorage, FileSystem and IndexedDB, a hierarchical application-managed client-side cache is a possibility.
Challenges with traditional browser caching
Traditional browser caches store content based on URLs, which can lead to sub-optimal performance. Take, for example, the popular web performance optimization concept of domain sharding. Domain sharding tricks a browser into opening additional connections by presenting unique domain names for content. If done incorrectly, the same object can be downloaded across multiple domains, thereby eliminating the benefits of caching content. For example, if the same object is requested once from static1.example.com and on a future visit the content is requested from static3.example.com, the object will be treated as a new object even though there is a perfectly valid copy sitting in cache.
When an object expires from the browser cache, it requires revalidation; this is traditionally done by an If-None-Match or If-Modified-Since header in the request. If the resource on the server matches, this results in a 304 Not-Modified HTTP status code. Performing a network round trip to find out that the object that is already in the cache is a waste of network resources and bandwidth. On a high-latency link this could add a considerable amount of time to the page load.
Certain resources on a page are more important than others. If your web page uses a large hero image, ensuring that it is in the cache and loads with a high priority can make the page feel like it is loading faster. When a browser only looks at metrics such as popularity and age, resources in the critical path of page load can be ignored and evicted from cache.
Benefits of Application-Aware Caching
When an application is in control of the caching, it is possible to index based on a hash of the resource as opposed to a name, eliminating duplication of cached content. Controlling the cache key also enables the application to send the validation information for resources with the HTML, eliminating costly revalidation requests.
InstantLoad is a client-side hierarchical cache system that utilizes different HTML5 storage types, including localStorage, sessionStorage, IndexedDB and FileSystem API, depending on the requirements of the request. The caching system takes into account the browser and the resources being requested, and can adapt and learn over time to become even more valuable when delivering high-performing web applications.
The hierarchy is based on the performance of the different layers, with the highest-performing storage at the top. For example, localStorage and sessionStorage both perform significantly better than traditional browser caches.
Keys are mapped to arbitrary objects containing metadata related to priority, expiry, validation and eviction.
The diagram below provides a high-level diagram of the various layers:
With a few small application changes, resources can be cached using the application-aware InstantLoad cache as opposed to the standard browser cache, providing page load improvements of between 30-60%.
Currently, InstantLoad offering is available for loading scripts in the HEAD of the HTML and it leverages localStorage for fast loading.
Check out our recently published technical publication from the IEEE International Conference on Multimedia and Expo (ICME 2015): “A Case For Application-Managed Cache For Browser” for a more in-depth discussion.