I found a cool tool for improving the performance of your websites. Instant.page makes your site’s pages instant in 1 minute and improve your conversion rate by 1%.
All you need to do is add this script just before the <body> tag.
<script src="//instant.page/1.1.0" type="module" integrity="sha384-EwBObn5QAxP8f09iemwAJljc+sU+eUXeL9vSBw1eNmVarwhKk2F9vBEpaN9rsrtp"></script>
Thanks to Alexandre Dieulot for creating such a useful tool! You can find the GitHub Repo here:
instantpage
/
instant.page
Make your site’s pages instant in 1 minute and improve your conversion rate by 1%
instant.page
Make your site’s pages instant in 1 minute and improve your conversion rate by 1%.
ℹ️ Info is on the website.
📜 The source is in instantpage.js.
Tests
With Node, run:
node test
And access http://127.0.0.1:8000/. Or specify another port with an argument after the filename.
Minifying
To minify instantpage.js into instantpage.min.js, run npm run minify.
Top comments (15)
I see this repo frequently nowadays and I feel like I have to go a bit against it. Sorry. 😕
TLDR: This goes nicely with some server rendered and static pages but not so nicely with SPAs.
Prefetching is an amazing tool but it is meant to be used selectively, in context-specific use cases. Making all links into a prefetch one is not a good idea, if it would be the browser devs would have done that instead of giving us an API.
This does prefetch pages on hover but prefetching a page only involves fetching the entry point (index.html), it does not fetch secondary resources. A lot of modern pages have tiny index.html files and huge secondary bundles (JS and CSS). In this case prefetching has no impact and server push or a PWA could be utilized better.
Most SPA routers use 'fake'
atags (with prevented default event handling) under the hood for client-side routing. This is done to combine the best parts new-school and old-school routing - like keeping the right-click 'Open in new tab' functionality. Prefetching on hover events over these 'fake'atags will simply fetch your SPAs index.html once more. This is just added network traffic with zero value.There are so much more that can be prefetched, apart from links and whole pages. Just always pay attention when you add a new resource and decide if it benefits from prefetching. It is usually not a big overhead.
I think this is a witty idea and the code looks very clean though. Also props for raising awareness regarding the newish prefetch capability!
EDIT: I wrote this based on my personal experience, without getting into the spec. Please correct me if I mentioned something incorrect.
Totally okay with your view about this. I should have added a disclaimer that it works best with static sites or server rendered sites. I'm currently using it for a static site and it works well.
Cool, we do something similar with dev.to
This wouldn't work on mobile, I imagine?
Pretty cool! Slightly scary but I'm going to try this out on my production site and see if there is any noticeable change in behavior tomorrow.
Pretty immediately perceptible effects when I installed it. Check it out live on knottytie.com if you're interested!
Checked out knottytie.com; interesting product. To bad the page took over 30 seconds to load and required > 6 Mbs. :(
Would you like some assistance optimizing the landing page? My services are available. :)
Cool! Happy you like it. I've also seen changes for myself on my blog after adding it.
What kind of changes did you see?
From the title, this sounded like trash, to be honest. But then I read he description and it actually sounds really interesting.
Thanks :) I'm curious about why you think the title sounds like trash.
I mean it sounds like one of those improbable claims that people make, like "download more RAM!" or something. I mean, it's still misleading - pages will only seem to load "instantly" if they aren't 20MB behemoths that usually take 10 seconds to get to first paint.
Hyperbole never dies!
Thanks this was a great tip 🤩👏👏
Honestly i prefer google quicklink which have some useful configrations github.com/GoogleChromeLabs/quicklink
I just tried it out, works fine. Cool