メインコンテンツへ
短.be

プリレンダリング

ユーザーがリンクをクリックする前にページ全体を事前にレンダリングしておく最適化技術。クリック後の表示を瞬時にする。

2025年12月2日 · 約 1 分で読めます

リダイレクト

プリレンダリング (Prerender) とは、ユーザーが次にアクセスする可能性の高いページを、バックグラウンドで事前にレンダリング (HTML の解析、CSS の適用、JavaScript の実行) しておく最適化技術です。実際にリンクをクリックしたとき、既にレンダリング済みのページが即座に表示されるため、体感的にはゼロ秒でページが切り替わります。

Chrome は Speculation Rules API を通じてプリレンダリングをサポートしています。HTML に <script type="speculationrules"> を記述し、プリレンダリング対象の URL パターンを指定します。Chrome はユーザーの行動を予測し、クリックされる可能性が高いリンクを事前にレンダリングします。

短縮 URL のリダイレクト体験を劇的に改善する手段としてプリレンダリングは有効です。通常、短縮 URL をクリックすると、DNS 解決 → TCP 接続 → リダイレクトレスポンス → リダイレクト先の DNS 解決 → ページ読み込みという複数のステップが発生します。プリレンダリングが効いていれば、これらすべてが事前に完了しており、クリック後は即座にページが表示されます。

プリレンダリングの注意点として、リソース消費があります。プリレンダリングはページ全体をバックグラウンドで読み込むため、ユーザーの通信帯域とデバイスのメモリを消費します。モバイル環境ではデータ通信量の増加が問題になる可能性があるため、確度の高いリンクに絞って適用すべきです。

プリレンダリングの段階的な代替手段として、dns-prefetch (DNS 解決のみ)、preconnect (DNS + TCP + TLS)、prefetch (リソースのダウンロードのみ) があります。リソース消費と効果のバランスで使い分けます。関連書籍は Amazon でも探せます。

X でシェアはてブ

この記事は役に立ちましたか?

関連用語

関連記事

よくある質問

プリレンダリングと prefetch の違いは?
prefetch はリソース (HTML、CSS、JS、画像) をダウンロードするだけです。プリレンダリングはダウンロードに加えて、HTML の解析、CSS の適用、JavaScript の実行まで事前に行います。プリレンダリングの方が効果は大きいですが、リソース消費も多くなります。
プリレンダリングはすべてのブラウザで使えますか?
Speculation Rules API は Chrome 109 以降でサポートされています。Firefox や Safari では現時点で未対応です。対応ブラウザでのみ効果を発揮し、非対応ブラウザでは通常の読み込みにフォールバックします。
プリレンダリングでデータ通信量は増えますか?
はい、クリックされなかったページのデータも事前にダウンロードされるため、通信量は増加します。モバイルユーザーへの配慮として、Save-Data ヘッダーが設定されている場合はプリレンダリングを無効にする実装が推奨されます。

短縮 URL を作成してみませんか?

無料で URL を短縮する