InstantClick makes any website feel much faster by starting to preload the next page as soon as a visitor hovers over a link. This blog is aimed at theme developers looking to improve experienced theme performance. To use InstantClick as a plugin, jump to the post about the plugin version.
The InstantClick JavaScript is very simple to implement and comes with few options. The main configuration is done by adding `data-no-instant` to scripts that shouldn’t be reloaded at every page load. Unfortunately, the script loading mechanisms of WordPress don’t allow for adding `data-` attributes to the `<script>` tag. That’s the main reason why the easiest (and most durable) way to include InstantClick in your theme is by using our little plugin.
Adding the script to your theme
To start boosting your theme performance with InstantClick, grab the plugin files and extract them somewhere in your theme. To get started, `require` the class file (`class-wp-instantclick.php`) and call `WP_InstantClick::enable();`.
Set the preload action
By default, InstantClick will start preloading pages when a visitor hovers over a link. You can change the default behaviour to either start preloading after a delay, or only when a visitor starts clicking (shaving off 50-70ms already). In your functions file, use one of the following calls to change the default behaviour:
- On mousedown: `WP_InstantClick::preload_on_mousedown();`
- On hover after a delay: `WP_InstantClick::preload_on_hover( $delay_in_milliseconds );`
`data-no-instant`
Like I mentioned before, the main way to affect the behaviour of InstantClick is by setting the `data-no-instant` attribute to the `<script>` tag. WP doesn’t have a way to do this out of the box, so the plugin has a built-in method for setting the attributes on scripts enqueued using `wp_enqueue_scripts()`.
In your theme’s `functions.php` (or functions plugin, or where-ever), call `WP_InstantClick::no_instant( $handle )` using the handle of the script you want to exclude:
`WP_InstantClick::no_instant( ‘my-script-handle’ );`
Adding custom JS
To add custom JavaScript before or after InstantClick initialization (again, see the InstantClick docs) you can use the hooks `instantclick_before_init` and `instantclick_after_init`, called inside the `<script>` tag before and after `InstantClick.init();` respectively.
For example, to implement the Google Analytics example from the InstantClick website:
add_action( 'instantclick_before_init', function() {
?>
/* Google Analytics code here, without ga('send', 'pageview') */
InstantClick.on('change', function() {
ga('send', 'pageview', location.pathname + location.search);
});
<?php });
Including the options page
To use the default InstantClick options page, include the `class-wp-instantclick-options.php` file and call `WP_InstantClick_Options::enable();`.
Advanced
You can modify the defaults of the options page using the `instantclick_defaults` filter. To add extra options to the page, use the WordPress Settings API. You can use the filter `instantclick_sanitize_settings` to save an extra field on the options page to the main option.
