Local storage cache

Caching

Stores inlined CSS and images in the browser's local storage for repeat visits.

Filter local_storage_cache,inline_css,inline_images · Filter docs

A mod_pagespeed 1.1 filter. ModPageSpeed 2.0 applies it as part of one always-on pipeline, not as a separate switch.

Both frames render identically — that's the goal. The win is in the bytes and requests below, not the look. They're served live by mod_pagespeed 1.1 on demo-httpd-1.1.modpagespeed.com; the optimized frame applies only this filter. Right after a cache purge it may briefly match the original while the worker rewrites it — reload to see the result.

Measured impact

HTTP requests

3 2

−1

What changed in the source

The page's HTML, before and after this filter. Red lines are removed, green lines are added.


                
                  
                        <html>
                    

                          <head>
                    

                            <title>Local Storage Cache Test</title>
                    

                      -     <link rel='stylesheet' href="styles/yellow.css">
                    

                      +     <script type="text/javascript" data-pagespeed-no-defer>//<![CDATA[
                    

                      + (function(){function d(b){var a=window;if(a.addEventListener)a.addEventListener("load",b,!1);else if(a.attachEvent)a.attachEvent("onload",b);else{var c=a.onload;a.onload=function(){b.call(this);c&&c.call(this)}}}var p=Date.now||function(){return+new Date};window.pagespeed=window.pagespeed||{};var q=window.pagespeed;function r(){this.g=!0}r.prototype.i=function(b){b=parseInt(b.substring(0,b.indexOf(" ")),10);return!isNaN(b)&&b<=p()};r.prototype.hasExpired=r.prototype.i;r.prototype.h=function(b){return b.substring(b.indexOf(" ",b.indexOf(" ")+1)+1)};r.prototype.getData=r.prototype.h;r.prototype.j=function(b){var a=document.getElementsByTagName("script");a=a[a.length-1];a.parentNode.replaceChild(b,a)};r.prototype.replaceLastScript=r.prototype.j;
                    

                      + r.prototype.l=function(b){var a=window.localStorage.getItem("pagespeed_lsc_url:"+b),c=document.createElement(a?"style":"link");a&&!this.i(a)?(c.type="text/css",c.appendChild(document.createTextNode(this.h(a)))):(c.rel="stylesheet",c.href=b,this.g=!0);this.j(c)};r.prototype.inlineCss=r.prototype.l;
                    

                      + r.prototype.o=function(b,a){var c=window.localStorage.getItem("pagespeed_lsc_url:"+b+" pagespeed_lsc_hash:"+a),f=document.createElement("img");c&&!this.i(c)?f.src=this.h(c):(f.src=b,this.g=!0);c=2;for(var k=arguments.length;c<k;++c){var g=arguments[c].indexOf("=");f.setAttribute(arguments[c].substring(0,g),arguments[c].substring(g+1))}this.j(f)};r.prototype.inlineImg=r.prototype.o;
                    

                      + function t(b,a,c,f){a=document.getElementsByTagName(a);for(var k=0,g=a.length;k<g;++k){var e=a[k],m=e.getAttribute("data-pagespeed-lsc-hash"),h=e.getAttribute("data-pagespeed-lsc-url");if(m&&h){h="pagespeed_lsc_url:"+h;c&&(h+=" pagespeed_lsc_hash:"+m);var l=e.getAttribute("data-pagespeed-lsc-expiry");l=l?(new Date(l)).getTime():"";e=f(e);if(!e){var n=window.localStorage.getItem(h);n&&(e=b.h(n))}e&&(window.localStorage.setItem(h,l+" "+m+" "+e),b.g=!0)}}}
                    

                      + function u(b){t(b,"img",!0,function(a){return a.src});t(b,"style",!1,function(a){return a.firstChild?a.firstChild.nodeValue:null})}
                    

                      + q.m=function(){if(window.localStorage){var b=new r;q.localStorageCache=b;d(function(){u(b)});d(function(){if(b.g){for(var a=[],c=[],f=0,k=p(),g=0,e=window.localStorage.length;g<e;++g){var m=window.localStorage.key(g);if(!m.indexOf("pagespeed_lsc_url:")){var h=window.localStorage.getItem(m),l=h.indexOf(" "),n=parseInt(h.substring(0,l),10);if(!isNaN(n))if(n<=k){a.push(m);continue}else if(n<f||f==0)f=n;c.push(h.substring(l+1,h.indexOf(" ",l+1)))}}k="";f&&(k="; expires="+(new Date(f)).toUTCString());
                    

                      + document.cookie="_GPSLSC="+c.join("!")+k;g=0;for(e=a.length;g<e;++g)window.localStorage.removeItem(a[g]);b.g=!1}})}};q.localStorageCacheInit=q.m;})();
                    

                      + pagespeed.localStorageCacheInit();
                    

                      + //]]></script><style data-pagespeed-lsc-url="http://demo-httpd-1.1.modpagespeed.com/mod_pagespeed_example/styles/yellow.css" data-pagespeed-lsc-hash="Hfr_lbBzEa" data-pagespeed-lsc-expiry="Wed, 27 May 2026 06:44:20 GMT">.yellow {background-color: yellow;}
                    

                      + </style>
                    

                          </head>
                    

                          <body>
                    

                            <div id="div" class="yellow">I should be on a yellow background ...</div>
                    

                      -     <img src="images/Cuppa.png"
                    

                      -          alt="A cup of joe"
                    

                      -          alt='A cup of joe'
                    

                      -          alt='A cup of joe&#39;s "joe"'
                    

                      -          alt="A cup of joe&#39;s &quot;joe&quot;">
                    

                      +     <img src="images/Cuppa.png" alt="A cup of joe" alt='A cup of joe' alt='A cup of joe&#39;s "joe"' alt="A cup of joe&#39;s &quot;joe&quot;">
                    

                          </body>
                    

                        </html>

← All optimization examples