Quicklink

クイックリンク

Create:

2022-10-30

/ Update:

2023-03-18

概要

ウェブサイトのビューポートにあるリンクをプリフェッチしておくことでページ遷移の高速化を行うモジュール

アイドルタイム（待機時間）にビューポート内のリンクをプリフェッチまたはプリレンダリングすることで、その後のページロードを高速化します。

Quicklinkは、次のような仕組みでページ遷移をより高速にしています。

ビューポート内のリンクの検出（Intersection Observerを使用）
ブラウザがアイドルになるまで待機（requestIdleCallbackを使用）
ユーザーが低速接続でないか（navigator.connection.effectiveTypeを使用）、データセーバーが有効か（navigator.connection.saveDataを使用）をチェック
リンク先へのURLのプリフェッチ（<link rel=prefetch>またはXHRを使用）またはプリレンダー（Speculation Rules APIを使用）し、リクエストの優先順位を制御する (サポートされていれば fetch() に切り替えることが可能）

gzipされた状態でわずか1KBと軽量なので、Quicklinkのモジュールをウェブサイトへ追加しても重くなることはありません。