DEV Community

Cover image for Load Pages Instantly with instant.page
Gift Egwuenu
Gift Egwuenu

Posted on • Updated on

Load Pages Instantly with instant.page

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>
Enter fullscreen mode Exit fullscreen mode

Thanks to Alexandre Dieulot for creating such a useful tool! You can find the GitHub Repo here:

GitHub logo 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.

🌟 Star this repository to follow its development.

Tests

With Node, run:

node test/app.js

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 install uglify-es globally (npm i uglify-es -g) then run npm run minify.

Discussion (15)

Collapse
solkimicreb profile image
Miklos Bertalan • Edited on

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' a tags (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' a tags 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.

Collapse
lauragift21 profile image
Gift Egwuenu Author

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.

Collapse
ben profile image
Ben Halpern

instant.page uses just-in-time preloading — it preloads a page right before a user clicks on it.

Cool, we do something similar with dev.to

Collapse
awwsmm profile image
Andrew (he/him)

This wouldn't work on mobile, I imagine?

Collapse
markjohnson303 profile image
Mark Johnson 👔

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.

Collapse
markjohnson303 profile image
Mark Johnson 👔

Pretty immediately perceptible effects when I installed it. Check it out live on knottytie.com if you're interested!

Collapse
david_j_eddy profile image
David J Eddy

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. :)

Wut!

Collapse
lauragift21 profile image
Gift Egwuenu Author

Cool! Happy you like it. I've also seen changes for myself on my blog after adding it.

Thread Thread
peoray profile image
Emmanuel Raymond

What kind of changes did you see?

Collapse
moopet profile image
Ben Sinclair

From the title, this sounded like trash, to be honest. But then I read he description and it actually sounds really interesting.

Collapse
lauragift21 profile image
Gift Egwuenu Author

Thanks :) I'm curious about why you think the title sounds like trash.

Collapse
moopet profile image
Ben Sinclair

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!

Collapse
petecapecod profile image
Peter Cruckshank

Thanks this was a great tip 🤩👏👏

Collapse
equinusocio profile image
Mattia Astorino • Edited on

Honestly i prefer google quicklink which have some useful configrations github.com/GoogleChromeLabs/quicklink

Collapse
ogwurujohnson profile image
Johnson Ogwuru

I just tried it out, works fine. Cool