5

I'm currently experimenting with prefetching pages to increase perceived performance of our website, using the code below (req. jQuery).

Only 0.5% of our visitors use dial-up, I'm excluding querystrings (good old times), externals links (http) and pdfs (our large files are in this format). On a production site, what other possible negative scenario's apply when prefetching that I haven't considered?

<script type="text/javascript"> $(document).ready(function() { $("a").each( function(){ $(this).bind ("mouseover", function() { var href=$(this).attr('href'); if ( (href.indexOf('?') == -1)&& (href.indexOf('http:') ==-1)&& ($(this).hasClass('nopreload') == false)&& (href.indexOf('.pdf') == -1) ) { $.ajax({ url:href, cache:true, dataType:"text" }); } }); $(this).bind ("mousedown", function(btn) { if (btn.which==1) { var href=$(this).attr('href'); if ($(this).hasClass('nopreload') == false) { window.location.href = href; return false; } } }); }); }); </script>

For certain links, when hovered over it will preload the page and on mousedown will navigate (rather then after the button is released).

Improve this question
1
  • The code above bypasses any inline javascript on links, ie. popups. You can add a class and not preload for these links. Commented Mar 14, 2011 at 14:31

5 Answers 5

Reset to default
2

A right click will trigger a mouse down event too - so you might want to check the events data.

I guess that the speed gain for html source of 20-30kb is rather low. Your function does not preload any image, css or js files but only the pure html code.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, I changed it to: $(this).bind ("mousedown", function(btn){ if (btn.which==1) {
2

On badly coded sites (which there are MANY), clicking a link might have an effect. For example, on many sites a delete button is in fact a link which when clicked, deletes a record. You have to be absolutely sure your site has zero standard vanilla links that when sent a GET request to, have harmful side effects.

You also have to be sure that it isn't possible for users to include similar links. I could also imaging links to external polling services, which e.g. easily allow one to make a poll in some forum by adding clickable links, which update the poll and redirect to REFERER.

Less harmfully, sites may do smart tricks to keep track of activity, thus keeping track of each prefetched page. This may impact your site's statistics or logging, and potentially give you a distorted view of your users' activity.

That said, I like the idea! :-)

Improve this answer

2 Comments

Oh wait, the polling thing doesnt apply because you exclude external sites. Ahwell, still a valid example in general, I guess..
added check for 'nopreload' class so that links with side effects work as normal.
0

In my opinion, there isn't much point. If you use javascript and CSS sitewide anyway, the only thing extra you're going to be caching is images, and this can be done using javascript on a page-per-page basis. It seems to me that you're giving your server far too much work to do needlessly.

When you mouseover a link it will load and cache the page, correct. But when you navigate to that page the browser will once again request the page and the server will still have to build it and send it, which makes the caching process pointless.

Improve this answer

Comments

0

Have you considered Prefetching as defined in HTML 5? I'm not quite sure how many browsers support it currently, but it's worth checking out IMHO. I thought FF supported it, but I couldn't get it to work, but Chrome does seem to do it.

Normally you can set in the head:

<link rel="prefetch" href="abc.html">

A quick test to do it dynamically "onmouseover" in Chrome also works:

<a onmouseover="var l=document.createElement('link'); l.rel='prefetch'; l.href=this.href; document.getElementsByTagName('head')[0].appendChild(l);" href="abc.html">abc</a>
Improve this answer

1 Comment

Great idea and then browsers of dataplan sensitive devices could decide not to implement prefetching, which my js solution can't.
0

Here's a downside: Chrome is trying to prefetch my event tracking pixels, as I write them to the page, and it results in double impressions.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.