instantpage/instant.page

Make your site’s pages instant in 1 minute and improve your conversion rate by 1%

instant.page's Issues

Ignore links with onclick events

Just a suggestion - I've been trying this out with a couple of legacy sites that do some dodgy stuff with onclick attributes. It is stuff like GET requests deleting resource but not until a confirm prompt.. Would checking for the onclick attribute and ignoring those links be useful?

Browser extension

Could you publish a browser extension? Or maybe there's already one and I missed it?
In particular it shouldn't clash with extensions such as https://chrome.google.com/webstore/detail/imagus/immpkjjlgappgfkkfieppnmlhakdmaab?hl=en
Thanks

Progressive Enhancement

Since this library has progressive enhancement, it would be good if you added a check for document.body.dataset and if it doesn't exist, then abort. That would prevent errors in any browsers that don't support dataset instead of error'ing out and halting the execution.

Instant.page doesn't work in vue project

Hey
Is there any updates on making this works in a vue project?
I tried to use it but it didn't work. same as instantClick.

Changelog

First of all, thank you for this package!
Maybe it is an idea to add a CHANGELOG.md to the repo or add it in release notes.
Would like to know what changed before updating.

Doesn't work in Firefox without cache headers

I know you're aware of this, but can we have an issue to track the problem?

ie11 support

I see: type='module'
and that is not supported by ie11.

Does this support ie11?

Change v3 behaviour at runtime

Hi @dieulot,
congratulations for this script, keep up with the great work!

Is it possible to change v3’s behavior when I detect a mouse movement?

I mean: I saw that the behaviour is driven by a andata attribute in the body tag. Can I change it at runtime an make InstantPage change its behaviour, maybe calling a method on InstantPage object?

Thank you very much,
Nice touch with V3.

Whitelist user-defined pathnames

Goal: Only allow prefetching links with certain (origin + pathname) defined by the user

Why: Adding the 'data-no-instant' attribute is hard to scale. Some endpoints can trigger actions without query params so its much easier just to define a static list of whitelisted pathnames.

Minyfied version of instant.page

let urlToPreload,mouseoverTimer,lastTouchTimestamp;const prefetcher=document.createElement("link"),isSupported=prefetcher.relList&&prefetcher.relList.supports&&prefetcher.relList.supports("prefetch"),allowQueryString="instantAllowQueryString"in document.body.dataset;if(isSupported){prefetcher.rel="prefetch",document.head.appendChild(prefetcher);const e={capture:!0,passive:!0};document.addEventListener("touchstart",touchstartListener,e),document.addEventListener("mouseover",mouseoverListener,e)}function touchstartListener(e){lastTouchTimestamp=performance.now();const t=e.target.closest("a");t&&isPreloadable(t)&&(t.addEventListener("touchcancel",touchendAndTouchcancelListener,{passive:!0}),t.addEventListener("touchend",touchendAndTouchcancelListener,{passive:!0}),urlToPreload=t.href,preload(t.href))}function touchendAndTouchcancelListener(){urlToPreload=void 0,stopPreloading()}function mouseoverListener(e){if(performance.now()-lastTouchTimestamp<1100)return;const t=e.target.closest("a");t&&isPreloadable(t)&&(t.addEventListener("mouseout",mouseoutListener,{passive:!0}),urlToPreload=t.href,mouseoverTimer=setTimeout(()=>{preload(t.href),mouseoverTimer=void 0},65))}function mouseoutListener(e){e.relatedTarget&&e.target.closest("a")==e.relatedTarget.closest("a")||(mouseoverTimer?(clearTimeout(mouseoverTimer),mouseoverTimer=void 0):(urlToPreload=void 0,stopPreloading()))}function isPreloadable(e){if(urlToPreload==e.href)return;const t=new URL(e.href);return!(t.origin!=location.origin||!(allowQueryString||!t.search||"instant"in e.dataset)||t.hash&&t.pathname+t.search==location.pathname+location.search||"noInstant"in e.dataset)||void 0}function preload(e){prefetcher.href=e}function stopPreloading(){prefetcher.removeAttribute("href")}

Prefetch (slightly) more conservatively?

I'm looking into instant.page vs. quicklink for inclusion in a (somewhat popular) WordPress plugin of mine. Based on feedback from users I'm leaning slightly more towards instant.page, but the following remark from https://css-tricks.com/instant-page/ might be worth considering;

