link rel prefetch

[Raynos]

• What is browser support like?
• What recommendation should we give?
• How does it even work?

Its surprisingly hard to congruent information about it. Half of it is saying "its cool use it" and the other half says "how to break your web pages. use prefetch"

[nimbupani]

HTML5 Boilerplate talks about prefetch a bit in the docs

[Raynos]

Thats just DNS prefetching and not link prefetching

[nimbupani]

oops sorry. I thought it also talked about link prefetching too.

[passcod]

I wrote a StackOverflow answer for this a while back… and it's pretty comprehensive. tl;dr:

• Link prefetching is spec'd.
• Firefox supports it from 3.5 but only on <link>, not <a> nor <area>.
• Chrome support is unclear.
• IE supports the attribute but does the wrong thing (DNS prefetching instead).
• Prerendering is not spec'd, only supported on Chrome, still marked as experimental.
• DNS prefetching is not spec'd (afaics), but is supported on every browser except IE (and Opera?).

I would recommend to avoid it, as it is too fragmented and isn't used enough / doesn't seem to offer much advantages (browsers already do optimisation automatically anyway). OTOH, using rel="prefetch" wouldn't do anything bad per se.

[igrigorik]

@passcod's answer is basically there. A few small corrections:

• Chrome supports rel=prefetch, and it works great
• Chrome also supports rel=subresource, rel=dns-prefetch, and rel=prerender
• DNS prefetching does work in IE, except they call it rel=prefetch

There is no reason to avoid it. It's a browser hint, and it's not going to harm you: if the browser recognizes it, it may use it, if it doesn't, then no harm done.

Details on Chrome implementation:

• http://www.igvita.com/posa/high-performance-networking-in-google-chrome/#prefetching
• http://www.igvita.com/posa/high-performance-networking-in-google-chrome/#dns-prefetching
• http://www.igvita.com/posa/high-performance-networking-in-google-chrome/#prerendering

[nimbupani]

@Raynos can you combine @passcod & @igrigorik comments to write a post on link rel prefetch?

[igrigorik]

@nimbupani @Raynos fwiw, http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#_browser_optimization

[cvrebert]

IE has improved its support: http://blogs.msdn.com/b/ie/archive/2013/12/04/getting-to-the-content-you-want-faster-in-ie11.aspx

[cvrebert]

http://caniuse.com/#feat=link-rel-prefetch

[passcod]

I updated my SO answer today: http://stackoverflow.com/questions/7830675/how-can-i-preload-a-page-using-html5/7830732#7830732

TL;DR: Prefetch has very good support, DNS Prefetch has near-universal support, the other three (preconnect, prerender, lazyload) have varying levels of support. I'd recommend "use it" for prefetch and dns, "use it but be aware browser support isn't fully there yet" for preconnect and prerender, and probably "don't use" or at least "don't rely on it" for lazyload (it's a Microsoft extension).