Speed up next page navigations by up to 1 second and improve conversions by up to 10%

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-alpha/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']);

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!

Use with