Using HTML5 Prefetching to Show Content Faster

Yesterday, Amazon unveiled the updates to the Kindle product line and held within were a few surprises.  One of the largest surprise that I took away was that Amazon created their own Webkit based browser called Amazon Silk for use on the new Amazon Kindle Fire.  As I watched the introductory video, I couldn’t help but focus on the concept of the smart computing cloud of EC2 to pre-cache trending pages/links so the speeds associated with these pages are faster.  While the concept isn’t new, it’s something that many people struggle with in achieving.  Thankfully, the tools are available to replicate the goal of increasing the speed of rendering without the need of EC2.

Analyzing Trends:

An image of Google Analytics' side navigation

Before we can begin to reliably cache targeted pages, we need to know what pages to cache.  This can easily be done using typical search analytic packages such as Google Analytics.  Inside of these packages (Google Analytics will be used as the example), you should be able to locate your top content on the site.  This represents the pages with the most visits over a period of time.  If you use a proxy server to cache the content of your website instead of directly hitting the web server, these are the pages you should be making sure are cached appropriately.

The next thing to pay attention to on this list is how users are getting to these pages and where they are going from such.  If the links are internal, this opens up the possibility of prefetch caching the “next” page onto the client’s system.  Obviously not all things can be cached like this (e.g. steps with in a shopping cart); however, if the users typically click on the “Login” link from your homepage, prefetching this link may provide a better, faster experience.

The last item to focus on in the analytics tool is any form of search analytics you may have.  I’m not talking about SEO analytics but more about internal site searches for when the user just cannot locate the information in the various navigation structure(s) you’ve presented.  If there tends to be a search term used very frequently, this is a possible candidate for caching as well as the page most people click on from search terms.  While such information tends to shine a spotlight on where your navigation may need to adjust; caching the content in anticipation may be a helpful short term solution.  For more information on this type of analysis of your internal search analytics, I highly recommend Louis Rosenfeld’s book Search Analytics for Your Site.

Setting up Prefetch caching:

Assuming you don’t have the ability to setup a proxy server between the web server content and the consuming browser, there are ways to cache the content of your site for the consumers to interact with.  The primary one I want to focus on is the new HTML5 prefetch method.  In the proxy server case, the browser requests the information from a proxy server.  The server checks to see if it already has that information from a previous request, and send the information to the consumer if it does.  While the information may be stale, most content on the web is capable of being cached like this without any impact.

With HTML5 prefetch caching, the cached content is stored on the consuming browser’s device along with typical internet cache or temp files.  How this is different than normal browsing is that prefetch can request a page, image, or other resource while the user is on a different page.  If you have ever went to a web page, left, and then went back to it; the return experience should be a lot faster for you.  This is using the local cache of the page.

In order to enable Html5 prefetch caching, you simply need to add the following line into the <head> tag of the page.

<link rel="prefetch" href="location of page" />

This single line tells the browser to retrieve the specified file while the user is on the current page.  These lines can be dynamically added to the head tag in order to adapt to trends or to address the needs of search term results, as well.  If you want to learn more about HTML5 prefetching, checkout this blog post by Jean-Baptiste Jung.

Summary:

While browsers are getting faster, it is nice to be able to ensure the user experiences the speed of the page they request.  While prefetch caching isn’t identical to all of the optimizations that EC2 does for Amazon Silk, it does provide an alternative in terms of the perceived experience. Review the needs of your audience through the analytical data available and act accordingly.  Caching is just one of many solutions but can provide a great value to your users.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s