Local Storage Cache

Configuration

The 'Local Storage Cache' filter is enabled by specifying:

Apache:

ModPagespeedEnableFilters local_storage_cache

Nginx:

pagespeed EnableFilters local_storage_cache;

in the configuration file.

Description

This filter saves inlined resources to the browser's local storage (an HTML5 feature) on the first view of a page, and loads them from local storage on subsequent views rather than sending them (inline) again.

This benefits first views by inlining resources and benefits repeat views by caching these resources - normally inlining would hurt repeat views because inlined resources need to be sent every time since they're not in the browser's cache.

Operation

This filter does the following:

• It adds JavaScript utility functions to the rewritten HTML's head section.
• For each inlined CSS or image resource that the browser doesn't yet have in local storage, it inlines the resource and tags it with new special attributes.
• For each inlined CSS or image resource that the browser does have in local storage, it replaces the resource with a JavaScript snippet that loads the resource from local storage.
• Finally, it adds an onload handler that processes each tagged inlined resource.

The filter determines which resources are in local storage by inspecting a browser cookie set by the last step's onload handler. The cookie's name is _GPSLSC and its value is a list of hashes of the URLs of resources stored in local storage.

Inlined JavaScript is not saved in local storage because it's not possible to reliably load it from local storage and execute it such that the behavior is the same as when it is inlined.

The attributes added to inlined resources are:

• data-pagespeed-lsc-expiry: when the resource expires. If the resource is accessed after its expiry it won't be used and will be removed from the cookie.
• data-pagespeed-lsc-hash: a hash of the resource's URL (before inlining). This is used to represent the resource in a short form and is saved in the cookie.
• data-pagespeed-lsc-url: the resource's URL. This is used by the JavaScript snippet to request the resource directly if the resource's hash is in the cookie but the resource isn't found in local storage.

Online Example

You can see the filter in action at www.modpagespeed.com on this example.

Requirements

The Inline CSS and/or Inline JavaScript filters must be enabled for this filter to have any effect.

Risks

This filter is considered moderate-to-high risk: it adds a payload overhead of extra JavaScript, it adds a payload overhead of extra attributes on each inlined resource, and it adds the execution overhead of its onload handler.

This filter is experimental. Its performance benefit has not been extensively tested and we are seeking feedback on its usefulness and benefits. It can only speed up repeat views of a page or uses of saved resources by other pages, it cannot speed up first views.

This filter sets a cookie for the domain of the page being rewritten.

Note: This filter requires the browser to support local storage, an HTML5 feature not implemented by all browsers, in particular older browsers. Browsers that don't support local storage will work as if this filter wasn't enabled: although the payload and onload overheads will be incurred, the cookie will never be set so no benefits will be obtained.