Recently I began experimenting with prerender resource hints. This new feature allows you to “tell” the browser to load a page in the background and instantly show this page the when user decides to visit it. It’s currently a W3C Working draft https://www.w3.org/TR/resource-hints/#prerender.
It’s pretty easy to implement prerender and the good news is that already many browsers support it. According to “Can I use” in March 2017, global usage was 62.97%. Prerender is supported by IE 11, recent versions of Edge, Chrome for desktop and mobile, and Opera. Actual browser support information can be found here: http://caniuse.com/#feat=link-rel-prerender
If you want to prerender the page http://example.com/next-page.html you need to put the following in the HEAD tag:
<link rel="prerender" href="http://example.com/next-page.html">
There are some limitations that need to be considered:
- You can use the prerender technique only once per page because browsers are trying to prevent developers abusing as this could lead to wasting too much traffic.
- You can use this technique for GET requests.
- If you have currently opened Chrome dev tools, this technique may not work. This is what I’ve noticed during my tests, and it took me a couple of minutes to figure out what the problem was.
This read wraps all you need to know in general about prerender: http://stackoverflow.com/questions/26387612/html-performance-prerendering-of-multiple-pages/26519065#26519065
This technique looks very powerful and pretty simple to use, so I started wondering: “How could I test it quickly without doing deployment in any Magento project?” I pondered over what the appropriate place to use it in Magento was. Product list and search result pages were good candidates. I turned for advice to a friend who works a lot with analytics data and tracks clicks in Magento shops. He found an example where the Click-through rate of the first product on the search results page was about 20%.
Here is what I’ve created. The script checks if the current page is the search results page and creates a prerender link on the fly for the first result on the search results page. If you want to use it for your project, feel free to modify it and amend it according to your custom Magento theme. You may also consider looking at your analytics data because you may find categories where it makes sense to use this technique as well.
Use it wisely. I hope it would help somebody out there!