ページ遷移を「ゼロ」に近づける：`rel=”prerender”` の真実と現場での付き合い方
フロントエンドエンジニアなら誰もが一度は夢見る「クリックした瞬間にページが表示される」という体験。SPA（Single Page Application）が全盛の今、MPA（Multi Page Application）であっても、この「遷移のラグ」をいかに削ぎ落とすかは、UX向上において避けては通れない戦場です。
そこで、多くのエンジニアが一度は耳にするのが `` という魔法の呪文。しかし、これを「とりあえず入れておけば速くなる」程度の認識で使っていると、予期せぬトラブルやリソースの無駄遣いに足元をすくわれることになります。
今日は、この「一見強力だが、実は扱いが難しい」リソースヒントについて、現場の知見を交えて深く掘り下げていきましょう。
—
1. `prerender` とは何か？その「裏側の顔」
端的に言えば、`rel=”prerender”` はブラウザに対し、「この先ユーザーが遷移する可能性が高いページを、バックグラウンドで完全レンダリングしておいてくれ」と指示する命令です。
`prefetch` が「リソースをキャッシュするだけ」なのに対し、`prerender` は「HTMLをパースし、JSを実行し、DOMツリーを構築し、サブリソースまで取得する」という、まさに「ページを丸ごと裏で開く」挙動をとります。
ブラウザの裏側で起きていること
ブラウザはヒントを受け取ると、隠れたバックグラウンドタブを生成し、そこで該当ページのレンダリングを開始します。ユーザーが実際にリンクをクリックした瞬間、そのバックグラウンドタブがフォアグラウンドに切り替わる（スワップされる）ことで、表示コストが「ゼロ」になるという仕組みです。
しかし、ここで注意が必要なのは、「もしユーザーがそのページに遷移しなかったら？」という点です。無駄にCPUとメモリを消費した分がすべてサーバーとクライアントの負債として残るため、使い所を見極める必要があります。
—
2. 実践的な実装コード：ベストプラクティス
現場でこのタグを導入する際、最も大切なのは「確度の高い予測」です。全リンクに仕込むような愚行は避け、決済完了後の「マイページへ」や、検索結果から「詳細ページへ」のような、遷移率が極めて高い箇所に限定して使うのが鉄則です。
—
3. なぜ「諸刃の剣」なのか？（現場でハマるポイント）
`prerender` を安易に使うと、以下のような「現場あるある」な事故に繋がります。
1. 解析ツールへの影響:
バックグラウンドでレンダリングされる際、GA4などの計測タグが発火してしまう可能性があります。PV数が異常に跳ね上がるようなことがあれば、それは`prerender`の副作用かもしれません。
2. サーバー負荷の増大:
裏側でページを開くということは、当然サーバーへリクエストが飛びます。アクセスが集中するページで無差別にこれを行うと、自らDOS攻撃を仕掛けているような状況になりかねません。
3. ブラウザの制約:
メモリが逼迫している端末では、ブラウザは`prerender`の指示を無視します。「速くしたい」という願いは、ブラウザ側のOSリソース管理という絶対的な権限の下にあることを忘れてはいけません。
—
4. 次世代へのシフト：Speculation Rules API
実は、現在Chromeを中心としたブラウザは、この `rel=”prerender”` に代わる [Speculation Rules API](https://developer.mozilla.org/ja/docs/Web/API/Speculation_Rules_API) の採用を強く推奨しています。
JSON形式で「どのリンクを、どのような条件でプリレンダリング/プリフェッチするか」を詳細に記述できるため、従来の手法よりも柔軟かつ安全です。
今から新規実装を行うのであれば、`link rel=”prerender”` よりも、この `Speculation Rules API` の導入を検討することを強くおすすめします。
—
まとめ：エンジニアとして持つべき視点
フロントエンドのパフォーマンスチューニングは、スペックとUXのトレードオフです。`prerender` は非常に強力な武器ですが、闇雲に振り回せば、ユーザーのデバイスを重くし、サーバーを疲弊させるだけの「自己満足な最適化」になりかねません。
1. 遷移率（CTR）を分析する: 遷移する可能性が低い場所には使わない。
2. ユーザーの環境を想像する: モバイルや低スペック端末での影響を考慮する。
3. 新しい技術を追う: `link` タグの限界を知り、`Speculation Rules API` へと目を向ける。
こうした「泥臭い予測」と「技術への理解」の積み重ねこそが、洗練されたWeb体験を作る近道です。さあ、皆さんのプロジェクトでも、まずは「ここぞ」という一箇所から、この魔法を試してみてはいかがでしょうか。
コメント