Among other great features, HTML5 web introduces prefetching, the art of loading pages before the user requested them. In this article, I’m going to discuss this new technique as well as showing you some ready to use examples to drastically improve your website loading time.
What is prefetching, and why it is useful
rel=prefetch indicates that preemptively fetching and caching the specified resource is likely to be beneficial, as it is highly likely that the user will require this resource. Search engines sometimes add
<link rel=prefetch href="URL of top search result"> to the search results page if they feel that the top result is wildly more popular than any other.
As loading time is a very important factor of a website quality, prefetching using HTML5 can definitely improve the user experience by loading pages before the user actually requested them. Of course, you have to be careful (Don’t prefetch your entire website!) but prefetching is definitely a feature that will make the web a better place.
Prefetching pages with HTML5
Prefetching pages is super easy to implement. The only thing you have to do is to place the following code with the <head> and </head> tags of your page. The href attribute have to contain the url of the page to prefetch.
|
1 |
<link rel="prefetch" href="http://www.example.com/"> |
It is also possible to prefetch only an image:
|
1 |
<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png"> |
Browser support
As prefetching (Or prerendering as Google Chrome name that feature) is a part of HTML5, it is currently not supported in all browsers:
- Mozilla Firefox: Supported
- Google Chrome: Supported since version 13 (Use an alternate syntax)
- Safari: Currently not supported
- Internet Explorer: Currently not supported
So, should you use it now? In my humble opinion, the answer is a definitive yes: Using prefetching now is possible in both Firefox and Chrome, and other browsers will probably implement it very soon.
Also, if you use prefetching on your website and the visitor browser do not support prefetching, nothing will happen. For what I’ve seen during some personal tests, it is safe to use prefetching as browsers will either implement it, or completely ignore it.
Another thing to note is that Google Chrome do not use the prefetch attribute and use prerender instead. This means that you have to implement both prefetch and prerender, as shown in the example below:
|
1 2 |
<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox --> <link rel="prerender" href="http://www.example.com/"> <!-- Chrome -- |
Prefetching pages on your WordPress blog
As I know most of my readers are WordPress users, I thought about a WordPress-specific example of HTML5 prefetching. A blog is typically the kind of website where prefetching can be very useful: On many situations, it is possible to “guess” which page the visitor will want to read next.
For example, if a visitor is currently having a look to the second page of your archives, it is highly possible that he’ll read the third page next. Just paste it into the header.php file of your theme in order to prefetch next archive pages.
|
1 2 3 4 |
<?php if (is_archive() and ($paged > 1) and ($paged < $wp_query->max_num_pages) ) { ?> <link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>"> <link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>"> <?php } ?> |
Of course, the version above can be enhanced according to your site own needs. According to my analytics, most people comes to my site on an article page like this one, and then, have a look to the home page. So, it can be great to add a new condition to the code above and prefetch the home page when the visitor is reading an article.
|
1 2 3 4 5 6 7 |
<?php if (is_archive() and ($paged > 1) and ($paged < $wp_query->max_num_pages)) { ?> <link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>"> <link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>"> <?php } elseif (is_singular()) { ?> <link rel="prefetch" href="<?php bloginfo('home'); ?>"> <link rel="prerender" href="<?php bloginfo('home'); ?>"> <?php } ?> |
Prefetching using jQuery
Now that we saw what prefetching can do for you, what about using jQuery to automatically prefetch each link with the prefetch class? That’s exactly what the snippet below do. Simply paste it to your website, and then add a prefetch class to each link you’d like to prefetch.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/ 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... $("", { // 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(); } |
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:
|
1 2 3 4 5 6 |
# 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!