Menu
<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML Document</title>
<link rel="prefetch" href="https://www.apple.com/">
<link rel="prerender" href="https://www.apple.com/">
<script>
document.addEventListener('click', function () {
// Prerendering https://www.apple.com/ipad on Chrome.
// ...
// Prefetching https://www.apple.com/ipad on Firefox.
// ...
}, false);
</script>
When the page is opened, https://www.apple.com/ is prerendered and prefetched on different browsers. When the document is clicked, I hope to prerender and prefetch another page, https://www.apple.com/ipad.
It appears we have 2 methods to choose. We can either replace the URLs in current 2 link elements. Or we can insert 2 new link elements into head element.
What's the right method to set a new prerender in HTML?
What's the right method to set a new prefetch in HTML?
I tried to replace prerender link element's URL from https://www.apple.com/ to https://www.apple.com/ipad on Chrome. I turned Chrome's Task manager on and found that https://www.apple.com/ipad wasn't prerednered. The only prerendered page is still https://www.apple.com/. So it appears this method doesn't work?
216
<link rel="prefetch"> is actually part of the HTML 5 spec.
<link rel="prerender"> appears to be Google doing their own thing.
Justin is incorrect. You do need both prefetch and prerender (or at least a polyfill that will output both) as FF supports prefetch and Chrome supports prerender.
106
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
