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, which does mean 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 them and navigates to the page. This is usual user action on site.
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.
- 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 improve conversion
- Better to rank in Google in terms of SEO
You can find more about Instant.page🔗
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> <link rel="prefetch" href="https://cloudhadoop.com/post" />
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 the Database
- External Links
Instant. the page provides a
data-no-instant attribute to anchor links to ignore prefetching the given links.
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 users can configure the plugin to configure to WordPress-based sites.
The plugin can be found here🔗.
It has a chrome plugin to load faster for URL preload
You can download and configure it in Chrome from chrome store.
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
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 into any website.