How to load pages instantly with Instant.Page?

Do you want to improve your website speed whether WordPress or Blogger, then this article is for you? Here I will show you how you can instantly load URL on a website by implementing an instant click feature. 

Here, we will use the instant.page library to speed up our website speed by implementing URL prefetch. It is an open-source library developed by Alexandre Dieulot.

How Instant page link preload works?

Instant.page preloads the page just before the user clicks on it. When a user hovers over a link, it will start loading the HTML part of that webpage in the background and it can save 100 milliseconds of latency. 

The “just-in-time preloading” feature of the instant page improves the user experience on the website by loading the webpage at lightning-fast speed. 

On the desktop, when a visitor hovers the mouse on the link just before the click, it will start the preloading and save around 300 ms in the loading process. 

You can also load the page after the user clicks on a link and it will not utilize additional requests, still, it can improve page loading speed by 80ms on average. 

 You can also start preloading links when it comes in the viewport but I will not recommend this as it can take more server bandwidth. 

Mouse hover preload is the best option as it preloads HTML files only when a user hovers on a link more than 65ms. 

It also works in the same fundamentals in Mobile devices. It will start loading the page in the time gap of when someone touches his display before releasing it. Here it can improve page speed by 90ms on average. 

Does this affect server bandwidth?

No, it will not affect the server bandwidth that much as it preload only when there is a good chance that a user will click on a link. 

It also loads only the HTML part of the webpage leaving the CSS and JavaScript. 

Is it heavy JavaScript for my website?

It is a very lightweight JavaScript and its size is around 1KB only. 

How to implement Instant-page preloading in Blogger?

You can easily install the instant-page script on your blogger website by following the below method. 

1. Go to the Blogger dashboard > theme > Edit HTML 
2. Now click on code area and type CTRL+F to search </body> tag. 
3. Now copy the below JavaScript code and paste it just above </body> tag.

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

You can get the latest Version of this script from the Official Instant.page website.

Now you have successfully added the instant click functionality in your Blogger website.  Now it will prefetch the URLs of your site just before the click. 

Video Guide 👇

How to install the Instant.page in WordPress?

You can implement instant page functionality in WordPress easily by adding a lightweight plugin. 

To install instant page plugin in WordPress site: 

1. Go to WordPress dashboard > Plugins > Add New
2. Now search for instant page plugin
3. Install and activate this plugin.

Now, this link (URL) preloading feature of the instant.page is activated on your WordPress website. 

Here note that you can enable the same feature using a caching plugin like LiteSpeed cache, Perfmatters, etc. 

Browser support and  security

It will support all chromium-based browsers like chrome, Microsoft edge,  Brave and Firefox, etc. It won’t break your site on unsupported browsers like safari, internet explorer. 

It is completely secure and it is hosted serverless with Cloudflare workers. 

You can also self-hosted this on your server by downloading the latest version of the JS file from the official site and add a module script tag just before the </body> tag in the below format.

<script src="instantpage-5.1.0.js" type="module" defer></script>

Additional options with data attributes

You can also apply some additional settings and customize the Javascript according to your choice by adding some data-instant attributes. 

By default, this code works with internal links only but you can enable it for external links using single data instant attributes. 

Here is the list of data attributes that you can use. 

data-instant-allow-query-string
data-instant-allow-external-links
data-instant-whitelist
data-instant-intensity="mousedown"
data-instant-intensity="mousedown-only"
data-instant-intensity="150"
data-instant-intensity="viewport"
data-instant-intensity="viewport-all"
data-instant-mousedown-shortcut

You can also exclude certain URL to preload using the data-no-instant attribute. 

For example, 

<a href="https://domain.com/post" data-no-instant>Post</a>

conclusion

I hope you got the idea about how the instant click function work and how you can implement instant.page script in both blogger and wordpress websites. 

It will greatly improve the user experience by loading the web pages inside your website with lightning-fast speed. 

You can also improve the page speed of your Blogger website by following the below articles. 

• 15 ways to improve page speed in Blogger. 
• Fix avoid chaining critical request

If you have any doubt you can ask me in the comment section. Also, don’t forget to subscribe to our YouTube channel for more Speed improvement Guides. 

SUBSCRIBE NOW