googlechromelabs/quicklink

★ 11,236JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it does
      Prefetches visible links
      Speeds up navigation
      Runs at browser idle
    How it works
      Intersection Observer
      Idle callback API
      Connection check
    Config options
      Request concurrency
      Allowed domains
      Skip URLs
    Integration
      Vanilla script tag
      React HOC wrapper
      CDN or npm install

mindmap root((repo)) What it does Prefetches visible links Speeds up navigation Runs at browser idle How it works Intersection Observer Idle callback API Connection check Config options Request concurrency Allowed domains Skip URLs Integration Vanilla script tag React HOC wrapper CDN or npm install

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Speed up navigation on a multi-page website by prefetching links that are currently visible on screen.

USE CASE 2

Add instant-feeling page transitions to a React single-page application using the provided HOC wrapper.

USE CASE 3

Improve perceived performance on a content site without changing server infrastructure or rewriting HTML.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

quicklink is a small JavaScript library (under 2KB when compressed) from Google Chrome Labs that speeds up website navigation by loading pages before the user clicks on them. It works by watching which links are currently visible on screen and quietly fetching those destination pages in the background while the browser has nothing else to do. The library uses three browser features to keep this process safe and unobtrusive. First, it uses the Intersection Observer API to detect which links are within the visible area of the page. Second, it uses the browser's idle callback mechanism to delay any fetching until the browser is not busy with other work. Third, it checks the user's connection speed and respects the data-saver setting, so it does not prefetch on slow connections or when the user has indicated they want to minimize data use. By default, quicklink prefetches pages using a standard HTML prefetch hint, which the browser processes at low priority. It can also be configured to use prerendering, where the browser fully loads and renders the destination page in the background before the user navigates to it. Prerendering is faster for the user but uses more resources, so it is off by default. Integration is straightforward. For traditional multi-page websites, you include the script and call quicklink.listen() on the page. For React single-page applications, a higher-order component wrapper is available. The library exposes configuration options for limiting how many requests run simultaneously, how long a link must stay visible before prefetching starts, which external domains are allowed, and which URLs to skip entirely. The project is maintained by the Google Chrome Labs team and targets general web performance improvement without requiring changes to server infrastructure.

Copy-paste prompts

Prompt 1

I want to add quicklink to a traditional multi-page website to prefetch visible links. Show me the minimal setup: which script to include and how to call quicklink.listen().

Prompt 2

How do I configure quicklink to skip certain URLs, limit simultaneous prefetch requests, and require a link to be visible for 2 seconds before fetching?

Prompt 3

I'm using React and want to add quicklink prefetching. Show me how to use the higher-order component wrapper in a React app.

Prompt 4

What's the difference between quicklink's default prefetch mode and prerender mode, and when should I use each?

Open on GitHub → Explain another repo

← googlechromelabs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.