
Show HN: Make your site’s pages faster than instant in one minute - dieulot
https://instant.page/v5
======
hbcondo714
This was on Show HN last year, big discussion:

[https://news.ycombinator.com/item?id=19122727](https://news.ycombinator.com/item?id=19122727)

------
kurtextrem
This is a clever trick (using mousedown to trigger a click), but breaks drag &
dropping links, drag & dropping links to new tabs. and there is also a thing I
tend to do: If I notice I pressed the mouse button down on the wrong link, I
move the cursor away from that link and let the button go up on the correct or
in free space, so the browser doesn't navigate (not sure how common this
behaviour is, though)

~~~
dieulot
Didn’t think of drag and dropping links to new tabs! Yeah, that’s a bit of a
sad regression.

The two other use cases you mention aren’t common at all though.

~~~
thefreeman
It's extremely common. It is unclear to me if the mousedown event just kicks
off preloading of the page, or actually forces you to navigate to the page. If
it's the latter, you are breaking decades of mouse ux changing a click from a
mousedown followed by mouseup.

~~~
mcintyre1994
It's the latter - it's in use on all links on their sidebar.

~~~
jtbayly
Dragging sidebar links worked fine for me all but once in Safari. Not sure how
to tell whether it's actually being used, but I don't notice any problems.

[Edit: I was using a blocker that was blocking it. Now I've used it and can
tell it's working, and I still don't notice any problems using it in Safari.]

