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.
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.
- Preload internal anchor links
- Works with Desktop and Mobile sites
- Preload images with mouse hover
- External links are not preloaded by default
- 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
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
data-no-instant attribute to anchor links to ignore prefetching the given links.
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 users can configure plugin to configure to wordpress based sites.
Plugin can be found (here)[https://wordpress.org/plugins/instant-page].
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]
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
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.