プリレンダリング (Prerender) とは、ユーザーが次にアクセスする可能性の高いページを、バックグラウンドで事前にレンダリング (HTML の解析、CSS の適用、JavaScript の実行) しておく最適化技術です。実際にリンクをクリックしたとき、既にレンダリング済みのページに切り替わるため、待ち時間はほとんど発生しません。ただしプリレンダリングはブラウザへのヒントであり、端末のメモリ状況やユーザーの設定によっては実行されないこともあります。
Chrome は Speculation Rules API を通じてプリレンダリングをサポートしています。HTML に <script type="speculationrules"> を記述し、プリレンダリング対象の URL パターンを指定します。どのリンクを対象にするかを決めるのはブラウザ側の予測ではなくサイト側の宣言で、発火のタイミングは eagerness の指定で選びます。ルールを読み込んだ時点で実行する immediate、リンクにポインタを重ねた時点で実行する eager と moderate、押し下げた時点で実行する conservative があり、eagerness の指定は Chrome 121 以降で使えます。
短縮 URL の文脈では、プリレンダリングが届く範囲を先に押さえておく必要があります。通常、短縮 URL をクリックすると、DNS 解決 → TCP 接続 → リダイレクトレスポンス → リダイレクト先の DNS 解決 → ページ読み込みという複数のステップが発生します。ただし Speculation Rules API のプリレンダリングは既定では同一オリジンが対象で、オリジンが異なる場合は同一サイト内かつ遷移先が Supports-Loading-Mode ヘッダーで受け入れを表明したときに限られます。別サイトへのプリレンダリングは行われず、プリレンダリング中のページが別サイトへ遷移しようとすると、そのプリレンダリングはリクエスト送出前に破棄されます。短縮 URL はクリック元のページとも遷移先とも別サイトになることが多いため、上のステップを事前に済ませる用途には使えません。適用範囲は自サイト内の遷移が中心で、別サイトへのリダイレクトを速くしたい場合は、後述の dns-prefetch や preconnect が現実的な選択肢になります。
プリレンダリングの注意点として、リソース消費があります。プリレンダリングはページ全体をバックグラウンドで読み込むため、ユーザーの通信帯域とデバイスのメモリを消費します。モバイル環境ではデータ通信量の増加が問題になる可能性があるため、確度の高いリンクに絞って適用すべきです。Chrome は同時に保持するプリレンダリングの本数にも上限を設けており、immediate では 10 件、それ以外の eagerness では 2 件までで、上限を超えると古いものから破棄されます。加えて Save-Data の指定時、省電力モード時、メモリが不足している場合、ページの先読み設定が無効な場合には、投機的な読み込み自体が行われません。
プリレンダリングの段階的な代替手段として、dns-prefetch (DNS 解決のみ)、preconnect (DNS + TCP + TLS)、prefetch (リソースのダウンロードのみ) があります。リソース消費と効果のバランスで使い分けます。この 3 つは別オリジンにも効くため、外部サイトへ送り出すリンクではプリレンダリングより現実的です。なお、かつて使われていた <link rel="prerender"> という指定は非推奨で、現在の Chrome ではページ全体の事前レンダリングではなくリソースの先読み相当の動作にとどまります。ページ単位の先読みは Speculation Rules API に引き継がれています。