【実務・中級編】 PreconnectとDNS-prefetchの最適化 – Webブラウザの仕組み実践ガイド

ブラウザの「先読み」を極める：PreconnectとDNS-prefetchでLCPを削り出せ

フロントエンドのパフォーマンスチューニングにおいて、一番の敵は「待ち時間」だ。ネットワークの往復時間（RTT）は、光の速さという物理的な制約がある以上、どうあがいてもゼロにはできない。

しかし、ブラウザのアーキテクチャを理解していれば、この「避けられない待ち時間」をレンダリングのクリティカルパスから巧妙に追い出すことができる。今日は、特に強力な武器である `dns-prefetch` と `preconnect` について、現場のリアルな視点から深掘りしていこう。

—

ブラウザの裏側で起きている「重厚な手続き」

まず、ブラウザが外部リソース（例えばGoogle FontsやAPIサーバー）に接続する際に何をしているか、想像してみてほしい。単にURLを叩くだけではない。

1. DNS Lookup: ドメイン名からIPアドレスへの変換。
2. TCP Handshake: サーバーとの同期・確認のやり取り。
3. TLS Negotiation: HTTPS通信のための暗号化ネゴシエーション。

これら3つのステップを、ブラウザはHTMLパース中に外部リソース（`