Quicklink does two interesting things in which to attempt to be more responsible with prefetching: 1) wait for requestIdleCallback and 2) respects info from navigator.connection, like a user enabling data-saver mode

Now from what I understood quicklink prefetches a whole lot more then instant.page, but still these 2 changes (that amount to being somewhat conservative when prefetching) might be worth looking into?

Question: Difference from InstantClick

https://github.com/dieulot/instantclick

Considering you created both Instant.page and InstantClick, what are their differences?

Update Readme with more details

I am new here and I am in love with how amazing this is.
I noticed that even though the website is very informative in describing what this repo achieves, the readme is not able to do so,
I would love to modify the readme to make it such that a contributor like me who reaches to this repo will be able to understand it's working without having to open the website.

It is a minor issue which I would love to work on as my first issue here.

Disable links if data-method exists and is not GET

Rails is a popular framework and supports an optional "data-method" parameter, like this:

<a rel="nofollow" data-method="delete" href="/en/logout">

It would be very bad to automatically follow such links if data-method exists and is not GET.

Solution: Simply don't preload a links that have a data-method and provide a value other than GET (any case).

See also: dieulot/instantclick#170

Missing 'crossorigin' attribute in markup

Subresource integrity requires resources to enable CORS using the 'crossorigin' property. This resource doesn't.

By adding the tag crossorigin="anonymous" to the included code this can be resolved.

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

Element.createShadowRoot is deprecated and will be removed in M73, around March 2019. Please use Element.attachShadow instead. See https://www.chromestatus.com/features/4507242028072960 for more details.

Please Update it! Thank You!

Custom header

Hello,

Is it possible to attach extra headers to the request?
I have written my own sort of analytics where al these hover will be seen as a page visit now.

NPM Package

Great work! Would it be possible to publish this as an npm package?

Edit: there seems to be an npm package, can you confirm you are its owner?

Make it possible to enable for specific links

On a site I manage many of the links have "?" - and some should be preloaded, while others must not. Adding data-instant-allow-query-string is difficult; then I have to look at every link that might be on the page in any possible circumstance.

It'd be far better to have a simple way to say "please enable instant.page for THIS link". E.g., support a new class "preload-on-hover" on "a". If that class is present, then preload on hover. Then I can add it to just the important links that I know are safe, and slowly add them over time.

Thanks!

Real Whitelist: allow deactivate plugin for every href

I would like to deactivate for every href and only activate for those with the data-instant attribute.

Does it make sense?

List changes in Releases or in markdown file.

There's no way of knowing what changed between versions unless you go hunting for the changelog on https://instant.page.

I would personally choose to list changes in Releases.

What’s wrong about Instant.page?

How accurate is this?:

Usually, a user takes around 300ms from hover to click. So if the server didn’t respond within 300ms, then most likely you won’t notice any difference. Achieving <300ms TTFB is pretty hard. Most of the hosting providers have this around 400ms and even 1s to halfway around the globe.

From:
https://wpspeedmatters.com/quicklink-vs-instant-page-vs-flying-pages/

Supported browser

Pleaae consider including this link in the docs
https://caniuse.com/#feat=es6-module
Thanks!

Scripts loads http not https

Visit https://www.jawaireland.ie/, hover over the header menu links. Insecure content blocked icon appears in search bar

Disclaim that your pages need to be cacheable

This tool is a cache-warmer. It might be worth disclaiming somewhere that if you don't have cacheable pages, you're not really doing anything but wasting bandwidth.

Debouncing

Sweeping the mouse cursor across the page may potentially prefetch loads and loads of links, clogging up the server load. I think it will be beneficial if hovering links was debounced. So we first need to know how much time it takes, on average, for a user to hover into a link, and out again. Then debounce it at that sort of rate.

I get the feeling that hover->click takes a LOT more time than mouseover->mouseout, so debouncing hovers might not impact the just-in-time prefetching by all that much in practise.

Support mobile phone use?

Applicable to pc, can the phone be?

instant.page works only on main page (self hosted)

Hi,

I have instant.page self hosted, the latest version 2.0.0.1 on a WordPress site. It only works on the main page, on other pages I get a 404.

Placed the code exactly before the /body> in the footer.

