HTML5: Drop-in prerender and prefetch script

Reading about prefetch and prerender, and especially Chromes prerender, got me thinking that this could to some extent be automated.

My blog has become increasingly slow and I though that this would work as a simple quick-fix.

This script relies on jQuery.


At startup (document ready) it will find any a-links tagged as “prefetch” and add their URL’s to the header prefetch. This will make browsers download and cache the HTML-page (but not the CSS/JS/imagers inside it) you have linked to.

Understand that if you tag a link with this then the browser will download this link – without triggering a JavaScript. This means that you should not tag submit-links like “Save”, “Delete” or similar with “prefetch” or “prerender”.



Any time a user hovers the mouse over a link this link is put into the headers “prerender”. There can only be one link in the prerender.

The theory here is that the user will usually spend at least 200 milliseconds or more before clicking the link, giving the browser time to download (and cache) the page and all its content. Some browsers (at least Chrome) will even render the whole page in a hidden window and just swap it in when the link is clicked.

The script

Note the lines I have commented out. With these two lines commented out the script works on all “<a href>” links. If you remove the comment on these two then they require the link to be tagged with “prerender”. If prerender has no data then href is used.


And here is the script:


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: