Instant.page - improve performance for websites with preload

Instant.page - improve performance for websites with preload

This short tutorial introduces the instant.page tool and explains how it can enhance website performance.

instant.page allows for just-in-time preloading/prefetching of URLs, meaning it loads the URL before it’s clicked on.

How does the prefetch url work?

When a user clicks on internal anchor links on the website, the page navigates accordingly. This is a common user action on websites.

With the instant.page tool, URLs are automatically prefetched in the background before the user clicks the link or hovers over it.

There’s a time gap between hovering over a link and clicking it. During this gap, the tool preloads the anchor link before the user clicks, improving performance upon click.

Important notes

  • Preloads internal anchor links
  • Compatible with desktop and mobile sites
  • Prefetches images on mouse hover
  • External links aren’t preloaded by default

Advantages

  • Open source
  • Compact size and easy installation
  • Supported by major browsers
  • Reduces page loading time and improves conversion rates
  • Enhances SEO ranking on Google

Learn more about Instant.page🔗

Installation

Installing this tool on your website is straightforward.

Simply place the following script tag before the closing body tag on your HTML page.

<script
  src="//instant.page/5.1.0"
  type="module"
  integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"
></script>

<link rel="prefetch" href="https://cloudhadoop.com/post" />

Certain links shouldn’t be prefetched to maintain instant loading.

These include:

  • Logout links
  • Actions that modify the database via API operations such as delete or update
  • External links

Instant.page provides a data-no-instant attribute for anchor links to exclude them from prefetching.

While internal links are preloaded by default, external links aren’t.

To enable prefetching for external links:

  • Add the data-instant-allow-external-links attribute to the <body> tag.
  • Add data-instant to external anchor links within the body tag

Supported plugins and browsers

  • Browsers Ensure browser support by using <link rel="prefetch">. The tool works with browsers supporting the prefetch option, such as:

    • Chrome version 61 and above
    • Firefox

  • WordPress plugin

    WordPress users can easily configure the plugin for WordPress-based sites. Find the plugin🔗.

  • Chrome extension

    A Chrome plugin is available to preload URLs for faster loading. Download and configure it from the Chrome Web Store.

Conclusion

Improving page performance is crucial for faster loading and better conversion rates. instant.page offers a simple and effective solution that can be seamlessly integrated into any website.