Main page:

Sub page:

Pages being loaded a second time after click

When I hover over a link, I can see it preloading the next page. However, after I click, the browser is loading the page again. Tested this in Chrome 71 and Firefox 65 with the same result.

Here's the network tab in Chrome, with "Preserve Log" enabled. The first row is from when I hovered (I was on one of the other pages of the site, and was headed back to the home page). The second row is what happened after I clicked.

So it seems that the page is preloading okay, but then the browser isn't actually utilizing it -- instead it's just loading again from scratch. ?

PHP 7.3.8 warnings

Hi there,

I get these warnings with a site that has the WordPress plugins, on sites where I self hosted it I don't get any warnings.

PHP Warning:  Use of undefined constant instantpage_wp_enqueue_scripts - assumed 'instantpage_wp_enqueue_scripts' (this will throw an Error in a future version of PHP) in /home/nginx/domains/XXX.com.br/public/wp-content/plugins/instant-page/instantpage.php on line 11
Warning: Use of undefined constant instantpage_wp_enqueue_scripts - assumed 'instantpage_wp_enqueue_scripts' (this will throw an Error in a future version of PHP) in /home/nginx/domains/XXX.com.br/public/wp-content/plugins/instant-page/instantpage.php on line 11 PHP Warning:  Use of undefined constant instantpage_script_loader_tag - assumed 'instantpage_script_loader_tag' (this will throw an Error in a future version of PHP) in /home/nginx/domains/XXX.com.br/public/wp-content/plugins/instant-page/instantpage.php on line 12
Warning: Use of undefined constant instantpage_script_loader_tag - assumed 'instantpage_script_loader_tag' (this will throw an Error in a future version of PHP) in /home/nginx/domains/XXX.com.br/public/wp-content/plugins/instant-page/instantpage.php on line 12

Ensure <a> tag has a href element

https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element

I'm using this on a page that has auto-generated tag's without a href attribute and am getting uncaught TypeError: Failed to construct 'URL': Invalid URL

Minify...

This is an awesome project, but every one I've used it on and then had a co-worker run PageSpeed Insights had deducted points and thrown warnings about this not being minified...

Any chance of hosting / providing a minified version?

allow subdomains

It would be great if you could allow also subdomains or parent domain, or at least whitelist domains. current location.origin check is true only for same scheme, domain and port.

W3C Validation. Integrity or Module

If I try to validate my page on W3c it says: "A script element with an integrity attribute must not have a type attribute with the value module."

Link to external pages

Hi!

Thanks for your project! ⚡

I am currently using it to quickly render my bookmarks.

But I faced some issue: why do you forbid the redirection to external websites?

 if (urlObject.origin != location.origin) {
    return
  }

Do you think it would be worth adding a website whitelist here? I can submit a PR.

Congratulations for this repo!

Prevent anchor links

Hello.

Is there a way to prevent hovering anchor links being fetched? Something like:

document.addEventListener("instantpage:mouseover", (event) => {
  const anchorElement = event.target
  const isSamePageAnchor = (
    anchorElement.hash &&
    anchorElement.origin === window.location.origin &&
    anchorElement.pathname === window.location.pathname
  )

  if (isSamePageAnchor) return

  // do what instant page was doing
})

Does instantpage:mouseover event exist?

I could add data-no-instant to anchor links but I would like to keep the HTML clean.

Thanks and sorry if it‘s being asked already that I could not find it.

Using with Turbolinks

I search in these issues for "turbolinks" work and nothing appears.

