DEV Community

Discussion on: Speed up your website in 1 minute with Instant.page

Collapse
 
nickytonline profile image
Nick Taylor • Edited

The DEV site uses something similar to this, InstantClick. It actually uses the same attribute, data-no-instant, to ignore links just like Instant.page. I wrote about it a while back. I wonder if Instant.page was inspired by InstantClick.

Collapse
 
fbnlsr profile image
Fabien Lasserre ☕️

Well as it turns out, InstantClick was made by Alexandre Dieulot, the creator of Instant.page! 😄

Collapse
 
nickytonline profile image
Nick Taylor • Edited

I guess it is his improvement to InstantClick? Could be worth investigating upgrading to Instant.page for DEV. It might even be an interesting Hacktoberfest PR.

Thread Thread
 
astronomersiva profile image
Sivasubramanyam A

IIRC, InstantClick kind of makes your website behave like an SPA. It uses pjax and replaces only the contents of the body tag and the document title. Instant.page on the other hand, simple prefetches contents so that the browser cache can kick in when the user actually clicks the link.

Thread Thread
 
astronomersiva profile image
Sivasubramanyam A

There also seems to be a Google project called quicklink that prefetches links in the viewport. I guess this is similar to what Gatsby does.

Thread Thread
 
fbnlsr profile image
Fabien Lasserre ☕️

I asked Alexandre directly and here is his reply:

"instant.page uses only <link rel=prefetch>, InstantClick uses Ajax and pushState which makes a website into an SPA (and therefor needs for scripts to be adapted).

InstantClick gives a better experience, but lacks documentation. It's more of a proof of concept.

For the moment I recommend Instant.page more"

Thread Thread
 
nickytonline profile image
Nick Taylor

There is also guess. So many great projects.

GitHub logo guess-js / guess

Libraries & tools for enabling Machine Learning driven user-experiences on the web

Build Status

Guess.js (alpha)

Libraries and tools for enabling data-driven user-experiences on the web.

Quickstart

For Webpack users:

Data-driven bundling

Install and configure GuessPlugin - the Guess.js webpack plugin which automates as much of the setup process for you as possible.

Should you wish to try out the modules we offer individually, the packages directory contains three packages:

  • ga - a module for fetching structured data from the Google Analytics API to learn about user navigation patterns.
  • parser - a module providing JavaScript framework parsing. This powers the route-parsing capabilities implemented in the Guess webpack plugin.
  • webpack - a webpack plugin for setting up predictive fetching in your application. It consumes the ga and parser modules and offers a large number of options for configuring how predictive fetching should work in your application.

For non-Webpack users:

Data-driven loading

Our predictive-fetching for sites workflow provides a set of steps you can…