What's the right method to set a new prerender or prefetch in HTML?
<!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?
Answer
<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.