Using both prefetch and prerender on the same source
One common method to accelerate web pages is preloading those sources the visitor might need in near future. In HTML such sources are specified by the <link> element with a rel attribute. Currently there are four expressions in use:
- prefetch loads the source and is supported by Firefox (v. 29), Opera (v. 21) and Internet Explorer 11.
- prerender loads and renders the source and is supported by Chrome (v. 35) and IE 11.
- dns-prefetch is self-explanatory and at least supported by IE 11. I skip it here.
- subresource loads the source and is supported by Chrome (v. 35).
A lot of blogs out there assert that one can achieve full cross-browser support by using both prefetch and prerender on the same source. But that is at best only half the truth. Firstly all sources I have read use two <link> elements but according to the HTML 5 spec the rel attribute is a space separated list of strings (well known from the rel="shortcut icon" relation which adds an IE specific expression to the standard one). The following is syntactically correct and well understood by all browsers and remains the best for HTML pages:
1 <link rel="prefetch prerender" href="http://www.example.org/">
But the question arises what happens if a browser supports both relations as this is now the case? IE 11 allows for ten prefetched sources but only for a single prerendered one. All further will be ignored. Unfortunately prerender allways superseeds prefetch, so only one prefetch prerender will be carried out. I don’t preload HTML pages but JavaScript and CSS files that are not needed on all my documents. The both-expressions solution inhibits IE doing so except the first.
According to my tests Chrome prefetches a single file only, too. So preloading of non-HTML sources is not very useful here and one can think of skipping it completely. But the subresource relation that was introduced to Chrome a few month ago behaves in the same way as prefetch. And so the correct solution to non-HTML sources is:
1 <link rel="prefetch subresource" href="http://www.example.org/">When doing tests yourself keep in mind that a browser is not obliged to preload anything. There may be impacts hard to control.
