What's the right method to set a new prerender or prefetch in HTML?

Question

Answer 1

First of all, you confused me a little with the mixing between prefetch & prerender usages. Their usages should be like this:

prefetch usage:

It should be used for fetching and caching resources for later user navigation as per the official HTML5 spec (i.e. prefetching a css file to be used in a page which highly likely to be used by the user in his upcoming navigation). Supported in Chrome, Firefox & IE.

prerender usage:

It should be used for prerendering a complete page that the user will highly likely navigate to it in his upcoming navigation (i.e. like prerendering the next article where it is highly likely that the user will click on "next article" button). Supported only in Chrome & IE.

---

Back to your question, you can add browser hints (i.e. like the two link you used) as many as you really need, just don't misuse them because they are resource-heavy.

So, you can inject your hints when the page is generated (like what you did), or you can inject them at runtime using javascript like this:

var hint = document.createElement("link");
hint.setAttribute("rel", "prerender");
hint.setAttribute("href", "https://www.apple.com/ipad");

document.getElementsByTagName("head")[0].appendChild(hint);

For a better understanding for what you can do with all "pre-" goodies, see this brilliant presentation by google.