Speed up WordPress using InstantClick

I’m using nginx 1.4.7 + PHP-FPM 5.5.11 with OPcache enabled to host WordPress. This serves pages pretty quick (it takes ~800 ms to completely load a page including all images) but it didn’t feel instant.

After a little research I found InstantClick, a very small JavaScript library that starts loading the next page when users hover over a link. This way the next page will already be loaded when they actually click on a link, making it feel instant (users usually click 200 to 300 ms after hovering over a link on a desktop PC, 300 ms on Android and 450 ms on iOS according to InstantClick’s homepage, you can test it yourself here).

When users click on a link InstantClick will display a nice small progress bar in the top of your screen (like the one YouTube uses when you click on a related video). It also prevents the white flash when clicking on a link. More info on InstantClick’s homepage.

Of course this will increase your server’s load and bandwidth usage, as users sometimes will hover over links but not click on them.

If an user doesn’t have JavaScript enabled or doesn’t support InstantClick your website will work as usual without InstantClick.

Install InstantClick on WordPress

There is no WordPress plugin for InstantClick yet, but it’s very easy to add:

1. Download InstantClick (the production version will do)
2. Upload instantclick.min.js to your website’s root folder
3. Add the following code to all your pages, just before the </body> tag (you can do this by editing footer.php using the theme editor or if you have a SEO plugin installed just paste it in the Google Analytics text box):

   <script src="/instantclick.min.js" data-no-instant></script>
   <script data-no-instant>InstantClick.init();</script>
   

   Note: if you are using Google Analytics you need some additional code. See InstantClick’s download page under “Events and script re-evaluation”.

You’re done. Test it by going to your website’s homepage and click on a link, it’ll feel instant and you’ll see a progress bar in the top of your screen.