Quicklink — Prefetch In-Viewport Links During Idle Time

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/