# Quicklink — Prefetch In-Viewport Links During Idle Time

> A tiny JavaScript library by Google Chrome Labs that speeds up subsequent page navigations by prefetching links visible in the viewport during browser idle time.

## Install

Save in your project root:

# Quicklink — Prefetch In-Viewport Links During Idle Time

## Quick Use
```bash
npm install quicklink
```
```js
import { listen } from 'quicklink';
listen();
```
That single call prefetches all in-viewport links when the browser is idle.

## Introduction
Quicklink detects links visible in the user's viewport and prefetches their destinations during idle periods. When the user clicks a prefetched link, the page loads nearly instantly because the browser already has the resource in its cache. It was created by Google Chrome Labs to make multi-page sites feel as fast as single-page apps.

## What Quicklink Does
- Detects which anchor elements are visible in the viewport using Intersection Observer
- Prefetches link targets during browser idle time using requestIdleCallback
- Supports `<link rel="prefetch">`, fetch API, and XHR as prefetch strategies
- Respects data-saver mode and slow connections by skipping prefetch automatically
- Allows allowlisting and blocklisting URLs to control what gets prefetched

## Architecture Overview
Quicklink registers an Intersection Observer on the document. When an anchor enters the viewport, it is added to a prefetch queue. The queue is drained during idle callbacks using requestIdleCallback (with a setTimeout fallback). Each URL is prefetched once using `<link rel="prefetch">` by default, which fetches at low priority without blocking the main thread. A Set tracks already-prefetched URLs to avoid duplicates.

## Self-Hosting & Configuration
- Install via npm or load the UMD bundle (~1 KB gzipped)
- Call `listen()` with no arguments for automatic viewport-based prefetching
- Pass `{ el: container }` to scope observation to a specific DOM subtree
- Use `origins` array to restrict prefetching to same-origin or specific domains
- Set `limit` to cap the number of prefetches per page load

## Key Features
- Automatic prefetching with zero configuration via a single function call
- Respects user preferences: skips on Save-Data header or slow 2G/3G connections
- Tiny footprint at under 1 KB gzipped
- Customizable prefetch strategy: link prefetch, fetch API, or XHR
- Same-origin restriction by default prevents prefetching external resources

## Comparison with Similar Tools
- **Instant.page** — prefetches on hover/touch intent; Quicklink prefetches on viewport visibility during idle
- **Guess.js** — uses analytics data to predict navigations; Quicklink prefetches all visible links
- **Next.js Link** — framework-specific with route prefetching; Quicklink is framework-agnostic
- **Turbo (Hotwire)** — full navigation framework; Quicklink is a focused prefetch utility

## FAQ
**Q: Does Quicklink waste bandwidth?**
A: Quicklink uses low-priority prefetch and skips on slow connections or data-saver mode. It also deduplicates URLs.

**Q: Can I exclude certain links?**
A: Yes. Add `data-no-prefetch` to any anchor, or pass an `ignores` array of URL patterns or regex to `listen()`.

**Q: Does it work with single-page apps?**
A: Quicklink targets traditional multi-page navigation. For SPAs, framework-level route prefetching is more appropriate.

**Q: What happens if the user navigates before idle?**
A: The link loads normally. Quicklink only prefetches during idle; it does not block or delay any navigation.

## Sources
- https://github.com/GoogleChromeLabs/quicklink
- https://getquick.link/

---
Source: https://tokrepo.com/en/workflows/asset-06e75825
Author: AI Open Source