やあ、こんにちは。Webブラウザという「魔法の箱」の裏側へようこそ。
Webサイトを表示する時、私たちは当たり前のようにURLを入力してエンターキーを叩くけれど、ブラウザの中では実はものすごい速さで「冒険」が行われているんだ。今日は、その冒険の始まりを劇的にスムーズにする魔法の呪文、`dns-prefetch` と `preconnect` について、コーヒーでも飲みながらゆっくり話そうか。
—
1. ブラウザの「お買い物」に例えてみよう
Webページを表示するということは、ブラウザがインターネットという巨大な商店街へ買い物に行くようなものだと思ってほしい。
HTMLファイルという「買い物リスト」を手にしたブラウザは、そこに書かれた画像やフォント、外部の広告などを集めるために、あちこちの「お店（サーバー）」へ走っていく。
ここで問題になるのが「移動時間」と「待ち時間」だ。
1. DNS解決（住所の確認）: 「あのお店どこにあるの？」と案内所に聞く時間。
2. TCP接続（握手）: お店のドアを叩いて、「こんにちは、商品を見せてください」と挨拶を交わす時間。
3. TLS接続（鍵の受け渡し）: 「安全な取引のために、ここで鍵を確認しましょう」というセキュリティの手続き。
実は、この「挨拶」や「鍵の確認」だけで、ブラウザは数ミリ秒〜数百ミリ秒の時間を浪費してしまう。ページを開いた瞬間に真っ白な画面が続く原因の多くは、この「準備体操」に時間がかかっているからなんだ。
—
2. dns-prefetch：道案内を先に済ませておく
`dns-prefetch` は、言わば「あらかじめ地図を頭に入れておく」ようなものだ。
「この先、あそこのお店に行くことになるな」とわかっているなら、ブラウザがページを表示する準備をしている最中に、こっそりと案内所へ行って「〇〇ドメインの住所はどこ？」と聞いてきてくれる。
- どんな時に使う？: 外部のドメイン（Google FontsやCDNなど）を読み込む予定がある時。
- メリット: 住所を知るための待ち時間が消える。
—
3. preconnect：お店の前まで行ってドアを開けておく
`preconnect` は、もっと踏み込んだ魔法だ。「お店の前まで行って、ドアを開けて挨拶まで済ませておく」ことだよ。
DNS解決（住所確認）はもちろん、TCPの握手も、TLSのセキュリティ通信も全部先に済ませておく。ブラウザが「よし、商品を取りに行くぞ！」と決めた瞬間、そこにはもう開かれたドアが待っている。
- どんな時に使う？: 画像やスクリプトなど、かなり頻繁に通信する重要な外部ドメインに対して。
- 注意点: 便利な反面、あまりに多くのドメインにこれを使うと、ブラウザが「忙しすぎてパンク」してしまう。本当に必要な、ここぞというドメインに絞るのが、熟練のチーフアーキテクトとしての心得だよ。
—
4. 現場のリアル：どう使い分ければいいの？
初学者の頃は、「じゃあ全部preconnectすればいいじゃん！」と思うかもしれないね。でも、それは少し危険なんだ。ブラウザのCPUやメモリというリソースは限られているから、たくさんの接続を同時に準備させると、かえってメインの表示が遅くなることもある。
僕が現場でよく使う「黄金比」はこんな感じだ。
1. 最重要ドメインには `preconnect`: メインのフォント配信サーバーや、一番大きな画像が置いてあるCDNなど。「ここがないとサイトが始まらない」という場所には迷わずこれ。
2. それ以外の外部ドメインには `dns-prefetch`: 「後で使うかも？」という程度の場所には、軽めの `dns-prefetch` で済ませる。
実践的なコードの書き方
HTMLの `
` 内にこのように並べて書くのが、今のWeb開発のスタンダードだよ。
—
最後に：完璧を求めすぎないで
Webブラウザの最適化は、パズルのようなもの。最初は難しく感じるかもしれないけれど、一つひとつ仕組みを理解すれば、自分の書いたコードが以前よりキビキビ動くようになる。その瞬間の快感は、何物にも代えがたいよ。
もし設定を間違えても、Webサイトが壊れることはないから安心して。まずは自分のサイトで「どのドメインと通信しているかな？」と調べてみて、一番重そうなところに `preconnect` を一つだけ置いてみる。そこから始めてみよう。
君のWebサイトが、誰かの画面で「パッ」と素早く表示される。その小さな魔法のお手伝いができれば、僕としても最高に嬉しいよ。
また何かあったら、いつでも聞きに来てね。応援しているよ！
コメント