Browsing efficiency is commonly discussed during the discovery phase of a web application project. “How will your services increase my website’s performance and reduce lag?”. Our answer is typically based around our high-performance servers, network equipment and streamlined code. With HTML 5 there is an additional tool in our toolbox .
We’ve all see and maybe even used the <link> tag within the head of an HTML file. With the release of HTML 5 there are several new link relations, but we are only going to focus on the ‘prefetch’ relation in this post. The ‘prefetch’ relation (i.e. <link rel=’prefetch’ href=’SOME URL’>, allows us to deploy a technique to pre-cache/pre-load a file before the user requests it.
Search engines like Google have already implemented this code to increase your browsing performance. You can see this code in action by using Firefox to search Google for ‘CNN’ – once the result pane is loaded, right-click to view the source and search for ‘prefetch’.
Technically…How Does This Work?
When you browse a website your browser will process the page and then it will sit idle waiting for your next request. The ‘prefetch’ relation increases your browser’s performance by making use of this ‘idle’ time. After the requested page has been loaded, your browser will then cache the ‘prefetch’ file (indicated by the ‘href’ attribute). Once the file has been cached by your browser, navigating to the new page is extremely efficient, because your browser already has the page.
What else do I need to know?
Determining what pages to cache at what point during the user’s browsing experience is very important. There are several factors to consider, which are found within your analytic software. Remember, you can cache several pages, but if a user doesn’t see those pages there isn’t a benefit.