quicklink

<p align="center">
  <img src="https://raw.githubusercontent.com/GoogleChromeLabs/quicklink/HEAD/assets/images/logos/banner-white-bg.png" alt="" width="640">
  <br>
  <a href="https://www.npmjs.com/package/quicklink">
    <img src="https://img.shields.io/npm/v/quicklink?style=flat&logo=npm&logoColor=fff" alt="npm">
  </a>
  <a href="https://unpkg.com/quicklink">
    <img src="https://img.shields.io/bundlephobia/minzip/quicklink" alt="gzip size">
  </a>
  <a href="https://github.com/GoogleChromeLabs/quicklink/actions/workflows/ci.yml?query=workflow%3ACI+branch%3Amain">
    <img src="https://img.shields.io/github/actions/workflow/status/GoogleChromeLabs/quicklink/ci.yml?branch=main&label=ci&logo=github" alt="ci">
  </a>
</p>

# quicklink

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

## How it works

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

- **Detects links within the viewport** (using [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API))
- **Waits until the browser is idle** (using [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback))
- **Checks if the user isn't on a slow connection** (using `navigator.connection.effectiveType`) or has data-saver enabled (using `navigator.connection.saveData`)
- **Prefetches** (using [`<link rel=prefetch>`](https://html.spec.whatwg.org/multipage/links.html#link-type-prefetch) or XHR) or **prerenders** (using [Speculation Rules API](https://github.com/WICG/nav-speculation/blob/main/triggers.md)) URLs to the links. Provides some control over the request priority (can switch to `fetch()` if supported).

## Why

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

## Multi page apps

### Installation

For use with [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/):

```sh
npm install quicklink
```

You can also grab `quicklink` from [unpkg.com/quicklink](https://unpkg.com/quicklink).

### Usage

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

Quickstart:

```html
<!-- 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:

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

ES Module import:

```js
import {listen, prefetch} from 'quicklink';
```

Modern ES Module (`quicklink.modern.mjs`) — a smaller build for browsers with native ES module support (no legacy transforms). Prefer this when you only need to support modern browsers:

```js
import {listen, prefetch} from 'quicklink/dist/quicklink.modern.mj