A simple link click will often times store hundreds of files in your browser’s cache, making the overall page speed very low. To combat this issue, browsers started to recognize the prefetch tag.
The prefetch tag allowed the browser to load resources behind the scene, while you were reading the article. So when you clicked on a link, or a image, its already cached, ready to use and show.
But the project instant.page takes this one step further by only pre-fetching links if a user hovers over a link. Resources wont be requested unless a user hovers over a link, which loads the link’s resources into your browser cache, and ensures the next page (which might be a conversion page) is loaded instantly.
Here is a small example program showing the simplicity of instant.page
<head> <!-- prefetch link --> <link rel="prefetch" url='http://mufasa.gq/great-resources-for-any-inspiring-coder/'> </head> <body> <!-- link user should click on --> <a href='http://mufasa.gq/great-resources-for-any-inspiring-coder/'>Link</a> <!-- prefetch library loaded --> <script src="//instant.page/1.1.0" type="module" integrity="sha384-EwBObn5QAxP8f09iemwAJljc+sU+eUXeL9vSBw1eNmVarwhKk2F9vBEpaN9rsrtp"></script> </body>
After running this code in your web browser, you will be greeted with page that is just a link.
In the GIF above, I open up developer tools, and go to the network tag. Once the network tab loads, I simply hover over the link. As you can see, once the link is hovered on, a network request appears in developer tools. I didn’t even click the link yet. But when I do the page loads instantly from cache.
No more network latency.