~~~
mcintyre1994
It doesn’t work in Safari.
[https://instant.page/tech](https://instant.page/tech)

> Safari 13.0 has support for <link rel="prefetch"> but it’s disabled by
> default. Hopefully it will be enabled in September 2020 in Safari 14.0.

Try enabling that setting or using another browser (I used Firefox) to see the
effect it has.

------
noisem4ker
>it triggers the page load when the user starts pressing their mouse

This breaks the standard GUI interaction model. Buttons are typically
triggered on mouse-up events, not mouse-down, and there's probably good
reasons for that.

Any client-side hacks that attempt to improve the perceived page speed are
somehow bound to break something. If there really is a simple way, it's
already been implemented at the browser level, for all websites. Link
prefetching is already a thing. Do you want fast pages? Make your server-side
rendering fast.

~~~
CraftThatBlock
This is incorrect. It starts loading on mouse down, but still acts on mouse
up.

~~~
tjeannin
Not the case on the [https://instant.page](https://instant.page) website. If
you mouse down links, the page changes.

------
chrismorgan
I contemplated using the instant.page techniques a while back, and took
version 1.2.2 and stripped it to its bones, removing configurability that I’m
never going to use, and golfed it down to 981 bytes/532 gzipped (873/456 sans
license comment).

No _way_ would I go past 1.2.2, though, because all it does is introduce more
configurability that I don’t want, complications, bugs and misfeatures. (I
call triggering load on mouse down _catastrophically_ wrong, 100% dealbreaker
with prejudice.)

Here’s the ECMAScript Module (I call it a module so I can skip an IIFE without
polluting globals) that I ended up with, in case anyone’s interested. It uses
uncommon tricks like reusing variables for different purposes to save a couple
of bytes, which will tend to make JITs unhappy, but the JIT would turn up its
nose at this lightly-called functionality anyway.

    
    
      /*! instant.page v1.2.2, (C) 2019 Alexandre Dieulot, https://instant.page/license, shrunk by Chris Morgan */var e,t,a,r=document,n=r.createElement("link"),s=n.relList,o=()=>{e=n.removeAttribute("href")},i=e=>{e.relatedTarget&&e.target.closest("a")==e.relatedTarget.closest("a")||(t?(clearTimeout(t),t=0):o())},c=t=>!(!t||!t.href)&&(e!=(t=t.href)&&((t=new URL(t)).origin==location.origin&&(!t.hash||t.pathname+t.search!=location.pathname+location.search)));!(s&&s.supports&&s.supports(n.rel="prefetch"))||(s=navigator.connection)&&s.saveData||(r.head.appendChild(n),r.addEventListener("touchstart",t=>{a=performance.now(),c(s=t.target.closest("a"))&&(s.addEventListener("touchcancel",o,{passive:!0}),s.addEventListener("touchend",o,{passive:!0}),n.href=e=s.href)},s={capture:!0,passive:!0}),r.addEventListener("mouseover",r=>{performance.now()-a<1100||c(s=r.target.closest("a"))&&(s.addEventListener("mouseout",i,{passive:!0}),e=s.href,t=setTimeout(()=>{n.href=s.href,t=0},65))},s))
    

I have the golfed-but-not-uglified code too, but I won’t share it here at this
time. It’s more fun this way.

(No warranty whatsoever, don’t think I’ve even run the code.)

------
thefreeman
There are some big brand names listed in the "Trusted By" section, but it's
unclear to me where they use instant.page. I clicked a few of the links and
was unable to find an instant.page script tag anywhere.

~~~
dieulot
It’s a bit out of date. Adidas UAE long removed it. Spotify seems to use it
periodically.

More recent additions to the fleet include:
[https://www.bmwusa.com/](https://www.bmwusa.com/) [https://css-
tricks.com/](https://css-tricks.com/)
[https://www.juul.com/](https://www.juul.com/)

------
tryptophan
Don't browsers do this themselves? Preload links on a page you visit? I think
firefox calls it pre-fetching.

~~~
toolz
I don't believe so, no. Imagine how much potential wasted bandwidth that would
be for someone on cell data

~~~
Arkanosis
Fasterfox (the now disappeared addon, not the currently available theme of the
same name) did that. And yes, it wasted bandwidth (for site owners as well).

------
LukeShu
With Firefox 76.0.1, when I click a link, then click "back", the page thinks
I'm still holding down on the thing I clicked, and have it in a drag&drop
state. Then I have to click somewhere else to release it.

------
wrs
Great, now sites can implement _clicking_ in some confusing, subtly broken
way? File this with sites that implement their own broken inertial scrolling,
their own broken scrollbars, and their own broken pop-up menus.

------
arkitaip
I've experimented with instant.page and other similar scripts and it's almost
shocking how fast page loading becomes when you are used to a (slight) page
loading delay. There are a couple of drawbacks that one has to be aware of -
bandwidth, altered ui behavior - but for some use cases where performance is
needed and the bandwidth usage is minor, preloading scripts can be very
useful.

------
yinyang_in
This would be odd behaviour of any website for me personally, in some areas
data is still precious and limited. Also I'm wired to think that only clicking
website would open resources for that website, sometimes I just hover the link
to check where that link leads to.

Hope it doesn't come to email, for me I don't load remote content but not sure
how to play in tracking over there.

------
mkhalil
I think that adding a link tag with the prefetch attrib on hover is fine, but
the page navigation on "mousedown" feature (even so it has to be enabled) is
the opposite of what kind o

------
seabass
>InstantClick provides the smoothest experience possible, while still not
requiring as much work as a framework (who give lesser results)

It's not the job of a framework to make such optimizations. But within any
framework, you could trivially implement something similar. You could be quite
aggressive and fetch + cache on hover.

------
lhorie
What's old is new again. I remember using this technique a good 10 years ago
to speed up perceived page load on an intranet.

IIRC back in the day, google used a similar trick, where it would preload the
first few search results to make them load from cache in the 90% of the cases
when a user clicked on them

------
derivativethrow
Note: The author monetizes this by selling web traffic from the Chrome
extension.

~~~
dieulot
Untrue. It just loads instant.page.

------
gitgud
If the hover request is waiting on a 5mb page (god forbid) and it doesn't
complete before the navigation starts, then will the browser use any of the
pre-fetched data? Or will it have been wasted?

------
sibeliuss
Important to mention that this technique shouldn't be applied to web
frameworks that already optimize in this way, for example Next.js and Gatsby.

------
cyberowl
I solve this problem by disabling JS by default on my browser. Only enable it
if absolutely necessary

------
sturza
OP check this out:
[https://github.com/johnsundell/publish](https://github.com/johnsundell/publish)

------
pouta
Does this play well with Turbolinks?

