Webページの読み込みを劇的に速くする！「preconnect」という魔法の杖を知っていますか？
こんにちは！Web制作の学習、順調に進んでいますか？
HTMLやCSSを覚えたての方にとって、まずは「画面に思った通りに表示させる」ことが最優先ですよね。でも、少し慣れてくると「読み込み速度」という壁にぶつかるはずです。
「自分のサイト、なんだか開くのがワンテンポ遅いかも……」
そんな悩みを持つあなたに、今日は「preconnect（プリコネクト）」という、魔法のようなヒントをお教えします。これを知っているだけで、あなたのサイトの「体感速度」はグッと変わりますよ！
—
なぜWebサイトは「遅い」と感じるのか？
まずは、Webサイトが表示されるまでの仕組みを「お買い物」に例えてみましょう。
あなたがネットショップで注文をしたとします。
1. 住所を確認する（DNSルックアップ）：相手の住所（ドメイン）がどこにあるか調べる。
2. 電話をかける（TCPハンドシェイク）：「注文いいですか？」と相手と繋がる。
3. SSL/TLS接続（暗号化）：お互いの身分を証明し、安全な回線を確保する。
4. やっと注文開始（データのダウンロード）：商品が送られてくる。
私たちが普段使っているWebサイトは、実はこの「事前のやり取り」を、外部にある別のサーバー（Googleフォントや広告、分析ツールなど）に対して毎回行っています。
もし、その相手が遠くにいたり、回線が混んでいたりしたら？
「注文したいのに、繋がるまでになかなか時間がかかる……」という状態になりますよね。これが、Webサイトが遅く感じる正体です。
—
「preconnect」は、いわば「予約電話」
そこで登場するのが、HTMLの `` です。
これは、ブラウザに対して「この後、あっちのサーバーに繋ぐから、今のうちに電話をかけて繋いでおいて！」と先回りして指示を出すための命令です。
あらかじめ「電話」を繋いでおけば、いざデータが必要になった瞬間に、即座に「注文」を始めることができます。この「待ち時間ゼロ」の体験が、ユーザーには「サクサク動く！」という感動を与えるんです。
—
実際に書いてみよう！
使い方は驚くほどシンプルです。HTMLの `
` タグの中に、以下のように記述するだけです。
ここがポイント！
- `href=”…”`：繋いでおきたい相手のドメイン（URL）を書きます。
- `crossorigin`：フォントなど、少し特殊な接続が必要な場合は、この属性を付けておくと「安全に繋がれる状態」を作れます。
—
ちょっと待って！「全部」に付ければいいの？
ここで注意点が一つ。
「じゃあ、全部の外部サービスにpreconnectを付ければ爆速じゃん！」と思われたかもしれません。でも、それはNGなんです。
電話をかけるのは、それなりにブラウザの体力（リソース）を使います。たくさんの場所に一気に電話をかけると、逆にスマホやPCが重くなってしまうことも。
「本当に頻繁に繋ぐ、優先度の高いサーバー」だけに絞って使うのが、プロの技です。
- Google Fonts
- 広告配信サーバー
- 解析ツール（Google Analyticsなど）
といった、サイトの表示に欠かせないものに使うのがベストですよ。
—
最後に：完璧を目指さなくて大丈夫
Web開発の現場では、こうした細かい最適化を積み重ねて「0.1秒の速さ」を競い合っています。でも、最初から全てを完璧にする必要はありません。
まずは「外部のサーバーと繋がるとき、実は裏でこんなことが起きているんだ」というイメージを持つこと。そして、今回紹介した `preconnect` を一つ試してみること。それだけで、あなたはもう「ユーザー体験」を深く考えられるエンジニアの仲間入りです。
もしコードを書いていて「本当に速くなっているのかな？」と不安になったら、ブラウザの「検証ツール（デベロッパーツール）」を開いてみてください。ネットワークのタブで、接続の様子が可視化されるので、きっとワクワクするはずですよ！
わからないことがあれば、いつでもまた聞きに来てくださいね。あなたのWeb制作ライフが、より楽しく、より素晴らしいものになりますように！
コメント