This 1.1 KB JS will Make Your Internal Page Load time - INSTANT ⚡️

dailydose
#1

It is being approx 300ms gap of time between hovering mouse and clicking on the link.

What if you can preload the HTML link on the hover? :wink:

Result

The subsequent web page link (such as related post, internal link, etc) will load instantly.


Introducing Instant Page

Alexandre Dieulot has created an Instant JS (Size: 1.1 KB) that you need to put just before </body> tag.

Implement using Plugin

  • Use this plugin

Implement Manually

  • For GeneratePress user, here’s a Video
  • I would highly recommend hosting JS yourself to leverage HTTP/2 and Browser cache.

  • Implement using Code Snippets plugin.

add_action('wp_footer', 'instant_js');
function instant_js() {
  echo '<script src="//example.com/instant.js"></script>';
}
  • Genesis user? Go to Customizing ▸ Theme SettingsHeader/Footer Scripts ▸ Place in footer

See demo: Visit https://gulshankumar.net/ and click on any internal link such as menu, post, etc.

Thanks & Regards,
Gulshan

6 Likes
#2

In GP like this right?

#3

should I enter my website name in the example.com and how I put instant.js on my website ?

Can you please elaborate this. :slight_smile:

#4

Just I found there is a plugin also

To install instant.page on your WordPress site:

  • Go to your dashboard > Plugins > Add New
  • Search for “instant.page” in the search bar at the top right
  • Click on “Install Now”
  • Click on “Activate”
2 Likes
#5

Replace example.com/instant.js with your own hosted path. For details: Watch above video of 2 minute.

1 Like
#6
/*!instant.page v1.2.1 - (C) 2019 Alexandre Dieulot - https://instant.page/license*/let urlToPreload
let mouseoverTimer
let lastTouchTimestamp
const prefetcher=document.createElement('link')
const isSupported=prefetcher.relList&&prefetcher.relList.supports&&prefetcher.relList.supports('prefetch')
const allowQueryString='instantAllowQueryString'in document.body.dataset
const allowExternalLinks='instantAllowExternalLinks'in document.body.dataset
if(isSupported){prefetcher.rel='prefetch'
document.head.appendChild(prefetcher)
const eventListenersOptions={capture:true,passive:true,}
document.addEventListener('touchstart',touchstartListener,eventListenersOptions)
document.addEventListener('mouseover',mouseoverListener,eventListenersOptions)}
function touchstartListener(event){lastTouchTimestamp=performance.now()
const linkElement=event.target.closest('a')
if(!isPreloadable(linkElement)){return}
linkElement.addEventListener('touchcancel',touchendAndTouchcancelListener,{passive:true})
linkElement.addEventListener('touchend',touchendAndTouchcancelListener,{passive:true})
urlToPreload=linkElement.href
preload(linkElement.href)}
function touchendAndTouchcancelListener(){urlToPreload=undefined
stopPreloading()}
function mouseoverListener(event){if(performance.now()-lastTouchTimestamp<1100){return}
const linkElement=event.target.closest('a')
if(!isPreloadable(linkElement)){return}
linkElement.addEventListener('mouseout',mouseoutListener,{passive:true})
urlToPreload=linkElement.href
mouseoverTimer=setTimeout(()=>{preload(linkElement.href)
mouseoverTimer=undefined},15)}
function mouseoutListener(event){if(event.relatedTarget&&event.target.closest('a')==event.relatedTarget.closest('a')){return}
if(mouseoverTimer){clearTimeout(mouseoverTimer)
mouseoverTimer=undefined}
else{urlToPreload=undefined
stopPreloading()}}
function isPreloadable(linkElement){if(!linkElement||!linkElement.href){return}
if(urlToPreload==linkElement.href){return}
const preloadLocation=new URL(linkElement.href)
if(!allowExternalLinks&&preloadLocation.origin!=location.origin&&!('instant'in linkElement.dataset)){return}
if(!['http:','https:'].includes(preloadLocation.protocol)){return}
if(preloadLocation.protocol=='http:'&&location.protocol=='https:'){return}
if(!allowQueryString&&preloadLocation.search&&!('instant'in linkElement.dataset)){return}
if(preloadLocation.hash&&preloadLocation.pathname+preloadLocation.search==location.pathname+location.search){return}
if('noInstant'in linkElement.dataset){return}
return true}
function preload(url){prefetcher.href=url}
function stopPreloading(){prefetcher.removeAttribute('href')}

Minified and fastest version if you want :slight_smile:

3 Likes
#7

Please refer to above YouTube video. I just embedded few mins ago. Or, use below plugin.

#8

After watching that video now I completely understand.
Thanks a lot giving us that kind of such things.

1 Like
#9

You’re welcome! :blush:

1 Like
#10

And another thing I want to hear form you.
Plugin or Script method is best for me?

In your opinion. Let me know.:slight_smile:

#11

Both are same. Not much difference. If you want easier, go with plugin. I prefer script because it’s minified and faster.

1 Like
#12

Thanks

#13

Nice Concept, I read There Documents. This Script Start Loading a link data whenever someone hover on it. Love it

1 Like
#14

This one will be the best one using code snippet right?

#15

That is an optional method can be used if your theme doesn’t have header / footer field option. Using function you can tell WordPress to echo code before </body> tag using wp_footer hook.

2 Likes
#16

What is the difference between this and Quicklink?

1 Like
#17

if I just install & activate this plugin, then will it works ?
& also which plugin youre using @GulshanKumar for file manager in wp dashboard ?

#18

Plugin method should work fine - easily.

For File Manager, I use WP File Manager when needed. I don’t keep this plugin always installed. After use, I deactivate and delete this plugin.

1 Like
#19


which one ?

#20

First one, where is your mouse pointer.

1 Like