Super-aggressive 'caching' technique

Question

I had an idea on how to vastly speed up my website and ease the load on my server for cached objects, but I'm wondering if this is an extremely stupid idea before I spend all day thinking about it! Hear me out -

The localStorage object has a minimum of 2.5 MB (in Chrome, more here) which is good enough for most small sites. Which is why I am wondering - for small, static websites, would it be a good idea to basically save the entire site in a huge localStorage file and basically load the site from the visitor's own computer each time? To better explain my idea, here's some pseudo-code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--other head information-->
</head>
<body>

    <script>
    if (localStorage.getItem('cached_site')!=null) {
        document.getElementsByTagName("body")[0].remove();
        document.documentElement.innerHTML = localStorage.getItem('cached_site');
        //Somehow stop loading the rest of the site (ajax?)
    }
    else {
        //set localStorage var to the source code of the site.
        //**This will be fleshed out to data/base64 all image resources as well**
        localStorage.setItem('cached_site',document.documentElement.innerHTML);
        //load the site as normal
    }
    </script>

</body>
</html>

This will save the contents of the body in a localStorage file called cached_site. There are some issues with the logic (like the "stop loading the site" part) but you get the idea.

Is this worth it? Potentially, requests could be completely cut from static content because it's all being loaded onto the user's computer. In order to update the content, maybe another value, perhaps a version number could be saved and checked in the else block.

My webhost limits the amount of requests I can get per day, which is why I thought of this. It's not a huge deal, but an interesting project nonetheless.

What is the advantage of this approach over regular HTTP caching (`Cache-Control`, `Expires`, etc.)? — ruakh, Jun 15 '13 at 01:34
@ruakh Good point. I suppose it's easier to keep things up-to-date, but now that I think of it, my approach wouldn't even work on non-JS devices or browsers. — PGR, Jun 15 '13 at 01:36
This probably an overcomplicated method of achieving an offline web app. Take a look at Web Apps which automate all of this and allow updates just through a set of manifest files. Here's a good tutorial: [http://diveintohtml5.info/offline.html](http://diveintohtml5.info/offline.html) — , Jun 15 '13 at 01:33

Filippos Karapetis · Accepted Answer · 2013-06-15T01:59:43.273

This idea will have issues with dynamic web sites... how will you treat dynamically generated web pages?

Another idea would be to save each page into a static html file on the server, and then serve the static page, which will be regenerated when needed.

You should also cache the static parts of your website, i.e. images, scripts, CSS, and store these in the cache of your visitors' browsers.

In Apache, you could use mod_expires, and then set up an .htaccess file like this:

### turn on the Expires engine
ExpiresActive On

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)(\.gz)?$">
  ExpiresDefault "access plus 1 month"
  FileETag None
</FilesMatch>

This will basically cache all of the static parts of your website in your visitors' browser cache, so they will stop refetching the same files over and over.

You should also try and combine your CSS/Javascript files, and ideally end up with 1-2 javascript files, and 1 CSS file, thus limiting the number of requests per client.

I would also suggest using Yahoo's YSlow and Google's PageSpeed Tools to profile your site. They both contain best practices on how to speed up your page here and here.

Here are some suggestions from Yahoo + Google, at a glance:

Minimize HTTP Requests (use combined files for JS/CSS, CSS sprites, image maps and inline images, where possible)
Add an Expires or a Cache-Control Header (like what has been explained above)
Properly configure ETags, or remove them
Gzip Components (e.g. with mod_deflate in Apache)
Make JavaScript and CSS External
Minify JavaScript and CSS (i.e. remove whitespace and newlines) - in PHP, you can use the minify script to do this
Optimize images

Super-aggressive 'caching' technique

1 Answers1