InstantClick is a JavaScript library that seamlessly loads pages in the background of your user’s browser as they hover over a link. This can give the impression that your site’s pages load instantly. We’ve recently implemented this technology on our site for Coaster CMS, you may have noticed pages appear to load in the blink of an eye – without a ‘flash’. In this post we will be implementing InstantClick with Coaster to improve user experience.
InstantClick with Google Analytics
To implement InstantClick with your Coaster site, all you have to do is download the script from instantclick.io and place the file within your theme’s public js directory. From here all we need to do is add a couple of lines of code to your theme’s footer template and everything is good to go. We will also be covering how to setup InstantClick to work with Google Analytics, as in itself InstantClick effectively turns your site into a single page web app. This can confuse analytics programs as they can no longer automatically recognise when a new pageview has been made. The code below is all you’ll need to setup InstantClick with support for Google Analytics:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script data-no-instant> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXX-X', 'auto'); InstantClick.on('change', function() { ga('send', 'pageview', location.pathname + location.search); }); InstantClick.init(50); </script> |
Breaking Down the Code
The ‘init’ method, as its name would imply, initialises the InstantClick script. The number within the brackets, in this case fifty, is the number of milliseconds to wait until the next page starts loading after the user has hovered over the link. If you want no delay, simply set this value to nothing. However, we do suggest using a minimum value of fifty as otherwise malicious visitors can cause slowdowns by hovering over many links in a very short period of time.
Copying the code above, replace ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’); with that of your own. Finally, upload these changes to your site and you should notice your pages load exceptionally quickly. Unfortunately, this script yields no SEO benefit since the improved loading times are only noticeable to the user – which is no bad thing. Nonetheless faster page speeds will likely result in greater user satisfaction. If you have any issues implementing InstantClick with Coaster, feel free to post a comment below and we’ll see what we can do.