THE BEST NEWSLETTER ANYWHERE
Join 90,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
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.