「あのサイト、表示が速い！」の秘密。`dns-prefetch`でWebサイトをスマートに高速化しよう
Webサイトを作っていると、「もっとサクサク動くようにしたい」「読み込みの待ち時間を減らしたい」という悩み、必ずぶつかりますよね。
今日は、そんな悩みを解決する隠れた名脇役、``についてお話しします。名前だけ聞くと「なんか難しそう…」と思うかもしれませんが、実はとってもシンプル。日常の「ある行動」に例えて解説していきますね。
—
Webサイトの表示は「お買い物」と同じ？
Webサイトを読み込むとき、ブラウザ（ChromeやSafariなど）は裏側でめちゃくちゃ忙しく働いています。
例えば、あなたがAmazonで買い物をするときを想像してみてください。
1. 「Amazonの住所（ドメイン）」を調べる
2. その住所へ向かう
3. 商品（画像やデータ）を受け取る
Webの世界でもこれと同じことが起きています。特に時間がかかるのが、「1. 住所を調べて、その場所がどこにあるかを確認する（DNS解決）」というプロセスなんです。
初めて行くお店の場所を地図アプリで検索するのって、少し手間取りますよね？ あれと同じで、ブラウザも初めて接続するドメインに対して「えーっと、ここのIPアドレスはどこかな…」と確認作業が必要なんです。
そこで登場！「dns-prefetch」の出番です
`dns-prefetch`は、いわば「目的地への行き方を、事前にメモしておく」ようなもの。
「あとでこのサイトにアクセスするから、今のうちに住所だけ調べておいて！」とブラウザにこっそり伝えておくことで、いざアクセスする瞬間の「住所検索タイム」をショートカットできるんです。
なぜ `preconnect` じゃダメなの？
「もっと強力なやつ（`preconnect`）があるよ！」という声も聞こえてきそうですが、`preconnect`は住所を調べるだけでなく、「玄関のドアを開けて、挨拶まで済ませておく」くらい準備万端にするため、実は少しだけブラウザへの負担が大きいです。
一方、`dns-prefetch`は「住所を調べるだけ」という非常に軽い作業。だからこそ、「とりあえずここも、あそこも調べておこう！」とたくさん指定しても安心なのが魅力なんですよ。
—
どうやって書くの？（実践編）
書き方はとっても簡単です。HTMLの `
` タグの中に、ポチッと一行書き加えるだけ。これだけで、ブラウザは裏側でせっせと「あ、このサイトは後でこのドメインに繋ぐんだな」と準備を始めてくれます。
ここだけ気をつけて！
- 「何でもかんでも」は逆効果： あまりに多くのドメインを指定しすぎると、ブラウザが処理しきれなくなります。本当にアクセスすることが確定している、外部サービス（SNSのボタン、広告、フォント配信先など）に絞るのがコツです。
- HTTPSサイトなら「//」を忘れずに： `href` の中身には、`https:` を含めない形式（`//example.com`）で書くのが一般的です。
—
まとめ：小さな積み重ねが、大きな快適さに
「たったこれだけで速くなるの？」と思うかもしれません。でも、Webの高速化はこうした小さな工夫の積み重ねです。
- DNS解決は、目的地への「地図確認」。
- `dns-prefetch` は、それを事前に済ませる「先読みの魔法」。
- 「軽さ」が武器なので、安心して使ってみよう！
もしあなたのサイトで「Googleフォントを使っている」「外部の画像サーバーから写真を持ってきている」という場所があれば、ぜひこのコードを仕込んでみてください。
「あれ、なんとなく前より表示がスムーズかも？」という小さな変化。その感覚こそが、フロントエンドの醍醐味です。大丈夫、難しいことは考えすぎず、まずは一行、試してみてくださいね！
あなたの作ったWebサイトが、誰かにとっての「サクサク快適な体験」になりますように。応援しています！
コメント