"We implemented Quicklink and saw a 50% increase in conversions and 4x faster page transitions" - NewEgg

Why Quicklink?
Star Fork
Star Fork

This project aims to be a drop-in solution for sites to prefetch links based on what is in the user's viewport. It also aims to be small (< 1KB minified/gzipped).

Place this snippet in your head or just before your close body tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/quicklink/2.3.0/quicklink.umd.js"></script>
<script>
window.addEventListener('load', () => {
  quicklink.listen();
});
</script>

Copied. Now place it just before </body> on your pages.

Download

Trusted by

Ray-Ban

Oakley

SYFY WIRE

Newegg

BAREFOOT

Hashnode

HARTFORD

Vinyla

MATSUDA

Paul Rand

Komachi

Quiply

St Agnes

Installation

For use with node and npm:

npm install --save quicklink

You can also grab quicklink from unpkg.com/quicklink.

Usage

Once initialized, quicklink will automatically prefetch URLs for links that are in-viewport during idle time.

Quickstart:

<!-- Include quicklink from dist -->
<script src="dist/quicklink.umd.js"></script>
<!-- Initialize (you can do this whenever you want) -->
<script>
quicklink.listen();
</script>

For example, you can initialize after the load event fires:

<script>
window.addEventListener('load', () => {
  quicklink.listen();
});
</script>

ES Module import:

import quicklink from "quicklink/dist/quicklink.mjs";
quicklink.listen();

The above options are best for multi-page sites. Single-page apps have a few options available for using quicklink with a router:

Call quicklink.listen() once a navigation to a new route has completed

Call quicklink.listen() against a specific DOM element / component

Call quicklink.prefetch() with a custom set of URLs to prefetch

Concerned about over-prefetching? We've got you covered

By default quicklink observes all in-viewport links in document.body. There are different ways of telling quicklink to limit the number of links to prefetch.

The most common approach is passing different options to configure prefetching when calling quicklink.listen():

Indicating a specific DOM element to observe, with the options.el parameter:

quicklink.listen({
  el: document.getElementById('content')
});

Passing an options.limit parameter, indicating the total number of requests that can be prefetched while observing the options.el container:

quicklink.listen({
  limit: 5
});

Using options.throttle, to establish a concurrency limit for simultaneous requests while observing the options.el container:

quicklink.listen({
  throttle: 2
});

If none of these configuration options suits your needs, you can call quicklink.prefetch(), passing a single URL or an array of URLs to prefetch. Invoking quicklink this way, bypasses the Intersection Observer logic, giving you full control on the prefetch requests to be made:

quicklink.prefetch(['2.html', '3.html', '4.js']);

Single page apps (React)

Installation

First, install the packages with node and npm:

npm install quicklink webpack-route-manifest --save-dev

Then, configure Webpack route manifest into your project, as explained here. This will generate a map of routes and chunks called rmanifest.json. It can be obtained at:

URL: site_url/rmanifest.json
Window object: window.__rmanifest

Usage

Import quicklink React HOC where want to add prefetching functionality. Wrap your routes with the withQuicklink() HOC.

Example:

import { withQuicklink } from 'quicklink/dist/react/hoc.js';

const options = {
  origins: []
};

<Suspense fallback={<div>Loading...</div>}>
  <Route path="/" exact component={withQuicklink(Home, options)} />
  <Route path="/blog" exact component={withQuicklink(Blog, options)} />
  <Route path="/blog/:title" component={withQuicklink(Article, options)} />
  <Route path="/about" exact component={withQuicklink(About, options)} />
</Suspense>

Chrome Extension

We've developed a Chrome extension that injects and initializes Quicklink in every site you visit.

The extension can be used with the following purposes:

To navigate the web faster.

To estimate the potential impact of Quicklink on a site, before implementing it (see impact measurement guide).

The extension comes with a default set of URL patterns to ignore (e.g. signin, logout, etc). You can add more patterns, by clicking on the extension icon, and picking 'Options' from the drop-down menu.

The code of the extension can be found at this repository. Contributions are welcomed!