Boost WordPress Theme Performance with InstantClick

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.

No Comments

Sorry, the comment form is closed at this time.