Instant.page - improve performance for websites with preload

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

Instant.page allows to just in time preload/prefetch the URL, that does mean is to load the URL before loading/clicking on it.

How prefetch url works?

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

With Instant.page tool, It automatically prefetch URL’s in background before user comes to click link as well as hovering the link.

There is a time gap between mouse hover a link and clicking an link, During time gap, This tool preload the anchor link before user click on it. This will improves performance after 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 improves conversion
• Better to rank in Google in terms SEO

You can find more about Instant.page

Installation

install this into your website is straightforward,

Please place the below script tag before body closing tag in HTML page

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

Excludes links not to prefetch

Some times page reload is not prefetched to load it with instant.page for below use cases

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

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

data-instant-allow-external-links attribute

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

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

wordpress plugin

WordPress users can configure plugin to configure to wordpress based sites.

Plugin can be found (here)[https://wordpress.org/plugins/instant-page].

Chrome extension

It has chrome plugin to load faster for URL preload

You can download and configure in Chrome with (this)[https://chrome.google.com/webstore/detail/instant-page/hmjffbhgdpbhfemdjncjjpfcjiaiflbi]

Browser support

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

• Chrome 61 version
• Firefox

Conclusion

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