Link Prefetching with HTML 5 and jQuery HTML5 offers a cool new feature called link prefetching. Link Prefetching allows developers to specify resources (such as another page or an image) that can be preloaded when a user visits a page, so that they can be rendered faster when/if they are requested. If, for example, you have a blog then you can logically assume that when someone visits your blog's homepage, they'll probably click on one of the first few links to posts too. In your blog's homepage HTML code, you could simply add the following tag for each blog post you would like to prefetch: <link rel=prefetch href="http://myblog.com/posts/blog-post-url.html" /> When a compatible browser loads the homepage it will also try to load http://myblog.com/posts/blog-post-url.html too! However, hard-coding links for each post like this is not ideal. If, like a blog, your website serves dynamic content then it may not be possible to know the urls in advance and constantly updating your HTML when a change is made would be tiring. Instead, it would be better if we could do this dynamically using Javascript and jQuery. Check out the following snippet: // create an object named "app" which we can define methods on var app = { // returns an array of each url to prefetch prefetchLinks: function(){ // returns an array of each a.prefetch link's href var hrefs = $("a.prefetch").map(function(index, domElement){ return $(this).attr("href"); }); // returns the array of hrefs without duplicates return $.unique(hrefs); }, // adds a link tag to the document head for each of prefetchLinks() addPrefetchTags: function(){ // for each prefetchLinks() ... this.prefetchLinks().each(function(index,Element){ // create a link element... $("<link />", { // with rel=prefetch and href=Element... rel: "prefetch", href: Element // and append it to the end of the document head }).appendTo("head"); }); }, } // when the document is ready... jQuery(function(){ // call the method we defined above. app.addPrefetchTags(); } I'll explain what's happening here in order of when it happens: Once the DOM is ready, we look for each link ( <a> tag ) with class "prefetch". Next we stick each <a> tag's href (the url of the page we want to preload) in to an array. Because a link to the same page may appear more than once per page, we call $.unique() to remove any duplicates from this array. Now we have an array of urls to prefetch, we simply create a new link tag for each on with rel="prefetch" and href="_url-to-prefetch_" and append it to the end of the head tag. Now, within your code, simply add class="prefetch" to any link which you would like to improve the load speed on. Ruby On Rails Helper Method If you're using Ruby on Rails, I've written a simple helper method to make light work of adding prefetch links to your templates: # add me to application_helper.rb # <%= prefetch_link_to("click me", root_url) %> # => <a href="/" class="prefetch">click me</a> def prefetch_link_to(name, path, options = {}) options[:class] = options[:class] ? "#{options[:class]} prefetch" : "prefetch" link_to(name, path, options) end This can be used just like Rails's link_to method to create links with class="prefetch". Some tips and caveats. Prefetching can be a really effective way of speeding up your web page but, like Uncle Ben said "With great power...". Here are a few things to keep in mind: Only use prefetching to fetch pages that you believe will receive most traffic. Things like a Terms of Use or Legal page will be rarely visited and, if they are, it will be by someone who is intent on reading and wont mind waiting an extra few milliseconds. Prefetching can be used behind the scenes to load large images that are not immediately visible. For example, if you're using lightbox then you can prefetch full-sized images ahead of their thumbnails being clicked on. Prefetching can screw up your visitor stats. If every page your visitors load also prefetches two or three other pages you can expect your visitor stats to grow. This will produce unreliable data. Because only the HTML is fetched though, I believe Google Analytics and other JS-based stat-reports should not be effected. Don't prefetch external pages. You're not a charity (unless you are a charity)! Using prefetching on links that take visitors away from your site is only helping to take visitors away from your site faster!