18 ms·
Show HN: Make your site’s pages instant in one minute
- hartator 8y agoAlso, how this can be free? I thought CloudFlare was charging workers based on number of requests.
- akras14 8y agoSounds too good to be true, but also brilliant. Curious what others think. What are the downsides?
- dieulot 8y agoThanks. The only downside is that you can expect twice the number of requests to your pages (only the pages themselves, not their assets).
- lallysingh 8y agoAnd you're using a lot more of the users'bandwidth
- dieulot 8y agoYou’re only preloading HTML, so it’s negligible compared to what trackers and ads do for instance.
- jakelazaroff 8y agoIncreased load on your web server, but other than that zero! (You might even be able to mitigate the load with caching). It progressively enhances existing links if JavaScript is enabled. There are other libraries that do similar things, such as InstantClick: http://instantclick.io/ http://instantclick.io/
- deleted 8y ago[deleted]
- ddebernardy 8y agoAssuming you use the script as suggested, letting a 3rd party site know your stats (and users) sounds like a non-trivial downside. I'd surmise the author is benevolent, but if this were to be turned into a business, some kind of data play seems like the trivial next step.
- shaklee3 8y agoAs other comments have pointed out, you can run the js locally from your site instead.
- jypepin 8y agoThis is a feature available on most web frameworks today (for example Link's prefetch on Next.js), but still could be very useful for smaller website and other static pages not using such frameworks. I'd be a little wary of using a script from an unknown person without being able to look at the code - I'd rather see this open source before using. Especially being free and MIT licensed, I don't see why it wouldn't be open.
- devinl 8y agoIn the technical details, he has a link to the open source on github. Here's the js that's actually doing the preloading: https://github.com/instantpage/instant.page/blob/master/instantpage.js https://github.com/instantpage/instant.page/blob/master/inst...
- jypepin 8y agoI stand corrected then, thanks for sharing :) I missed that part!
- glitcher 8y agoJust go directly to the script url: https://instant.page/1.0.0 https://instant.page/1.0.0 The code is not obfuscated or minified, very easy to read.
- asaph 8y agoIt probably should be minified if the whole point is to improve page load times.
- daxterspeed 8y agoCompression and caching makes any minification of small scripts more than negligible.
- asaph 8y ago
- saagarjha 8y agoPerhaps this something that a browser should be doing, instead of websites themselves?
- hunter2_ 8y agoThe heuristics to exclude logout links and the like would be very disruptive. Those decisions need to be in the website author's hands. However, I think if browsers had this, but off by default until seeing tags to enable it along with any exclusions, that would be great.
- markovbot 8y agoIt doesn't have to be. Could start by allowing website authors to opt in via a tag in the <head> or something, then opt out on a per-link basis with an attribute (eg preload=false)
- chrisseaton 8y agoI think it would only prefetch GET links, which never have side effects.
- jfoster 8y agoIt could be a way for browsers to encourage GET to be used more correctly.
- hombre_fatal 8y agoSeems like you'd be punishing users instead of website operators since the cause/effect relationship is so unobvious. User happens to brush over the logout button while using the site. On their next click, they're logged out. Weird. Guess I'll just log in again. Doesn't happen again for some time, but then it does. Weird, didn't that happen the other week? What's wrong with my browser? Oh cool, switching browsers fixed it. You're having that issue, too? Don't worry, I figured it out. Just switch browsers.
- 8y ago
- mars4rp 8y agoThis is very nice idea, but isn't the problem initial liad time most of the time? How could we solve that? Does this also work for all the outgoing links as well? I don't want to improve other sites rendering time at the expense of my own. Very cool regardless.
- dieulot 8y agoIt doesn’t work for outgoing links because the gain wouldn’t be as much as the CSS and scripts of the external site need to be loaded in addition to the HTML (only the HTML can be preloaded). Also, there’s usually no incentive to improve other’s sites pages load.
- s3krit 8y ago>but isn't the problem initial liad time most of the time? How could we solve that? Off the top of my head, a good way seems to be to write better sites that don't include 10mb of javascript libraries.
- deleted 8y ago[deleted]
- deleted 8y ago[deleted]
- alexpetralia 8y agoThis sounds like a computer processor's branch prediction algorithm.
- thijsvandien 8y agoLet's wait and see what creative ways will be found to exploit this optimization as well. :)
- rprime 8y agoIs this a re-rebranding? I remember using something similar 4-5 years ago (instant.js/instantclick). But quite an interesting little thing, especially useful for older websites to bring some life into them. The effect is very noticeable.
- dieulot 8y agoKind of. It’s different than InstantClick in that it uses <link rel="prefetch"> and can thus be embedded in one minute, while InstantClick transforms a site into an SPA and require additional work. It’s a different product. The initially planned name for it was “InstantClick Lite”.
- rprime 8y agoOh interesting, I'll give this a go.
- Existenceblinks 8y agoI've seen this kind of features several times on libs. And sometimes I can't un-think about it while my mouse is hovering on links in normal life. It's .. prefetching or not?
- pbhjpbhj 8y agoHmm, I wonder: if the user isn't asked to authorise the action whether it technically breaches the Computer Misuse Act (UK). If you send a requested page, that's obviously fine. Normal use of websites is expected, but unilaterally instructing your site visitor's browser to download further unrequested content that's not part of a requested resource ...?
- mcdevilkiller 8y agoWhat about downloading tracking js you didn't ask for then?
- paintballboi07 8y ago
- NPMaxwell 8y agoWhere does their code get inserted? I could imagine it might help if it were added to the page you were linking from, but the site seems to indicate the code gets added to page you want to have load quickly -- the page you're linking to.
- dieulot 8y agoOn the pages you’re linking from.
- broth 8y agoI’m wondering if a possible use case for this is to use it to warm up app servers when doing deployments? Enumerate through a list of pages on your site and use something like Puppeteer to simulate hovering over links on each page.
- thijsvandien 8y agoWhy would you simulate hovering over links if you can just visit those URLs directly? If you want all links anyway, you lose the real optimization here, which is not the preloading itself, but limiting that to the (small) subset that a particular user seems interested in.
- hunter2_ 8y agoI don't know that the presence of a query string is a great indicator of whether the link causes state change (cue the typical GET immutability arguments, etc.). For example, in Drupal every path (whether or not it causes state change) has 2 forms: "/?q=path/to/page" (when you don't have access to .htaccess or .conf) and "/path/to/page" (when you do, and you enable clean URLs).
- hopler 8y agoBack when standards mattered, state changes were only in PUT, POST, and DELETE
- benologist 8y agoEmbedding via // without explicit SSL should probably be considered harmful or malicious as there is no reason to make such scripts available without SSL. Even if the end website is not using SSL users can still fetch your script securely.
- dieulot 8y agoThere’s no security gain from going to HTTPS if the site is served over HTTP, but there’s a small speed hit.
- benologist 8y agoThe communication between the user and example.com downloading the page referring to your script is secured by their SSL if they have it. Separately to that, the communication between the user and your server when downloading your script is secured by your SSL. This can be secure even if example.com is not, so it should only be secure.
- esrauch 8y agoIf the first html load isn't on SSL, and someone is able to intercept your traffic, they can change the embedded https url to be a non-https url anyway, so I can't even imagine the attack that is prevented by using https into something loaded over http.
- benologist 8y agoAbsolutely correct. But this is the website owner's problem and their consequences for not using SSL. You can't help or prevent this because it's not your server, it's not your fault they enabled insecure communication that can be exploited. When you forgo SSL on your own server someone can also intercept your script in exactly the same way, they don't need to hack the website embedding your script. Now they are your consequences, your fault there's no SSL, and your problem may be affecting everyone who embedded your script insecurely.
- 8y ago
- ams6110 8y agoNot sure how I feel about this. I often hover over a link to see where it is linking to, see if it has a title, etc. But that's probably not typical of most users. And I don't do it on sites I use often and am familiar with.
- jfoster 8y agoThere's usually no penalty, though. You hover, and the page preload begins. Unless you're trying to keep your data usage to a minimum, there's no disadvantage to you.
- franciscop 8y agoAnd if it only preloads the HTML and not related files, it's still going to be minimal
- pbhjpbhj 8y agoOr prevent law enforcement, or other "overseers" from believing you visited a page. I can see children getting punkd by drive-by prefetch and reporting to teaching staff that X visited a neo-nazi site or, Y downloaded porn during class, etc.. "Prefetch did it" is probably not going to be apparent to most, and is going to sound like a weaksauce excuse.
- freehunter 8y agoOn the other hand if you're visiting pages that link to neo-nazi content or pornography just one link away from the page you're currently on, chances are the page you're currently on would violate whatever acceptable use policy you're supposed to be following.
- pbhjpbhj 8y agoOr you opened a random blog, Reddit, or did an innocuous search, or ...
- 8y ago
- revskill 8y agoI hate frameworks not because it's hard or it forced me to do their convention, it's because it's not universal. This is one example. Prefetching should be frameworkless.
- js4ever 8y agoEach time you hover over a link it's doing a GET request bypassing the cache (cache-control: max-age), even if you hove the same multiple times. Also this will make all your analytics false... Except that indeed this can improve greatly the user sensation of speed
- mariopt 8y agoThe analytics should only be triggered is the page is rendered, assuming it's done client side. I believe Google does this for first top 3 results if I'm not mistaken.
- michaelbuckbee 8y agoThis helped me quite a bit, my mental model of how this worked was off. Prefetching only downloads the resources but does not actually execute any js code. So sites doing lots of tag managers or other js loading js likely wouldn't benefit, but standard GA, etc. should be fine.
- hombre_fatal 8y agoGood point. What would be a good way to avoid prefetch requests in your analytics if you only derive analytics from server access logs?
- 8bitben 8y agoMost browsers pass a "purpose:prefetch" or similar HTTP header in the prefetch request that you can use to differentiate
- hueving 8y agoThen how do you know when they actually go to the page? Do you need client side analytics at that point since the browser already has the page in memory?
- Drakim 8y ago
- homero 8y agoCan we see the Cloudflare Worker?
- dieulot 8y agoI plan to release it later on.
- xivzgrev 8y agoFascinating!
- rurcliped 8y agoMany people browse the web from an employer who has rules about what types of pages may be accessed. For example, a person applying for a job with my team may include a link to a web page about their job-related background -- portfolio.html or whatever. HR tells us to be sure we don't follow links to any other page that may be more personal in nature, such as a page that reveals the applicant's marital status (which can't legally be considered in hiring decisions here). HR doesn't want to deal with complications from cases where we reject an applicant but there's a log entry showing a visit to, say, family.html from our company's IP address block. We'd prefer that prefetching isn't a default. There's also log analysis to identify the set of web pages visited by each employee during work hours, and an attempt to programmatically estimate the amount of non-work-related web browsing. This feeds into decisions about promotions/termination/etc. Prefetching won't get anyone automatically fired, but we'd still prefer it isn't a default.
- hombre_fatal 8y agoJesus. I hope they pay you well for that. I've heard a lot of stories of ridiculous rule-by-HR culture, but that's so extreme it sounds made up.
- deleted 8y ago[deleted]
- chipperyman573 8y agoThe part about viewing family.html seems kind of understandable. If you assume no bad actors, then it's crazy... But we're all developers here, we know that you have to assume the existence of bad actors, and assume that they are going to target you (which is why we you always validate data client data server-side). I could see how viewing family.html could turn into a real headache for HR/Legal, especially if the law says that you can't discriminate based on family information. The other part about log analysis seems crazy, though, I agree with you on that.
- deleted 8y ago[deleted]
- dwheeler 8y agoThis is cool, and the license as shown at https://instant.page/license https://instant.page/license is the well-known MIT license, already known to be be an open source software license https://opensource.org/licenses/MIT https://opensource.org/licenses/MIT A problem with the loading instructions is that it reveals, to an unrelated site, every single time any user loads the site that is doing the preloading. That is terrible for privacy. Yes, that's also true for Google Analytics and the way many people load fonts, but it's also unnecessary. I'd copy this into my server site, to better provide privacy for my users. Thankfully, since this is open source software, that is easily done. Bravo!
- chiefalchemist 8y agoI looked (quickly) through most of the comments below and couldn't answer these questions: 1) What, if anything, is the downside here? 2) Is (Google) analytics effected by the prefetch? That is, does that get counted as a page visit if the link that triggers this prefetch is not actually clicked? Tia
- dieulot 8y agoThe downside is that your pages’s HTML are loaded twice as much, this makes for additional load on your server. Client-side analytics like GA aren’t affected.
- SheinH 8y agoIf your html is gzipped, that's in the double digits of kilobytes for most cases. That's nothing compared to images and other content.
- Semaphor 8y ago> The downside is that your pages’s HTML are loaded twice as much How? It would load the HTML just as often and not download it a second time as that would invalidate the usage > this makes for additional load on your server. True for users who hover over links they decide not to visit Or am I misunderstanding something here?
- Zarel 8y ago> How? It would load the HTML just as often and not download it a second time as that would invalidate the usage I'm guessing you didn't read the linked article? It preloads after 65ms on hover, at which point it estimates a 50% chance that the user will click. Hence "loaded twice as much". > True for users who hover over links they decide not to visit Yes, that's the point.
- bigbadgoose 8y agoJust set this up on guidevinetech.com, injected via tag manager. Works a treat, pages are definitely _fast_
- xpose2000 8y agoI've been testing it for the past 30 minutes or so and found that it doesn't cause the same problems that InstantClick did. (Which was javascript errors that would randomly occur.) I'll limit it to a small subset of users to see if any errors are reported but there is a good chance this could go live for all logged in users. Maybe even all website visitors if all goes well. Seems to have no impact on any javascript, including ads. Pages do load faster, and I can see the prefetch working. Just make sure you apply the data-no-instant tag to your logout link, otherwise it'll logout on mouseover.
- hn_throwaway_99 8y ago> Just make sure you apply the data-no-instant tag to your logout link, otherwise it'll logout on mouseover. Logout links should never be GETs in the first place - they change states and should be POSTs.
- slim 8y agoPOSTs are not Links. And Logout service is indempotent even if you can consider it changes the state of the system
- glacials 8y agoIdempotency is not the issue, the issue is that a user might hover over the logout link, not click it, then move on to the rest of the site and find they are logged out for no reason.
- enedil 8y agoThat's exactly the problem with idempotency.
- winstonewert 8y agoactually, no. Idempotency means that you can safely do the same operation multiple times with the same effect as doing it once. That's a different issue than the no-side-effects rule which GET is supposed to follow.
- amelius 8y agoProbably doesn't work with an agent that doesn't support hover events. Such as on tablets and smartphones.
- hn_throwaway_99 8y agoDid you read the page? It uses touchstart events on mobile.
- DenisM 8y agoThis comment is against the guidelines: https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html > "Did you even read the article? It mentions that" can be shortened to "The article mentions that."
- hn_throwaway_99 8y agoThanks for the callout, my apologies.
- deleted 8y ago[deleted]
- lol768 8y agoI guess nobody has mentioned this yet, but it presumably doesn't work on mobile? I wonder if you could do something similar simply by looking at the viewport and loading all the links within the currently visible part of the page. Might be overkill though and end up wasting the user's data.
- jakelazaroff 8y ago> On mobile, a user starts touching their display before releasing it, leaving on average 90 ms to preload the page.
- CGamesPlay 8y agoFrom the article: > On mobile, a user starts touching their display before releasing it, leaving on average 90 ms to preload the page.
- lol768 8y agoNot sure how I missed that, thanks :)
- mraza007 8y agoCan I use this for static pages
- dieulot 8y agoYes.
- demarq 8y agoI wish there were more examples on that page though. Where can I test this being used extensively?
- hartator 8y agoIs there a demo somewhere? Beside the actual site that seems really well optimized already.
- harshulpandav 8y agoHow does this work on devices with touch screen? (My apologies if this question has already been raised)
- the_gipsy 8y agoThis is addressed in the article...
- deleted 8y ago[deleted]
- avip 8y ago(Your apology was rejected as it's clearly stated in the ultra short OP) It prefetches on touch event while a "click" is normally triggered by a touch release.
- msla 8y ago> It prefetches on touch event while a "click" is normally triggered by a touch release. So now I can't even touch my screen without being taken somewhere else, because I don't know where all the active areas are.
- neillyons 8y agoThis is really impressive! I noticed the script uses `const` and `let` which might cause javascript errors in older browsers (https://caniuse.com/#search=let https://caniuse.com/#search=let) so I ran it through the Google Closure compiler to compile it down to ES3 and it works great. https://closure-compiler.appspot.com/home https://closure-compiler.appspot.com/home I've added it to my blog and a Django side project. Really speeds up page loads. Just need to add `data-no-instant` attribute to the logout link.
- PaulHoule 8y agoA "1% improvement in conversion rate" is a big claim to make for a claim that seems so small. That is, if you wanted to prove that "X is better than Y by 1%" you would need a sample approaching 10,000 attempted conversions to have a hope of having a good enough sample.
- tonmoy 8y agoAnd I assume that’s why the author has put 4 references to that claim
- ks 8y agoAccording to the page, it was Amazon that made the original claim, so they would have the necessary sample size. But there's no guarantee that it will apply for all pages.
- deleted 8y ago[deleted]
- WestCoastJustin 8y agoThere is a slew of case studies that support this line of thinking. Page speed impacts user retention and conversions. See: https://developers.google.com/web/fundamentals/performance/why-performance-matters/ https://developers.google.com/web/fundamentals/performance/w...
- randlet 8y agoWorks very well for me. dieulot, is there a small bug with the allowQueryString check? const allowQueryString = 'instantAllowQueryString' in document.body.dataset I think should be: const allowQueryString = 'instantallowquerystring' in document.body.dataset If I have: <body data-instantAllowQueryString="foo"> then 'instantAllowQueryString' in document.body.dataset === false and 'instantallowquerystring' in document.body.dataset === true because html data attributes get converted to lowercase by the browser (I think).
- amelius 8y agoThis should be implemented at the browser level, not in a webpage.
- faitswulff 8y agoReminds me of this optimization by Netflix: https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9#1b0c https://medium.com/dev-channel/a-netflix-web-performance-cas... The talk (https://www.youtube.com/watch?v=V8oTJ8OZ5S0 https://www.youtube.com/watch?v=V8oTJ8OZ5S0) was one of the most watchable performance optimization talks I've seen. TLDR - they used a combination of the link prefetch technique, which works for HTML but is not fully supported by all browsers, as well as XHR prefetching, which will work for prefetching Javascript and CSS.
- 6c696e7578 8y agoNice idea for HTTP/1.x, however, isn't this what HTTP/2.0 [1] is meant to achieve by pushing components at the user? 1: https://en.wikipedia.org/wiki/HTTP/2_Server_Push https://en.wikipedia.org/wiki/HTTP/2_Server_Push
- Raphael 8y agoWould you push everything? Or just hovered links?
- 6c696e7578 8y agoIn all honesty, personally I'd push all adjacent page content. HTML compresses very well, its minor compared to JS and page images. If the user proceeds to a pushed page, they'd just be waiting for the browser to do the render and collect images. It'd be a compromise, since most images are probably going to be standard page furniture, so likely cached already.
- s0adex 8y agoThe difference between the HTTP/2.0 and instant.page is that the preload initiative is on the client, and not the server. I guess you could use both. HTTP/2.0 for linked resources and instant.page to preload based on the user's behavior.
- wldlyinaccurate 8y agoThe main difference being that instant.page respects users' data allowances by prefetching only resources that it thinks the user intends to load. You could combine it with H2 push and/or prefetch response headers to improve the load times even more :)
- odensc 8y agoIt probably respects their data allowances even less, considering it completely re-fetches the page every time you hover over the link.
- WestCoastJustin 8y agoLive demo on my website @ https://sysadmincasts.com/ https://sysadmincasts.com/ Temporary added it in-line for testing. I was already in the sub 100ms level but this just puts it over the top! Also updated all admin add/edit/delete/toggle/logout links with "data-no-instant". Pretty easy. Open developer preview and watch the network tab. Pretty neat to watch it prefetch! Thanks for creating this! ps. Working on adding the license comment. I strip comments at the template parse level (working on that now). pps. I was using https://developers.google.com/speed/pagespeed/insights/ https://developers.google.com/speed/pagespeed/insights/ to debug page speed before. Then working down the list of its suggestions. Scoring 98/100 on mobile and 100/100 on desktop. I ended up inlining some css, most images are converted to base64 and inlined (no extra http calls), heavy cache of db results on the backend, wrote the CMS in Go, using a CDN (with content cache), all to get to sub 100ms page loads. Pretty hilarious when you think about it but it works pretty well.
- m0zg 8y agoThis is what the OP should have posted. Very impressive. Will use in my work.
- totony 8y agonothing on my network tab in ff 65.0
- SCdF 8y agoditto. It works on Chrome though (sigh)
- sneak 8y agoWhy the sigh? It says right on the site that this gracefully degrades on browsers that don’t support it. Why is it a problem making a site faster in a browser designed for speed, if it does not degrade the experience at all in all other browsers?
- 8y ago
- ThomPete 8y agoIs this kind of like turbolinks which Basecamp uses?
- glacials 8y agoSimilar in effect, but not in method. Turbolinks fetches pages after a click like normal, but swaps the body tag from the new page into the current page, cutting local render times.
- muppetman 8y agoI'm curious how this is better than Google quicklink (https://github.com/GoogleChromeLabs/quicklink https://github.com/GoogleChromeLabs/quicklink) which is something I have active on my site currently. Can someone with more technical knowledge point out which of these two "instant pages" solutions is better?
- dieulot 8y agoSame preloading technique but quicklink preloads more agressively.
- leesalminen 8y agoLooks very good! Love the landing page. Testing on my dev box now. I’ll be rolling this out to a subset of users next week. Cool stuff!
- cjblomqvist 8y agoIt seems everybody is missing this but this could actually slow down your experience, and I'd actually guess it will in some scenarios (ie. not only a theoretical situation). Considering a user hovering over a bunch of links and then clicking the last one, and doing this in a second. Let's assume your site takes 3 sec to load (full round-trip) and you're server is only handling one request at a time (I'm not sure how often this is the case, but I wouldn't be surprised if that's the case within sessions for a significant amount of cases). Then the link the user clicked would actually be loaded last, after all the others - this probably drastically increase loading time. The weak spot in this reasoning is the assumption that you're server won't handle these requests in parallel. Unfortunately I'm not experienced enough to know whether that happens or not, but if so, you should probably be careful and not think that the additional server load is the only downside (which part like is a negligible downside).
- bherms 8y agoIt actually cancels the previous request when you hover over another link
- collinmanderson 8y agoClient side canceled doesn’t necessarily translate to server side canceled. I used to use a preload-on-hover trick like this but decided to remove it once we started getting a lot of traffic. I was afraid I’d overload the server.
- x15 8y agoI'd also hesitate wasting resources in such a way. About your first statement though, which server software do you use that still sends data after the client has closed the connection? Doesn't it use hearbeats based on ACKs?
- hombre_fatal 8y agoThe server is still doing all of the work in its request handlers regardless of whether client closed the connection.
- lucb1e 8y agoIt doesn't seem to work for me. There are no JavaScript errors in the console* but the <button> that says "test your clicking speed" doesn't even have an event attached to it. Hovering over anything for multiple seconds doesn't fire any requests in the network panel. Anyone else having this issue? * Well, there's this, but I assume it's not dependent on google... `Loading failed for the <script> with source “hxxps://www.googletagmanager.com/gtag/js?id=UA-134140884-1"`
- dieulot 8y agoAre you using an older browser? It sounds like your browser doesn’t support JS modules.
- lucb1e 8y agoI... Never heard of JavaScript modules. I feel very out of date now. Anyway, yeah, I'm using the latest Firefox that still supports real addons, some of which aren't even possible to reimplement using the latest APIs in nightly.
- itmeyou 8y agoI don't know exactly what that version was, but you may be able to use about:config to enable JS modules.
- thecatspaw 8y agoI am not sure if the clicking speed button is supposed to preload, or if its only intended for you to figure out your speed.
- superkuh 8y agoI wouldn't want to expose my various site's users to third party code execution like this.
- ahnick 8y agoWhy use this script as an include from the instant.page domain? I think if I'm going to use this I'm just going to serve this script up myself from my own servers.
- nicolashahn 8y agoGood call, I just switched my site to hosting the script itself.
- gsich 8y agoWhy not make the page itself faster? https://forum.dlang.org/ https://forum.dlang.org/ click on subforums and threads.
- chatmasta 8y agoWill this cause problems with "links" that are entirely rendered on the client side? i.e. using something like react-router... In that case, could it result in the react app setting invalid state because it thinks the user is on a page when it's not? My guess is what would happen when "pre-fetching" a react-router link, is that it would prefetch the JS bundle all over again for no gain.
- SkyLinx 8y agoI have just added it to a Shopify store to try it and it does indeed speed things up! However I am a little concerned with adding a script from another website... it requires a lot of trust, doesn'it?
- nicolashahn 8y agoAs another comment mentioned, you can just host the script on your own site.
- SkyLinx 8y agoOf course.... I was confused with the Cloudflare Workers thing... I just added the code directly to the website and it works fine. Thanks.
- bacondude3 8y ago> However I am a little concerned with adding a script from another website... it requires a lot of trust, doesn'it? Not if you use the `integrity` attribute like the page recommends. If the file hash doesn't match the one given in the tag, the browser won't run the script. https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity https://developer.mozilla.org/en-US/docs/Web/Security/Subres...
- dwheeler 8y agoYou can download the code to your own site, and serve it from there. It has an MIT license, and is on GitHub.
- alpb 8y agoI also staged it on my blog and it's working awesome http://staging.ahmet.im/blog/index.html http://staging.ahmet.im/blog/index.html . I wonder if CMS tools or static site generators (Hugo, Jekyll, Pelican etc) should have an option for rel="preload". But I guess it still requires some JS for preload on hover, so is this library going to take off now?
- tgb 8y agoI'm just surprised at how slow my hover-to-click time was (never got it below 100ms). Thought it would be <50ms for sure when trying hard.
- hombre_fatal 8y agoI had the same reaction. On a trackpad, I take a casual 300ms to click the damn link.
- blattimwind 8y ago"49 ms from hover to click" -- I guess I'm not exactly the target audience... However, I find it very good the posted snippets include SRI, which sadly to this day almost every script CDN omits. The code is also small enough to just include it in projects, which avoids the external request entirely.
- thecatspaw 8y agoI thought that as well, but then I realised that I was literally moving my cross over the button and clicking as fast as I can. Thats not how I usually browse the web. I move my cursor usually where I am reading, which includes links, so I am hovering over it before I have decided to click it
- blattimwind 8y agoI usually move the cursor out of the way, because I dislike it covering text or images. So when I do click on something I actually move over there and click immediately. How fast that goes is pretty much the textbook case of Fitts' law.
- ayoisaiah 8y agoWow this looks really great. Just tried it on my website[0], and page loads are pretty much instantaneous. However, it doesn't seem to work in Firefox 67 (Nightly). Does that mean it only works in Chrome? [0]: https://freshman.tech https://freshman.tech
- huhtenberg 8y agoDoes anyone know how using <link href=...> (this method) compares to using a hidden <iframe src=...> ?
- rhacker 8y agoIt does mean we're trusting your service - we're executing your JS on our sites. But I do like that you're putting in the SHA hash so that we know you're not fudging it. Just found that you have the source available too :) So overall, this is pretty cool.
- papaman 8y agowhat kind of sorcery is this?
- papaman 8y agoLive demo on my site as well @ https://pokatheme.com/ https://pokatheme.com/
- deleted 8y ago[deleted]
- joepour 8y agoThis is awesome! Added it to all the public pages of https://tinytracker.co https://tinytracker.co - thank you, @dieulot :)
- desertrider12 8y agoI thought chrome already did this. Somebody else here pointed out that's impossible in general because even regular GET requests can have side effects. I wonder what it's doing with 1.6 GB of memory then...
- ryukoposting 8y ago...I just keep my website lightweight, so I don't need to preload stuff...
- the_arun 8y agoThis is a good optimization. However, it is like pushing the mud under the carpet. It’ll hide real problem. I would rather fix the root cause of slow rendering pages and then use this trick to make it better.
- Zelphyr 8y agoI think it _could_ be used that way. If used properly, however, you’d make sure all your other ducks are in a row before using something like this as icing on the cake, so to speak. But you make an important point.
- Wowfunhappy 8y agoCan this be easily tweaked to preload images as well, if desired? Or is their exclusion inherent in the method used?
- calibas 8y agoAs far as I can tell it just downloads the page. Nothing is parsed until you click the link, so there really isn't a reliable way of telling which images to load until then. You could write something to parse the page and download images, but I don't recommend it. You risk a significant performance hit for the client, and a lot of wasted bandwidth for both client and server.
- h1d 8y agohttps://reactjs.org/ https://reactjs.org/ does it pretty well too.
- kylemathews 8y agoYeah, it's built with Gatsby which has this sort of behavior baked in https://www.gatsbyjs.org/ https://www.gatsbyjs.org/
- ian0 8y agoIt would be great to deploy this on hacker news itself, at least on the "see comments" link of the main page. Page-loading is already blazingly fast, but my latency is still a bit high as I use a mobile internet connection.
- neillyons 8y agoYou could try injecting the script yourself using a chrome extension. https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija?hl=en https://chrome.google.com/webstore/detail/custom-javascript-...
- elliotec 8y agoIf you like to hyper optimize your site like me, and since it doesn't do any good on mobile (Edit: apparently it works on mobile, ignore this), you can have it selectively grab the script on desktop and save a few bytes like this: <script type="text/javascript"> if (screen.width > 768) { let script = document.createElement('script'); script.src = '//instant.page/1.0.0'; script.type = 'module'; script.integrity = 'sha384-6w2SekMzCkuMQ9sEbq0cLviD/yR2HfA/+ekmKiBnFlsoSvb/VmQFSi/umVShadQI'; document.write(script.outerHTML); } </script>
- eridius 8y agoThe site claims it works on mobile > On mobile, a user starts touching their display before releasing it, leaving on average 90 ms to preload the page.
- sfusato 8y agoWhat would be the best way to integrate this in an app that already uses Turbolinks?
- ksec 8y agoExactly my thought. May be even better is to have it included in the next version of Turbolinks.
- codingdave 8y agoThe downside to this would be hovering over a document list, where you might pass by 15 records, GETting them all, until you click the one you really wanted. But it is a clever idea. Applied carefully, it could give the impression of a speedier site. Of course, I see no reason to need a 3rd party for this... updating event handlers to operate this way shouldn't be outside the abilities of most web developers.
- geophertz 8y agoCould this be made as a browser extension?
- deleted 8y ago[deleted]
- fouric 8y agoI wonder if you could use Greasemonkey to inject this into pages client-side...
- hokus 8y agoGreat stuff, I started doing this in 2006 but manually. I made an unofficial google toolbar for Opera[1] that (in the unreleased final version lol) also loaded the images from the search pages when one hovered over the toolbar icons. It took a lot of tweaking to give it the right feel. imho it shouldn't start fetching to fast in case the mouse is only moved over the link. Loading to many assets at the same time is also bad. Some should preload with a delay and hovering over a different link should discontinue preloading the previous assets. Perhaps there is room for a paid version that crawls the linked pages a few times and preloads static assets. Who knows, perhaps you could load css, js and json as well as images and icons. Or (to make it truly magical) make the amount of preloading depend on how slow a round trip resolves. If loading the favicon.ico (from the users location) takes 2+ seconds the html probably wont arrive any time soon. Fun stuff, keep up the good work. [1]- http://web.archive.org/web/20130329183223/http://widgets.opera.com/widget/4282/ http://web.archive.org/web/20130329183223/http://widgets.ope...
- technotarek 8y agoMake it opt-in (vs opt-out)? As best I can tell, there is only the blacklist functionality (via a markup attribute). I can imagine many use cases where it would be far easier to only activate where a link has .instant-page.
- kieranhunt 8y agoI wrote a very minimal GreaseMonkey script that adds this to every page: https://github.com/KieranHunt/instant.page/raw/master/instant.page.user.js https://github.com/KieranHunt/instant.page/raw/master/instan...