instantpage / instant.page Goto Github PK
View Code? Open in Web Editor NEWMake your site’s pages instant in 1 minute and improve your conversion rate by 1%
Home Page: https://instant.page
License: MIT License
Make your site’s pages instant in 1 minute and improve your conversion rate by 1%
Home Page: https://instant.page
License: MIT License
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?
You should replace "() => " with "function()" in setTimeout because it will throw error in IE and block all other scripts to run
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?
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?
Applicable to pc, can the phone be?
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.
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.
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!
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")}
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.
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/
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."
I know you're aware of this, but can we have an issue to track the problem?
I see: type='module'
and that is not supported by ie11.
Does this support ie11?
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.
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?
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
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.
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?
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 🙂
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?
I would like to deactivate for every href and only activate for those with the data-instant
attribute.
Does it make sense?
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.
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
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
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
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!
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
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.
Can we restrict instant.page to a whitelist of links it triggers preloads on?
data-instant
to links with query stringI 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:
If you don’t supply a valid “as” when specifying what to preload, for example, scripts, you will end up fetching twice.
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:
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.
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?
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?
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
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.
Visit https://www.jawaireland.ie/, hover over the header menu links. Insecure content blocked icon appears in search bar
Please Update it! Thank You!
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.
https://github.com/dieulot/instantclick
Considering you created both Instant.page and InstantClick, what are their differences?
C'est quoi la différence? Je suis confus.
For example, if the link is: "/something?id=1"
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
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.
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. ?
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)?
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.
Pleaae consider including this link in the docs
https://caniuse.com/#feat=es6-module
Thanks!
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.