quicklink
npm gzip size downloads travis

quicklink

Faster subsequent page-loads by prefetching in-viewport links during idle time

How it works

Quicklink attempts to make navigations to subsequent pages load faster. It:

Why

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

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();
</script>

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

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

ES Module import:

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

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

API

quicklink accepts an optional options object with the following parameters:

TODO:

Polyfills

quicklink:

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

Alternatively, see the Intersection Observer polyfill.

Recipes

Set a custom timeout for prefetching resources

Defaults to 2 seconds (via requestIdleCallback). Here we override it to 4 seconds:

quicklink({
  timeout: 4000
});

Set the DOM element to observe for in-viewport links

Defaults to document otherwise.

const elem = document.getElementById('carousel');
quicklink({
  el: elem
});

Set a custom array of URLs to be prefetched

If you would prefer to provide a static list of URLs to be prefetched, instead of detecting those in-viewport, customizing URLs is supported.

quicklink({
   urls: ['2.html','3.html', '4.js']
});

Set the request priority for prefetches

Defaults to low-priority (rel=prefetch or XHR). For high-priority (priority: true), attempts to use fetch() or falls back to XHR.

quicklink({ priority: true });

Specify a custom list of allowed origins

Provide a list of hostnames that should be prefetch-able. Only the same origin is allowed by default.

Important: You must also include your own hostname!

quicklink({
  origins: [
    // add mine
    'my-website.com',
    'api.my-website.com',
    // add third-parties
    'other-website.com',
    'example.com',
    // ...
  ]
});

Allow all origins

Enables all cross-origin requests to be made.

Note: You may run into CORB and CORS issues!

quicklink({
  origins: true,
  // or
  origins: []
});

Custom Ignore Patterns

These filters run after the origins matching has run. Ignores can be useful for avoiding large file downloads or for responding to DOM attributes dynamically.

// Same-origin restraint is enabled by default.
//
// This example will ignore all requests to:
//  - all "/api/*" pathnames
//  - all ".zip" extensions
//  - all <a> tags with "noprefetch" attribute
//
quicklink({
  ignores: [
    /\/api\/?/,
    uri => uri.includes('.zip'),
    (uri, elem) => elem.hasAttribute('noprefetch')
  ]
});

You may also wish to ignore prefetches to URLs which contain a URL fragment (e.g. index.html#top). This can be useful if you (1) are using anchors to headings in a page or (2) have URL fragments setup for a single-page application, and which to avoid firing prefetches for similar URLs.

Using ignores this can be achieved as follows:

quicklink({
    ignores: [
        uri => uri.includes('#')
        // or RegExp: /#(.+)/
        // or element matching: (uri, elem) => !!elem.hash
    ]
});

Browser support

The prefetching provided by quicklink can be viewed as a progressive enhancement. Cross-browser support is as follows:

Certain features have layered support:

Using the prefetcher directly

quicklink includes a prefetcher that can be individually imported for use in other projects. After installing quicklink as a dependency, you can use it as follows:

<script type="module">
import prefetch from '../src/prefetch.mjs';

const urls = ['1.html', '2.html'];
const promises = urls.map(url => prefetch(url));
Promise.all(promises);
</script>

Demo

Here's a WebPageTest run for our demo improving page-load performance by up to 4 seconds via quicklink's prefetching. A video comparison of the before/after prefetching is on YouTube.

For demo purposes, we deployed a version of the Google Blog on Firebase hosting. We then deployed another version of it, adding quicklink to the homepage and benchmarked navigating from the homepage to an article that was automatically prefetched. The prefetched version loaded faster.

Please note: this is by no means an exhaustive benchmark of the pros and cons of in-viewport link prefetching. Just a demo of the potential improvements the approach can offer. Your own mileage may heavily vary.

Related projects

License

Licensed under the Apache-2.0 license.