Instant. page - improve performance for websites with preload

Instant. page - improve performance for websites with preload

This short tutorial talks about instant.page tool, how to improve website page performance.

The instant.page allows to just in time preload/prefetch the URL, which does mean to load the URL before loading/clicking on it.

How does the prefetch url work?

the website has a lot of internal anchor links, User clicks on them and navigates to the page. This is usual user action on site.

With the Instant.page tool, It automatically prefetches URLs in the background before the user comes to click the link as well as hovering the link.

There is a time gap between a mouse hovering a link and clicking a link, During the time gap, This tool preloads the anchor link before the user clicks on it. This will improve performance after the actual click happens.

Important notes

  • Preload internal anchor links
  • Works with Desktop and Mobile sites
  • Preload images with mouse hover
  • External links are not preloaded by default

Advantages

  • Opensource
  • Less size and easy to install it
  • Major browsers are supported
  • Decrease page loading and improve conversion
  • Better to rank in Google in terms of SEO

You can find more about Instant.page🔗

Installation

install this into your website is straightforward,

Please place the below script tag before the body closing tag on an HTML page.

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

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

Sometimes page reload is not prefetched to load it with an instant. a page for below use cases

  • Logout from an application
  • Delete or modify actions that trigger API in the Database
  • External Links

Instant. the page provides a data-no-instant attribute to anchor links to ignore prefetching the given links.

This tool preloads all internal links, However, external links are not preloaded by default.

So, First, You have to add the data-instant-allow-external-links attribute to the body tag. Next, Inside the body tag, add data-instant to external anchor links.

WordPress plugin

WordPress users can configure the plugin to configure to WordPress-based sites.

The plugin can be found here🔗.

Chrome extension

It has a chrome plugin to load faster for URL preload

You can download and configure it in Chrome from chrome store.

Browser support

You have to use <link rel=" prefetch"> to have support in a browser. You can use this tool if the browser supports the prefetch option.

  • Chrome 61 version
  • Firefox

Conclusion

Improving page performance is useful for a website to load faster, thus improving the conversion rate to the website. It is simple and easy to integrate into any website.