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

Why Quicklink?

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.0.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

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:

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 passing different options to configure prefetching when calling quicklink.listen():

quicklink.listen({
el: document.getElementById('content')
});
quicklink.listen({
limit: 5
});
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:

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:

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!

Why Quicklink's prefetch?

Prefetch pages a user may need in the future to improve subsequent page loads

Use with