誰もがウェブパフォーマンスの予算を削減することを目標としていますが、サードパーティのサービスを利用することも必要です。これらのサービスを使用する場合、「DNSルックアップ「」の回数は、サービスの数に応じて、予算のかなりの部分を占める可能性があります。これらの負荷は、First Contentful Paint (FCP) を含むページ速度のさまざまな側面に影響します。
これら 2 つの概念の目的は、サードパーティの接続時間を最適化することです。これら 2 つの概念の違いを理解する前に、サードパーティのリクエストが行われたときに何が起こるかを理解する必要があります。
- ドメインが解決され、IP アドレスが取得されます。
- サーバーとの接続が確立されました。
- セキュリティを確保するために接続は暗号化されます。
この階層は、サードパーティの接続ごとに繰り返されます。ここで、preconnect と dns-prefetch の違いが関係してきます。
- 事前接続: 上記の 3 つの手順がすべて事前に構成されていることを確認します。
- DNS プリフェッチ: 最初のステップでドメイン名を IP アドレスに変換するためだけに機能します。
ご覧のとおり、preconnect はより包括的で有益です。ただし、すべてにコストがかかります。すべての接続に preconnect を使用すると、ページの最適化に悪影響を与える可能性があります。そのため、重要な接続にのみpreconnectを使用し、その他のサードパーティ接続にはdns-prefetchを使用する必要があります。.
使用方法の概要
上記の情報を踏まえて、使用方法を簡単にまとめると次のようになります。
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">ブラウザの互換性
使用法について説明する際には、ブラウザの互換性についても言及することが重要です。これら 2 つの密接に関連した概念は、最新のブラウザで広くサポートされていますが、使用法は完全に重複しているわけではありません。 Preconnectは約97%のブラウザでサポートされています一方、 dns-prefetch は 83% のブラウザでサポートされています (2024 年 XNUMX 月現在).
ウェブパフォーマンス予算への貢献
- プレコネクトにより、合計速度が 100-500ms.
- DNSプリフェッチは、各接続を高速化します。 20-120ms.
より満足のいくローカルな例を提供するために、独自のテストを実施する予定です。
最後に、この記事を準備する上で私の理解に大きく貢献してくれた Ceyhun Enki Aksan のブログを推薦し、感謝したいと思います。 Ceyhun Enki Aksan のブログ。
