Use code PERFMATTERS for an extra 10% off!
  1. Home
  2. Docs
  3. General
  4. How to prefetch a link (URL) in WordPress using Instant Page

How to prefetch a link (URL) in WordPress using Instant Page

Our Instant Page feature lets you automatically prefetch URLs in the background after a user hovers over a link. This results in almost instantaneous load times and improves both the user experience and perceived performance (how fast a site feels). We utilize the library developed by Alexandre Dieulot.

<link rel="prefetch" href="">

How prefetch works

  • On a desktop, a user hovers over a link. After 65 ms it automatically starts preloading the URL in the background (only the HTML). This could be a blog post, a page, an image, etc. For example, if your logo has a link to your homepage, it would preload your homepage if they hovered over the logo.
  • On mobile, a URL is preloaded after a user starts touching the link on their display, before releasing it.

The above is the best combination in terms of performance gains and low utilization on your server and mobile device. The feature respects if you have data saver or low data mode enabled on your mobile device (Android, iPhone). If that is on, nothing will be preloaded.

Because this feature works on mouse hover, it won’t show up on speed testing tools. But we encourage you to click around your site after you enable it. You should be able to feel the difference!

Enable link prefetching with Instant Page

Prefetch is supported by most modern browsers, with the exception of Safari and iOS Safari. Note: Prefetch can be enabled in Safari’s web developer tools. So it’s safe to assume that prefetch will be supported by default in the future.

Follow the steps below to enable prefetching.

Step 1

Click into the Perfmatters plugin settings.

Perfmatters plugin settings
Perfmatters plugin settings

Step 2

Click on the “Preloading” submenu.

Perfmatters preloading
Perfmatters preloading

Step 3

Toggle on “Enable Instant Page.”

Enable prefetch (Instant Page)
Enable prefetch (Instant Page)

This will load a small under 2 KB JS file (instantpage.js) locally on your site, which is used to prefetch the URLs when a user hovers over a link.

Step 4

Scroll down and click “Save Changes.”

Additional options with data attributes

There are additional options you can enable with Instant Page using the following data-instant attributes. Simply add any of these attributes to the <body> tag in your document and we’ll do the rest.

You can learn more about what these various attributes do at See below for some methods to add some of these attributes to your <body> tag.


Add JavaScript after page load

The first method would be to fire JavaScript at the end of the page load. The following code can be added to the Footer Code box in Perfmatters.

Let’s say you want to change the data intensity timing for how long the script waits before preloading (in milliseconds). You would add it like this:

<script type='text/javascript'>
	document.body.setAttribute('data-instant-intensity', '150');	

Only one data-instant-intensity attribute can be used at a time, but you can mix and match it with other attributes. So for example, this would work:

<script type='text/javascript'>
	document.body.setAttribute('data-instant-intensity', '150');
        document.body.setAttribute('data-instant-allow-external-links', 'true');	

Note: The above method will add an additional request to your site.

Merge with body tag

The second method would be to merge the attributes within the existing body tag when the page is rendered. This doesn’t require an additional request. The following code can be added to the Footer Code box in Perfmatters. Here is an example:


Troubleshooting Instant Page

URLs with a query string (?) aren’t preloaded by default because they sometimes trigger an action. If you think Instant Page is causing an issue you can always uncheck the option temporarily to test.

How to exclude Instant Page on a page/post

You can exclude Instant Page from running on an individual post, page, or custom post type. In the editor, on the right-hand side uncheck “Instant Page.” This will exclude the entire page from the script.

Exclude Instant Page on individual page
Exclude Instant Page on individual page

You can exclude an individual link from Instant Page by adding the data-no-instant attribute. For example:

<a href="" data-no-instant>Post</a>
Was this article helpful?

Related Articles