I wanna using instant.page with Turbolinks (https://github.com/turbolinks/turbolinks).

If I add:

<script src="//instant.page/2.0.0" type="module" defer integrity="sha384-D7B5eODAUd397+f4zNFAVlnDNDtO1ppV8rPnfygILQXhqu3cUndgHvlcJR2Bhig8"></script>

it works just on the first page I load.

What do you suggests to use with Turbolinks?

I can imagine to use some of the event in https://github.com/turbolinks/turbolinks#full-list-of-events, right?

t.target.closest is not a function

https://github.com/instantpage/instant.page/blob/v1.2.1/instantpage.js#L52

Most of them are from Chrome 59+ / Edge 17.17134
Which should support Element.closest

I do plan to add polyfill for Element.closest
but I don't think it's related to most browsers that raises this error for us

Data Instant Intensity

I read this on your website but seems unclear ->

Then add data-instant-intensity="mousedown" as an attribute to the .

How to add that exactly?

<script src="//instant.page/2.0.0" type="module" defer integrity="sha384-D7B5eODAUd397+f4zNFAVlnDNDtO1ppV8rPnfygILQXhqu3cUndgHvlcJR2Bhig8"></script> <script data-instant-intensity="mousedown"></script>

Like that?

Also, is there a way to make everything instant when page start display? Not when hover or mousedown?

instantclick v.s. instant.page ?

C'est quoi la différence? Je suis confus.

A few questions

I love the idea of this and so far it's off to a good start.

I'm working with Shifter (getshifter.io) which is a static site generator for WordPress and hosting provider. I want to see if there are ways to make the static sites we're creating faster or at least improve the interactivity.

My questions are:

1. Does this library factor in the type of content it's fetching?

It's possible the type or fetch as is not being used. Maybe it is and I'm not seeing it. I'm not sure if the type would be as=document or as=fetch.

Refs:

• https://twitter.com/DasSurma/status/808791438171537408
• https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

• If you don’t supply a valid “as” when specifying what to preload, for example, scripts, you will end up fetching twice.

• https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

2. Are you planning on introducing an API for this library?

With an API you can add a few simple options such as the time to prefetch, whether you need to hover at all and instead use the viewport as a trigger, etc.

Refs:

• https://github.com/nozzle/react-static/blob/daf2d6bd17c3365d22beee086d0fb79e7431ec91/docs/api.md#useprefetch

3. Avoid repeat fetching

Maybe this is relate to the first question. On repeat hover, the library will refetch the page. Can this be avoided? Adding the fetch as text/html is a possible fix or some JS to skip it.

Maybe the Quicklink project already does a lot of this but I love how simple the script you've created is.

Add a setting for the mouseover timer

I noticed the mouseover timer is currently hardcoded to 65 ms. Would it be possible to add a setting to change it?

I'd like to lower it on a static website to squeeze the most possible performance, considering HTTP requests are cheap in comparison to a dynamic website 🙂

Expiring preloaded content

Thanks for this great library! I was wondering about a certain edge case:

Let's say a visitor lets their mouse sit on a link for a while. The content is preloaded right away (on hover). By the time they actually click, it might already be slightly stale. Is there anything that will cause the content to be preloaded again after some time, or a regular load of fresh content to happen after all? Would I have any influence over that (e.g. set the expiry time)?

Doesn’t work with Rocket Loader

When I have a Rocket Loader (Cloudflare) on the domain, the script doesn’t work.

t.target.closest is not a function

As opened (but closed) here already #23 I also get this issue.

In 2.0.1 (using the .min version, it's o.target.closest) and also in 3.0.0

I am not exactly sure why/how, but I can provide a user agent that encountered this error:
Mozilla/5.0 (iPhone, CPU iPhone OS 13_1_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Mobile/15E148 Safari/604.1

The issue happened on a page which contained a facebook fbclid, but I don't think that is causing the issue (but who knows)

Is this info any useful for debugging/fixing this?

Not working in links with query strings

For example, if the link is: "/something?id=1"

Trigger preloads only on whitelisted links

Can we restrict instant.page to a whitelist of links it triggers preloads on?

1. Maybe allowing passing a selector for the white listed links
2. Not restricting the use data-instant to links with query string

Optimize memory if !isSupported

Hi, cool lib! I think you can save a bit of js memory around if (isSupported) {
https://github.com/instantpage/instant.page/blob/master/instantpage.js#L11

You don't need to define any functions at all in this case, since they are never referenced. Maybe just an early exit from the module would be better? eg. if (!isSupported) return

Add defer attribute to default snippet so it loads last

I noticed that 'instant.page' was loading on https://instant.page/ with High Priority, which meant that it was loading before other scripts on the page. I added instant.page to my own site and saw it was loading with 'Medium Priority' (even though it was at the very bottom of the page) which meant that it was loading before some images on the page. I think it'd be good if instant.page always loaded last.

I added 'defer' attribute to the snippet on my site so it always loads last and was thinking you could recommend the same?

IE script error

You should replace "() => " with "function()" in setTimeout because it will throw error in IE and block all other scripts to run