README

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)
- Waits until the browser is idle (using 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  or XHR) or prerenders (using Speculation Rules API) 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 (



  quicklink.listen();



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

html

  window.addEventListener('load', () = {
    quicklink.listen();
  });



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.mjs';


 Single page apps (React)

 Installation

First, install the packages with Node.js and npm:

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


Then, configure Webpack route manifest into your project, as explained in the webpack-route-manifest docs.
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:

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

const options = {
  origins: [],
};

Loading...}
  
  
  
  
;


 API

 quicklink.listen(options)

Returns: Function

A "reset" function is returned, which will empty the active IntersectionObserver and the cache of URLs that have already been prefetched or prerendered. This can be used between page navigations and/or when significant DOM changes have occurred.

 options.prerender

- Type: Boolean
- Default: false

Whether to switch from the default prefetching mode to the prerendering mode for the links inside the viewport.

 Note: The prerendering mode (when this option is set to true) will fallback to the prefetching mode if the browser does not support prerender.
 Once the element exits the viewport, the speculationrules script is removed from the DOM. This approach makes it possible to exceed the limit of 10 prerenders imposed for the 'immediate' and 'eager' settings for eagerness.

 options.eagerness

- Type: String
- Default: immediate

Determines the mode to be used for prerendering specified within the speculation rules.

 options.pre