次のページを一瞬で表示！魔法のような技術「rel=”prerender”」を使いこなそう
こんにちは！Web制作の世界へようこそ。
HTMLを書き始めたばかりの頃って、新しいタグを覚えるたびに「これって何ができるんだろう？」とワクワクしますよね。今日は、そんな数あるタグの中でも、「ユーザー体験を劇的に変える、ちょっと魔法みたいなヒント」についてお話ししようと思います。
その名は、``。
名前だけ聞くと難しそうですが、実はとってもシンプルで、かつ「気が利くWebサイト」を作るための強力な武器なんです。さっそく紐解いていきましょう！
—
「prerender」って、何をしているの？
まずは身近な例えで考えてみましょう。
あなたは今、行きつけのカフェにいます。いつも注文するコーヒーを、店員さんはなんとなく予測して、あなたが席に着く前に「準備」を始めてくれています。もしあなたが注文したら、すぐに熱々のコーヒーが出てくる……そんな体験、すごく嬉しくないですか？
Webサイトにおける`rel=”prerender”`は、まさにこの「先読みの気遣い」をしてくれる技術なんです。
通常、リンクをクリックすると、ブラウザは「あ、リンクが押された！じゃあサーバーにデータを貰いに行って、画面を作らなきゃ！」と、そこから準備を始めます。でも、`prerender`を使っていると、ブラウザは「どうせ次はこのページに行くんでしょ？」と察知して、裏側でこっそりページ全体をレンダリング（表示の準備）しておいてくれるのです。
結果、ユーザーがクリックした瞬間、ページがパッと表示されます。まるで魔法のようなスピード感ですよね。
—
実際に書いてみよう！
使い方は驚くほど簡単です。HTMLの`
`タグの中に、たった一行書き加えるだけ。これだけで、ブラウザは「なるほど、次はあのページに行くんだな」と理解して、バックグラウンドで準備を整えてくれます。
ここでちょっと注意点！
「じゃあ全部のリンクに貼れば最強じゃん！」と思ったあなた、鋭いですね！でも、ちょっと待ってください。
この技術、裏側で「ページ全体を読み込んで作る」という作業を行うため、スマホのデータ通信量や、端末のパワーをかなり消費します。 カフェで店員さんが全部のメニューを先出しで準備したら、食材が無駄になってしまいますよね。それと同じで、すべてのページに設定してしまうと、逆にサイトが重くなってしまう可能性があるんです。
「ここぞ！」というページ（例えば、トップページから必ず遷移する大事な申し込みページなど）に絞って使うのが、プロの知恵ですよ。
—
どういう時に使うのがベスト？
初学者の皆さんがまず試すなら、こんなシチュエーションがおすすめです。
- トップページから、一番見てもらいたい「サービス紹介ページ」への導線
- クイズサイトで、次の問題ページへ行くボタンがある場合
- 「カートへ進む」など、ユーザーがほぼ確実にクリックするボタンの遷移先
「ここから先は、ユーザーが絶対クリックするはず！」という確信がある場所に、そっと添えてみてください。
—
つまずきやすいポイント：焦らなくて大丈夫！
学習していると、「ブラウザによって挙動が違う」という壁にぶつかるかもしれません。実は、この`prerender`という機能は、ブラウザの種類やバージョンによって「よし、全力で準備するぞ！」という方針が違ったりします。
「コードを書いたのに、速くなっている実感がわかない……」と落ち込む必要はありません。これはWeb開発の世界では日常茶飯事。そんな時は、「まずはユーザーにとって心地よい導線を作る」という目的を忘れずにいれば大丈夫です。
最後に
Webサイトのパフォーマンス向上は、いわば「おもてなし」の心です。
``は、ユーザーに「待たせない」という最高のおもてなしをするための小さな工夫の一つ。最初はコードを一行書くのも緊張するかもしれませんが、こうして少しずつ「相手のことを考えたコード」を書けるようになると、Web制作がもっともっと楽しくなりますよ。
ぜひ、あなたのサイトでも試してみてくださいね。わからないことがあったら、いつでもまた聞きに来てください。応援しています！
コメント