THE BEST NEWSLETTER ANYWHERE
Join 6,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, which does mean is to load the URL before loading/clicking on it.
How does the prefetch url work?
the website has a lot of internal anchor links, User clicks on it and navigates to the page. This is usual user action on site.
With the Instant. page tool, It automatically prefetches URLs in the background before the user comes to click the link as well as hovering the link.
There is a time gap between a mouse hovering a link and clicking a link, During the time gap, This tool preloads the anchor link before the user clicks on it. This will improve performance after the 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 improve conversion
- Better to rank in Google in terms of SEO
You can find more about Instant.page
Installation
install this into your website is straightforward,
Please place the below script tag before the body closing tag on an HTML page.
<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
Excludes links not to prefetch
Sometimes page reload is not prefetched to load it with an instant. a page for below use cases
- Logout from an application
- Delete or modify actions that trigger API in Database
- External Links
Instant. the page provides a data-no-instant attribute to anchor links to ignore prefetching the given links.
data-instant-allow-external-links attribute
This tool preloads all internal links, However, external links are not preloaded by default.
So, First, You have to add the data-instant-allow-external-links attribute to the body tag.
Next, Inside the body tag, add data-instant to external anchor links.
WordPress plugin
WordPress users can configure the plugin to configure to WordPress-based sites.
The plugin can be found (here)[https://wordpress.org/plugins/instant-page].
Chrome extension
It has a 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 support in a browser. You can use this tool if the browser supports the prefetch option.
- Chrome 61 version
- Firefox
Conclusion
Improving page performance is useful for a website to load faster, thus improving the conversion rate to the website. It is simple and easy to integrate any website.
