Prerender example in Magento

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%.

A couple of weeks ago I watched a YouTube presentation by Steve Souders. He talked about an approach that allows you to inject the prerender link on the fly using JavaScript. For detailed information check his blog post about prebrowsing. I found this approach very powerful and I created a small addition to it so it adds a prerender link for the first product we have on the search results page in Magento. The approach is based on vanilla JavaScript and could be easily added to any Magento project. The quickest way I’ve found is to put it in the “Miscellaneous Scripts” text area in Magento admin. To navigate to this text area go to: System -> Configuration -> Design -> HTML Head -> Miscellaneous Scripts.

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.

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
    var d = document;
    var b = d.querySelectorAll('body.catalogsearch-result-index');
    if (b.length > 0) {
        var links = d.querySelectorAll('.products-grid a.product-image');
        if (links.length > 0 && typeof links[0].href !== "undefined") {
            var firstHref = links[0].href;

            //Adding the link in HEAD
            var l = d.createElement('link');
            l.rel = 'prerender';
            l.href = firstHref;
            d.head.appendChild(l);
        }
    }
});
</script>

Use it wisely. I hope it would help somebody out there!

Leave a Reply

Your email address will not be published. Required fields are marked *