instant.page Has Improved Our Page Load Time Significantly

instant.page Has Improved Our Page Load Time Significantly

It doesn’t matter what the current status is, I always look for ways to improve Bydik’s page load time without compromising user experience. I’ve added/installed many features over the period to improve page load time, instant.page is one of them, and it’s working like magic!

I first noticed the instant.page module at CSS-Tricks and I also noticed their instant page loading. From there, I made up my mind to have it here for better page loading performance.

A month has passed since I added instant.page here, it has improved our page load time significantly, and I am very happy to have it here. I would like to tell you why you should add instant.page to your site by answering some basic questions and I would like to give you some advice.

What is instant.page & How it Works?

instant.page is a small (1 KB) JavaScript file that preloads a page right before a user clicks on it and the user gets faster page loading within the site. The script is made by Alexandre Dieulot, a professional web developer from France. Here’s the HTML tag for the script:

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

You have to place it just before closing body tag </body> of your site to make sure it loads after everything else, it’ll make sure smooth loading when the page finished parsing.

instant.page preloads the links that a user most likely to click. There is a significant delay between hovering over a link and clicking that link, on average 200ms of delay, instant.page spent that 200ms to preload the page you’re clicking, and that’s why the page loads much faster.

It can improve your website’s latency by a lot and it’ll result in more traffic. The 200ms improvement of page load time can be the reason for a 5% increase in sales and traffic! Only users can feel the better page loading time, it’s not possible to measure the improvement with page testing tools.

By default, instant.page preloads internal links in plain formats. If your site uses a plain logout link, hovering over the logout link will log out a user, so it’s better to use a query logout link.

// The plain links are preloaded
example.com/logout

// The query links are not preloaded
example.com/?logout

You can opt-in for external links and query links with custom body attributes, but I suggest you don’t, it will cost too much data from users and it can also perform unwanted actions.

More Bandwidth & CPU Usage?

instant.page preloads links that a user hovering over, that means it’ll also preload links the user won’t visit and therefore it’ll cost too much bandwidth and CPU usage? Not really!

Pages are preloaded only when there’s a good chance that a user will visit them, and only the HTML is preloaded. So it’ll not cost the server/user bandwidth or CPU that much comparing to the benefits.

And the script itself doesn’t affect bandwidth usage as it loads from a third-party source. It also respects the user’s data saver plan before preloading a link.

Can I Trust the instant.page?

Is instant.page risky? If the developer changes the script to scam my site? If the developer discontinues the service? The script itself is the answer to all this, let me explain to you.

The script uses integrity attribute to make you trust the script, it’s not risky in the way other third-party JavaScript can be because the integrity attribute means that if you trust the code as it is now, it can’t ever change the code unless you change that attribute along with it.

It also cleverly uses the type="module" to prevent it from loading anything in browsers that don’t support prefetching anyway. So the script can’t be more transparent.

But if you fear the discontinuation of the service, it’s better if you find a more reliable CDN provider. For example, we use CDNJS for the script as we use them for other resources also.

<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/instant.page/5.1.0/instantpage.min.js" crossorigin="anonymous"></script>

Just like instant.page script, place it just before closing body tag </body> of your site.

Can I Host instant.page Locally?

You can but you shouldn’t! Why you would like to add an extra burden to your server after knowing that hotlinking the script is not risky? It’s not a wise decision to host locally. On our test, hosting instant.page locally doesn’t work with Cloudflare‘s Rocket Loader module.

Hotlinking the script can also have possible cache hits in case you’ve already visited a page using this. So don’t miss the greater cache-hits possibility.

Final Thoughts

instant.page is a great tool to improve a website’s page loading performance and every website should have it! We have it here also and we’ll have it until we find a better one.

It’s very easy to implement the instant.page on any site and it doesn’t affect bandwidth usage that much. There are CDN options available in case you don’t want to host it locally.

Like this? Please share this article with others. Let’s have more discussions in the comments.

2 Comments on this.

    • Just updated with the information you asked!

      If your logout link is a plain link, hovering over the link will log you out. If it’s a query link, it’ll not log you out. But there are custom parameters to control preload.

      Reply

Leave a Reply

Your email address will not be published. Your comments must follow our guidelines.