prefetch prerender multiple pages on hover

Question

I have the following code which prefetches and prerenders *specific links on hover, My question is, Do I need to add a new link each time, or is it enough that I change the href?

$(".prerender").on("mouseover", function() {
        var link = $(this).attr("href"),
            prerenderLink = $("#prerenderLink");
        if (prerenderLink.length) {
            if (prerenderLink.attr("href") === link) return;
            prerenderLink.attr("href", link);
        } else {
            $('<link id="prerenderLink" rel="prefetch prerender" href="' + link + '" />').appendTo("body");
        }
    });

Will removing, changing the href cancel the pre-rendering/pre-fetching of a previously defined href or even remove it from cache? Or since it was called once it stays in cache?

Also, Where can this be tested?

*Because Pre-rendering is an advanced experimental feature, and mis-triggering it can lead to a degraded experience for your users, including increased bandwidth usage, slower loading of other links, and slightly stale content. You should only consider triggering prerendering if you have high confidence on which page a user will visit next, and if you’re really providing added value to your users.

Answer 1

Chrome/IE/Edge allows prerendering of one page per window (please, note that it isn't a tab), it means the second prerender hint is ignored. Therefore, you have to update the href attribute in order to tell the browser that another page must be prerendered. When the href attribute gets changed, Chrome dismisses the previously prerendered page, it looks like that IE11 and Edge behave the same way, but it is hard to verify. In order to see what is prerendered in Chrome, you can visit chrome://net-internals/#prerender. Please note, when the dev tool is opened, Chrome/IE/Edge ignores the prerendered page, they will load it from scratch.

In general, the hover solution isn't the best one. As you pointed out, your server will get the additional load, hence, it is better to get a decent confidence before adding the prerender hint. Also, the browser needs some time to load the page. Using the hover solution, the browser might not get enough time for prerendering.

I am also interested in this subject. A few months ago, I started an open-source project (https://github.com/sirko-io/engine) which tracks how users navigate a site and adds the link tag to hint the browser. You might try it at your site if you want.