As a matter of fact, web sites are sharing a great amount of code between pages. Headers, footers, navigation bars, ads and search boxes keep being sent over and over again as part of every page.
A typical content-oriented web site like this one (Hi, Karen!) is actually made of very similar pages. Nothing but the central zone ever changes between recipes.
This is obviously a huge waste of bandwidth and the user experience is terrible.
Using AJAX to refresh nothing but the required parts has proven to be very efficient, especially when coupled with proper HTTP caching.
However, converting an “everything is sent in a single shot” web site to a web site where different parts are asynchronously loaded is not exactly a trivial work. It would probably require almost a complete rewrite.
Here’s another approach that might turn any web site designed the old way into a speed daemon. Best of all, it requires almost no change to the existing code.
The idea is to provide hints about fragments in the HTML code itself. Simple hints like where a fragment starts and where it ends.
Let’s start with some basic HTML code:
A simple web page, sent in a single shot. The navigation bar, the ads and the “hey” section are different parts that would actually require different caching strategies. It’s likely that the “hey” section changes on every page while others remain the same.
So let’s provide some hints about fragments. Custom tags would violate HTML5 so let’s just add some comments:
Now, here comes the trick.
Server-side, we’re going to slightly alter these comments before sending them to clients in order to include a signature of the content.
Thus, the previous code is going to be sent as something like:
In this example, a signature is just a MD5 digest of the fragment included in a comment.
Thanks to the HTML5 localStorage, this data can be made persistent. And it’s as easy as storing the inner content as a value for the name+digest property.
By the way, we keep track of every name+digest we found and stored permanently. Related web pages could really reuse this content, without downloading it.
part gets dynamically rewritten as:
With such an info, the server can easily spot fragments that the client has already in its local cache. Instead of sending the actual content, we’re just going to sent references.
Following the previous link displays the very same page, but the code is slightly different:
Indeed, in addition to the fragments delimiters, the client can also parse insertion points, and replace them with actual content.
The advantages of this techniques are huge:
It is trivial to implement
It can easily be added to virtually any existing web site
There’s no need to keep track of fragments ages. May the content change, the signatures will change and browsers will automatically get correct versions
Unlike AJAXified pages that require duplicate efforts in order to be SEO friendly, this technique is totally SEO friendly by default.
Here’s a proof-of-concept implementation.
Of course there’s still room for improvement. Cached entries should expire. Pages with partials missing from cache should be reloaded. localStorage is sweet but other ways are required for obsolete browsers.
But this technique seems to work decently well and may effortlessly give a serious boost to aging web sites.