Why does resource prefetching not work in IE11?

Have a look at this slideshow:

http://www.jungledragon.com/all/slideshow/promoted

It loads one big image, and in the bottom there are 9 thumbnail images, which you can see when you toggle the thumbs icon button.

As a test in speeding up this slideshow, I'm including link prefetch statements for the large version of each thumb:

    <link rel="prefetch" [large image url 1 here]" />
    <link rel="prefetch" [large image url 2 here]" />
    <link rel="prefetch" [large image url 3 here]" />
    <link rel="prefetch" [large image url 4 here]" />
    <link rel="prefetch" [large image url 5 here]" />
    <link rel="prefetch" [large image url 6 here]" />
    <link rel="prefetch" [large image url 7 here]" />
    <link rel="prefetch" [large image url 8 here]" />
    <link rel="prefetch" [large image url 9 here]" />

You'll find the above in the source of the page. The idea is that all large versions of the current batch (9 images) are preloaded so that when users navigate the slideshow, the large images often appear instantly.

Having implemented this, I've been testing the effects. The test instruction is simple:

Visit the slide show link
Wait for a few seconds (to allow the preloading)
Move to the next image a few times. If this works nearly instantly, prefetching was succesful. If an image load takes 2-3 seconds, it means it failed.

Alternatively, you can also open your browser's inspector window, network tab, and see both the preloading the the retrieval from cache. Note that if you do this test multiple times, you need to clear the cache each time.

Chrome results

The results in Chrome are spectacular. The prefetch hints are picked up aggressively. It's as good as it gets.

Firefox results

Firefox prefetches less aggressively and more slowly. Still, at least it does prefetch, and it works.

IE11 results

IE11 claims to support resource prefetching but it has zero effect. In Windows 8.1/IE11, none of the images are loaded instantly, it seems to prefecth nothing, also not by waiting a long time before navigating the slideshow. In IE's dev tools, I can confirm that the network tab shows no prefetch activity.

I learned later on that prefetching does not work with the dev tools open, but even when closed there is no prefetching going on, I can see that from the response times.

Any idea on why this works for Chrome and Firefox, yet not for IE11? It should be well supported but I cannot get it to work. This is a cross-domain fetch, both HTTP, not HTTPs, yet cross-domain prefetching should work according to the spec.

Solution

I have looked at the link you have provided and I believe the issue is the unusual and (probably) invalid placement of the link elements.

Microsoft state-

The link element can be used only within the head tag.

Within their MSDN documentation.

Mozilla Developer Network state-

Permitted parent elements Any element that accept metadata elements

This tallies with the official specification which further defines Metadata content-

Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.

base link meta noscript script style template title

The page head is able to contain metadata content whereas the body is only able to accept sectioning and flow content.