HTML5 logo

Another awesome feature of HTML5 is prefetching. What is prefetch? Well apart from being awesome it also allows a browser to utilize its idle time to load a page, document or image that a user may visit next.

By placing a set of prefeches in the <head> of a web page the browser, once it has finished loading the current page, will fetch the linked documents and store them in the cache. So when the user visits the fetched item the browser can serve it up much quicker out of the browser cache

How to Prefetch

Prefetching is mega easy.  All you have to do is use <link> with rel=”prefetch” and an href. Place all this between <head> and </head> and you’re done. Here is what it looks like for a page:

<link rel="prefetch" href="" >

And this is how to prefetch an image:

<link rel="prefetch" href="">

Browser Compatibility

Even though prefetch seems an easy and obvious thing for browsers to support not many have the capability yet. I’m sure this will change soon and it won’t harm the website if prefetch is implemented now. Those browsers that can will use it and those that can’t will ignore it.

Here’s the list:

  • Mozilla Firefox: Supported
  • Google Chrome: Supported (but uses different syntax)
  • Safari: Not Supported
  • Opera: Not Supported
  • Internet Explorer: Not Supported

So how do you implement prefetch in Google Chrome? Well it’s easy enough just substitute prefetch for prerender as in the example below:

<link rel="prefetch" href="" > <!-- Firefox -->
<link rel="prerender" href="" > <!-- Chrome -->

Or to reduce the amount of code you use:

<link rel="prefetch prerender" href="" > <!-- Firefox & Chrome -->

Ideas for using Prefetch with WordPress

Here is how I’ve used prefetch on a site that is predominately a gallery blog. Basically when a page or post loads I use the code below to loop through all the attachments and build the prefetch link with the URL to full size image. Then when the user clicks on one of the thumbnails the larger image will appear almost instantly.

$args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $myId, 'order' => 'ASC' );
$attachments = get_posts($args);
if ($attachments){
foreach ( $attachments as $attachment ){
echo "<link rel='prefetch prerender' href='".$attachment->guid."' />";

Here is a way to pre load the next set of archive results (code by Bernd Rubel):

<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prerender prefetch next" href="<?php echo get_next_posts_page_link(); ?>" />
<?php } ?>

Obviously it is not a good idea to try and prefetch your entire website/blog if it’s more than a few pages. Firstly it is unlikely that someone will visit your whole site in one sitting and secondly instead of speeding up your website it will have the detrimental effect of making it really, really slow. Better to use analytics and track how people move around your site to determine what would be best to prefetch.