10 ms·
Show HN: JS library to make your website instant
http://instantclick.io/
It seems the internet architecture won't bring us instant websites anytime soon. So here is a hack.
I released this JS library last month (today is version 2.0 release, fixing v1.0's rough edges), it makes use of HTML5's pushState and preloading to make a website instant.
It works like this: before clicking on a link, you'll hover over it. And there's a delay of 200-300 ms between these two events. InstantClick uses this delay to preload a page, when you click on a link it will display instantly in most case. (You can test on the website.)
That's similar to pjax and Turbolinks, for it uses HTML5's pushState and Ajax. And preloading is thrown into the mix.
In case preloading all the links that a user hover over is too much work for the server, there's also an option to set a delay before preloading kicks in, or to preload on "mousedown". Mousedown is when you press your mouse button (a click is when you release it). This way you still get a slight "magical" speed advantage, and pjax's benefits (notably, no recalculation of scripts/styles on every page change).
For mobile it preloads on touchstart, so you get 400 ms to preload. This is different from FastClick: with InstantClick a user can still double tap to zoom without triggering a link.
As said in the first sentence, the internet architecture can't bring us instant websites today or tomorrow. So I think this — InstantClick — could be a pretty big thing to improve the situation at scale.
The main challenge I see is that existing JS scripts may not work with it out of the box. I don't do much web development nowadays though, so I don't know how big of a problem that is, and I don't know if there isn't any other major barrier in the way to make this mainstream.
That's why I'm awaiting your opinion, smart folks of HN.
- toddwahnish 13y agoThis is fantastic - will definitely use this!
- snitko 13y agoWhile interesting, I think this kind of functionality should be implemented only by browser developers and should be turned off by default. Really, I can wait 1 second until the site loads. What I don't want is some library accessing sites without my permission. I usually place mouse over links to see what URL it points to and I sometimes do not wish to click.
- dieulot 13y agoIt works only with links from the website you’re on. When the domain or protocol is different InstantClick don’t (and can’t) preload it.
- grandalf 13y agoIt's no different than a single page app eagerly fetching data...
- nawitus 13y ago>What I don't want is some library accessing sites without my permission. Well, in a way all sites already do that by embedding resources from different urls.
- callesgg 13y agoRealy Cool, Only real problem with this is if the clicking has side effects like: http://example.com/?action=logout http://example.com/?action=logout as brought up on page. And probably a ton of other application bugs as style and script stuff wont load. like they normally would
- dieulot 13y agoYou can blacklist these links (or whitelist all the other links).
- mrfusion 13y agoWould it be worth blacklisting logout by default? Maybe blacklist any links with the words logout, delete, etc anywhere inside the a tag or in the attributes?
- dieulot 13y agoNo, my philosophy is to not do anything that could get into one’s way. And that’s a false sense of security. If one is worried about preloading links that triggers an action, there is a whitelist mode to enable links as you review them.
- fudged71 13y agoCould this be used on every website if it were a browser extension? If it were, I would expect Logout links to be disabled by default.
- dylz 13y agoModifying session state should be a POST, not a GET.
- callesgg 13y agoIt is more than often not. Google mail is one example. But i do concur.
- wesley 13y agoI wish there was an instantclick link to this website.. OK, here it is: http://instantclick.io http://instantclick.io
- mrfusion 13y agoLove it! Will it only work on html5 sites?
- lifeformed 13y agoIs there a demo page? I want to see what it feels like.
- dieulot 13y agoThe website it is.
- yogo 13y agoGood stuff, but I don't think this website is big enough to demo the benefits, maybe a heavier website is needed. A properly configured web server as well as the right HTTP headers will give you the same speed, perceptually. Also you might want add some kind of tracking to avoid making repeat requests (probably within a timeframe). For e.g. hovering one link, then changing your mind, then going to another link. The browser will smartly pull it from its cache but this lib is still making the requests.
- mooreds 13y agoI just added it to my database driven website that is run off shared hosting: http://coloradocsas.info/ http://coloradocsas.info/ It doesn't feel that much faster, but I'd love a way to verify speed changes with data.
- VeejayRampay 13y agoAnother idea: take into account the movement of the mouse to define a directional cone in the general direction of the movement, which would enable you to preload your pages even before the hover state occurs.
- dieulot 13y agoKinda overkill. ;) I may explore this idea later, but I don’t have great hope for it.
- ivanca 13y agoMost times there are some few links that are very frequently clicked on; for example in Hacker News is usually the "next page" and the "threads". So if there is not one already there should be a way to specify some (obligatory?) preload pages.
- dieulot 13y agoIn my opinion even that is overkill. Remember, in most cases it’s already instant. The return on investment (speed/requests) abruptly declines with brute preloading.
- CoryG89 13y agoI think you should utilize the prefetch behavior of the link tag for situations such as these. No need for JavaScript at all.
- udfalkso 13y agoVery nice. It would be great if the JQuery Mobile folks would integrate this.
- deleted 13y ago[deleted]
- grobmeier 13y agoGood idea. Pre-Loading a page when you hover a link with your finger.
- CoryG89 13y agoAfter looking at the source, one thought I have is that since you are dealing with such small timescales you should use the high resolution window.performance.now function (or the Date.now function for higher compatibility) as a timer instead of using the Date object as you do.
- dieulot 13y agoThanks, I’ll look into it.
- napolux 13y agoWonder what happens for website with zillion of visitors per day. Could all this preload impact on servers?
- dieulot 13y agoYes. I wonder too what the additionnal load is, I don’t have numbers for now.
- aphexairlines 13y agoPredictive prefetching (similar to the work here, but more aggressive) did impact the servers on a zillion-visitors mobile commerce site at first, but it's fine now. Tuning helps. More than scaling, the larger headaches come from migrating all your existing logging to account for preloading versus impression hits.
- dclara 13y agoOh, good point. CPC is based on the user clicks, i.e., fetching.
- w1ntermute 13y agoDoesn't Chrome already do something like this?
- dieulot 13y agoYou may be talking about this: https://developers.google.com/chrome/whitepapers/prerender https://developers.google.com/chrome/whitepapers/prerender Or this: https://developer.mozilla.org/en-US/docs/Link_prefetching_FAQ https://developer.mozilla.org/en-US/docs/Link_prefetching_FA... The main differences are that InstantClick preloads just before you need a page, so you can be more liberal in what you preload. Also pages are more recent, useful if you’re serving dynamic content.
- lmartel 13y agoThis is very cool! One interesting reaction I had: things loaded so fast that I didn't notice one of the page changes and thought it was stuck. For sites like this one where different pages look very similar, maybe it could be worth experimenting with some sort of brief flashing animation (to make it look like a real page load)?
- dieulot 13y agoYes, I was thinking about something in the like of NProgress: http://ricostacruz.com/nprogress/ http://ricostacruz.com/nprogress/ If the page is displayed instantly, show a complete bar that disappears. (I’m not sure if that would solve the problem, I may explore different solutions.)
- oneeyedpigeon 13y agoWouldn't this ruin usage stats?
- sunir 13y agoCareful. Usage trumps usage stats. If the user experience is better, the stats will adapt.
- corin_ 13y agoIt doesn't trump the ability to record stats. When it comes to business there are certain things you can't do without, for most sites (that are big enough to matter) stats are absolutely required, no improvement on usage would be worth losing stats for. (Not talking about this project in specific as it seems stats can be made to work with it, just replying to the idea in your comment.)
- dieulot 13y agoServer-side, yes. Client-side (Google Analytics, etc.), it may need adaptation. See the section “Dealing with scripts” at the bottom of http://instantclick.io/start.html http://instantclick.io/start.html
- philsnow 13y agoI haven't read the source for the linked library yet, but could you just have javascript in your pages that hits a /gen204 page on your site when the DOM is ready ? Then the preloaded page will only hit the /gen204 if it's actually rendered. Then just count the 204s instead of 200s.
- AshleysBrain 13y agoIsn't this what link rel="prerender" does? https://developers.google.com/chrome/whitepapers/prerender https://developers.google.com/chrome/whitepapers/prerender
- dieulot 13y agoNope, see my comment below: https://news.ycombinator.com/item?id=7201537 https://news.ycombinator.com/item?id=7201537
- kjannis 13y agoDoes this require server components? Or does it also work with a static site?
- dieulot 13y agoIt just requires the 1.6kb JS file. :) So yes, it works on static websites (instantclick.io is hosted on GitHub Pages).
- deleted 13y ago[deleted]
- soundoflight 13y agoPrefetching really shouldn't be blindly applied to everything as users may have bandwidth limited. Even though your implementation is better than browser prefetch on users it does take the choice away from the user unless individual sites make it easy for users to opt out.
- dieulot 13y agoI think that if you stop hovering fast enough and the request is cancelled, you’ll end up only sending headers, thus not affecting bandwidth that much. Not sure though. If not the case, note that it’s just HTML we’re wasting. In the grand scheme of things it seems to me it would not have that much of an impact on bandwidth usage.
- dclara 13y agoI think it may impact on the bandwidth usage on mobile significantly.
- samhoggnz 13y agoOn mobile you don't have a hover state so surely this would be less of an issue.
- deleted 13y ago[deleted]
- soundoflight 13y agoMobile as in PC over cell network you do.
- matysanchez 13y agoAny demo? I mean, a implementation in a real web, like a blog or something like that?
- dieulot 13y agoUnfortunately none that I know of.
- augustohp 13y agoExtra kudos for not using jQuery!
- aehv 13y agoIs it possible to make it a Chrome extension and use it on all sites?
- dieulot 13y agoI think it is possible for a subset of websites (because you can’t preload all links by default, some trigger an action such as a logout), that’s an idea I had in mind.
- aehv 13y agoI pasted the js code into a userscript. Works great! I hope I won't have too many accidents with it. I remember using 10 years ago a similar Windows program that preloaded all links.
- deleted 13y ago[deleted]
- neilstuartcraig 13y agoIsn't this more or less prefetch, as implemented by a number of browsers eg chrome? https://developers.google.com/chrome/whitepapers/prerender https://developers.google.com/chrome/whitepapers/prerender
- mbesto 13y agoIn theory you could write a chrome extension and use it for any site, right?
- dieulot 13y agoSort of, see my comment below: https://news.ycombinator.com/item?id=7201725 https://news.ycombinator.com/item?id=7201725
- aabalkan 13y agoIs there a demo?
- dieulot 13y agoThe website it is.
- pokstad 13y agoI have an even better hack. Since most blog posts / articles are nothing more than a bunch of text, I simply download all articles in a single fetch when the initial page loads. I do this using a CouchDB view that returns all blog posts in chronological order. All successive link clicks don't hit my server (unless there's an image in the article that needs to be loaded). Check it out: http://pokstad.com http://pokstad.com
- sjwalter 13y agoFYI http://pokstad.com/db/75253f5cc6fda4538c5f9116407d0b4c/index.html http://pokstad.com/db/75253f5cc6fda4538c5f9116407d0b4c/index... is broken. [Object object]
- pokstad 13y agoIt's still under active development ;)
- ngokevin 13y agoWhat will you do once you get more than a handful of articles?
- pokstad 13y agoMy thinking is that it takes a LOT of text to equal one good size pic. When using CouchDB as a backend, you want to optimize your queries so that you retrieve as much as possible in the fewest number of requests. With my current list of articles, I have this much data being requested in a single request to my map-reduce view: http://pokstad.com/db/_design/blog/_view/posts_chrono?include_docs=true http://pokstad.com/db/_design/blog/_view/posts_chrono?includ... That's about 33KB for 9 blog posts (not including attachments). So about 4KB per post. I could have a hundred articles and it would still be under half a MB. To put things into perspective, the cover photo of my pup is about 818KB. There are also numerous resource files, like JS, HTML, CSS that needs to be downloaded before the site will even be ready.
- 13y ago
- lintiwen 13y agoI have problem understand "instant website", can you provide some specific definitions? thank you
- dmazin 13y agoBy the way, if you don't want to listen to mouseover, merely listening to mousedown takes 50-70ms off loads [1]. Not ignorable. [1] https://github.com/rails/turbolinks/pull/253#issuecomment-21247888 https://github.com/rails/turbolinks/pull/253#issuecomment-21...
- dieulot 13y agoYou’re right. And InstantClick does that too. ;)
- wiradikusuma 13y agoDoes it work with SPA, particularly using AngularJS? (Essentially what's needed is the "prefetch on hover")
- deleted 13y ago[deleted]
- primitivesuave 13y agoOne way I see to move this forward in websites at scale is to run a test where you find out the percentage of hovers that result in a click. Suppose its 90% - that means that 10% of those hovers result in fruitless busy-work for your server. Multiply bandwidth + server cost by 10%, and compare that amount to the amount you'd be willing to pay for near-instant load times. For many companies (Facebook, Twitter, etc) the desire for instant user gratification is paramount, so the push toward instant browsing experience is a very real possibility. One problem is that most people wouldn't really notice, because these websites load pretty quickly as it is. One interesting direction is if there was some kind of AI in the background that knows what pages you're likely to visit and preloads them - Facebook stalking victims would become an instantclick away.
- dieulot 13y agoYep, I’d like to get statistics on the additionnal load. For answering your second paragraph, note that even small gains in speed have a direct effect on user engagement. Google and Amazon have noticed so: http://www.uiandus.com/blog/2009/2/4/amazon-milliseconds-means-money.html http://www.uiandus.com/blog/2009/2/4/amazon-milliseconds-mea...
- thasmin 13y agoHave you considered preloading all of the links while the person is reading the page?
- dieulot 13y agoFor sure. But you get way less bang for your buck that way.
- loteck 13y agoAm I correct in assuming that touch interfaces can't benefit from this kind of architecture?
- wololo_ 13y agoDoes it support /#!/ (hashbangs) or just pushState ?
- dieulot 13y agoJust pushState.
- math0ne 13y agoumm like 40% of traffic is already touch, seems too late
- dieulot 13y agoPreloading on touchstart is planned. Also note that percentages like that don’t tell the whole picture; non-touch traffic hasn’t decreased by “like 40%”.
- maxucho 13y agoAwesome work! I just installed this in my own new experimental (read: very low traffic) web app: http://www.penngems.com/ http://www.penngems.com/ I set the preload to occur on mousedown rather than mousover, as per the docs, but even with this I noticed near-instantaneous page loading.
- dieulot 13y agoThanks for the feedback.
- thenomad 13y agoJust testing that site (thanks to maxucho for providing the example :) ). Interestingly, even if I hold my mouse button down for a second or two before releasing it, there's still a perceptible loading time of maybe 500ms - 1s. Not sure if that's expected as part of the design?
- dieulot 13y agoDefinitely not. May you tell me how old is your computer, and which browser/OS combination you use please? Either here or on GitHub: https://github.com/dieulot/instantclick/issues https://github.com/dieulot/instantclick/issues Also please test how it goes when you press for like 5 seconds.
- maxucho 13y agoHmm that could be just an issue on my site, not necessarily with the plugin. I've been experiencing some strange load times with it even before using InstantClick.
- ishener 13y agoi still don't understand why in 2014 it's not possible to have an entire website with all it's files zipped and shipped as it is on the first request. how wasteful is it to have 50 requests for a server just for images and resources? have your root domain be a zip file of everything you need to view it, and then include some additional popular pages along with it. it can't get any faster than that
- sp332 13y agoWell, why not? You can inline everything (including images with data:// URIs) and zip it up. Apache can serve the static zip file to browsers that support it http://stackoverflow.com/questions/75482/how-can-i-pre-compress-files-with-mod-deflate-in-apache-2-x http://stackoverflow.com/questions/75482/how-can-i-pre-compr...
- crimsonalucard 13y agoCached resources can actually make it faster then the packaged model you described. For example I go to site A which uses jquery from the google cdn then I switch to site B which uses the same cdn. The browser doesn't even make a request for the jquery resource then, it just loads the cache. If the full site was loaded as a zip file we'd be downloading redundant jquery data twice.
- pornel 13y agoIt's coming. That's what HTTP/2 PUSH is for.
- userbinator 13y ago> how wasteful is it to have 50 requests for a server just for images and resources? On the other hand, how wasteful is it to download tons of content that would be useless because the user might've navigated away from your site already?
- deleted 13y ago[deleted]
- insertnickname 13y ago>Click − Hover = ∞ >Click − Mousedown = 2 ms >Click − Touchstart = ∞ I win!
- resu 13y agoThis is really cool! I'll try it out. Thanks for sharing :)
- adwf 13y agoReally awesome. I was working on something like this myself, but using Jquery ajax combined with history.pushState for partial page loads. This is much better! There are a couple things that I had on my TODO list that could be handy though: 1) Caching - if you hover back and forth over two links, it will keep loading them every time. Dunno whether this can be alleviated or not. 2) Greater customisability. It'd be great if I could customise whether it was a hover or mousedown preload, on a per link basis. Some links benefit from hover, others it might be overkill. 3) Lastly, it would be cool if it could link up with custom actions other than just links. For example, jquery ajax loading a fragment of html to update a page. This is probably lower down on my priority list though, as the full page prefetch works remarkably fast. Keep up the great work!
- dieulot 13y agoThanks. Caching can be done server-side, this is not something I plan to implement. The last two seems like things that wouldn’t be needed very often, so they probably won’t make the cut either.
- adwf 13y agoYeah, I didn't know whether it was worth it on the caching, I'd already turned on a 5 second cache-control just to eliminate this kind of quick back-and-forth mouseover on a list ;)
- ruricolist 13y agoThe tricky thing with all of these (pjax &c.) is that by loading with JavaScript, you lose progressive rendering, so while reducing latency you may actually lose perceived speed.
- dieulot 13y agoCorrect, this can actually be detrimental for low-bandwidth users, or if the website have enormous pages.
- auvrw 13y ago> before clicking on a link, you'll hover over it. unless you use vimperator or similar. the demo handles this though, giving a hover time of infinity.
- robgibbons 13y agoI would be hesitant to rely on mouse input, or even touch input. Think about things like screen readers and accessibility and you'll quickly learn there are many ways people browse the internet.
- dieulot 13y agoIt should degrade. No mouse/touch: just pjax, without preloading. No JavaScript or no pushState: standard hypertext behavior.
- sagargv 13y agoAwesome ! I can't believe I hadn't thought of this before.
- p4bl0 13y agoI'm not sure it's working for me, I don't see any special network activities in Firebug while using the website. Also, you should take into account the focus event of links, I tried and it seems you doesn't when trying on the "click test" page to tab tab tab on the test link and then hitting enter.
- davidslv 13y agoI couldn't manage to see anything special.
- westiseast 13y agoNice! I used pjax for a Chinese-English dictionary project, and it was nice, very very fast. As you mention with JS scripts not working, I had to do things like rebind functions when pjax finished, or load new JS snippets along with each HTML (page) snippet. Not too huge a compromise.
- romanovcode 13y agoSo this is like a fork of TurboLinks? I've made this thing myself for website I use in couple of minutes. I would probably not rely my whole website on this plugin.
- d0ugie 13y agoNote that the author, Alexandre Dieulot, opted generously to release this under the MIT license (thanks buddy). https://github.com/dieulot/instantclick/blob/master/LICENSE https://github.com/dieulot/instantclick/blob/master/LICENSE