PreconnectおよびDNS-Prefetchリソースのヒントの使用を説明します。

PreconnectおよびDNS-Prefetchリソースのヒントの使用を説明します。

PreconnectとDNS-Prefetchは、Web開発者がWebサイトの読み込み速度を最適化するために使用する2種類のリソースヒントです。これらのヒントは、外部リソースへの接続を処理する方法に関するブラウザに指示を提供し、それによりレイテンシを削減し、ユーザーエクスペリエンスを改善します。

• preconnect： preconnectヒントは、ブラウザに特定のオリジンへの接続をできるだけ早く起動するように指示します。これには、DNS解像度、TCPハンドシェイク、およびオプションでTLS交渉が含まれます。これらのステップを事前に開始することにより、その起源からのリソースの実際の要求を、時が来たときにはるかに速くすることができます。 Preconnectは、サードパーティのAPIやCDNへの接続など、重要であり、すぐに必要であることが知られているリソースに特に役立ちます。
• DNS-Prefetch： dns-prefetchヒントは、ブラウザに指定されたドメインのDNS解像度を事前に実行するように指示します。 DNS解像度とは、ドメイン名をIPアドレスに変換するプロセスであり、時間がかかる場合があります。以前にDNSを解決することにより、IPアドレスが既にわかっているため、そのドメインからリソースを取得するのにかかる時間は後で削減されます。

両方のヒントは、html <link>タグを使用して実装され、それぞれ「preconnect」または「dns-prefetch」に設定されたrel属性と、 href属性がターゲットドメインに設定されています。

PreconnectとDNS-Prefetchを使用することのパフォーマンスの利点は何ですか？

PreconnectおよびDNS-Prefetchリソースのヒントを使用すると、いくつかのパフォーマンスの利点があります。

• レイテンシの削減： DNS解像度、TCPハンドシェイク、およびTLSの交渉を早期に早期に開始することにより、またはDNS-Prefetchを使用したDNS解像度だけで、接続を確立してリソースをフェッチするのにかかった時間は大幅に減少します。これにより、特に多くの外部リソースがあるサイトでは、ページの読み込み時間が速くなります。
• ユーザーエクスペリエンスの向上：負荷時間が短縮されているため、ユーザーは待機時間が短くなり、バウンス率の低下とエンゲージメントの増加につながる可能性があります。コンテンツのシームレスなロードは、ユーザーの関心と満足度を維持するために重要です。
• 効率的なリソースの読み込み： Preconnectは、リソースが要求されたときに接続が既に確立されていることを確認することにより、重要なリソースをより迅速にロードするのに役立ちます。 DNS-Prefetchは、ブラウザが追加のリソースを取得する場所を知っていることを保証し、最初の待機時間を短縮します。
• モバイルパフォーマンスの向上：ネットワーク接続が遅いため、モバイルデバイスの遅延が多いことがよくあります。 PreconnectとDNS-Prefetchは、以前に接続プロセスを開始することでこれを軽減するのに役立ち、モバイルデバイスのパフォーマンスに顕著な違いをもたらします。

PreconnectとDNS-Prefetchの機能はどのように異なりますか？

PreconnectとDNS-Prefetchの両方は、外部リソースの負荷を最適化することを目的としていますが、範囲と機能が異なります。

• 運用範囲：

  • Preconnect： DNS解像度を超えて、TCPの握手の開始を含め、リソースがHTTPSの場合、TLS交渉。このヒントは、リソースが必要になることがわかっているときに使用され、接続の準備ができていることを望みます。
  • DNS-Prefetch： DNS解像度のみを実行します。リソースが必要なドメインをほのめかすのに役立ちますが、いつ、またはリクエストされるかどうかはわかりません。これは、Preconnectよりも積極的ではなく、必要なネットワークオーバーヘッドが少なくなります。

• 使用シナリオ：

  • Preconnect： CDNからの画像やサードパーティサービスのスクリプトなど、間違いなく必要になる重要なリソースに最適です。
  • DNS-PREFETCH：外部ページへのリンクやユーザーインタラクションにロードされる可能性のあるリソースなど、ページの読み込みプロセスの後半で必要になる可能性のあるドメインに使用するのが最適です。

• ネットワークオーバーヘッド：

  • preconnect：接続プロセスでより多くのステップを通過するため、ネットワークオーバーヘッドが高くなります。不必要な接続を避けるために慎重に使用する必要があります。
  • DNS-Prefetch： DNSのみを解決するため、ネットワークオーバーヘッドが低くなります。必要になる可能性のあるドメインには、より自由に使用できます。

PreconnectとDNS-Prefetchを一緒に使用して、Webサイトの読み込み時間を最適化できますか？

はい、PreconnectとDNS-Prefetchを一緒に使用して、Webサイトの読み込み時間をさらに最適化できます。それらを組み合わせて使用​​すると、各アプローチの強みがレバレッジを行います。

• 戦略的使用：間もなく間違いなく必要になる重要なリソースにPreconnectを使用し、DNS-PREFETCEは、より重要なリソースまたは条件付きリソースのためにたとえば、セカンダリドメインまたはフォールバックドメインにDNS-Prefetchを使用しながら、プライマリCDNを事前に接続できます。
• レイヤード最適化：必要性が予想されるドメインのDNS-Prefetchから始めて、リソースが実際に必要な場合に近い序点を使用します。この層状のアプローチは、DNS解像度から早めに開始し、より徹底的な接続準備でフォローアップすることで時間を節約できます。
• リソースのバランスをとる： Preconnectはリソースの読み込みを大幅に高速化できますが、DNS-Prefetchよりもオーバーヘッドが大きくなります。必要に応じてDNS-Prefetchを使用することにより、リソースの使用量のバランスをとりながら、パフォーマンスの利点を獲得できます。

• 実装の例： HTMLに両方の実装を実装する方法は次のとおりです。

   <code class="html"> <!-- Preconnect for critical resources --> <link rel="preconnect" href="https://cdn.example.com"> <link rel="preconnect" href="https://api.example.com"> <!-- DNS-Prefetch for potential resources --> <link rel="dns-prefetch" href="https://secondarycdn.example.com"> <link rel="dns-prefetch" href="https://fallbackapi.example.com"> </code>

PreconnectとDNS-Prefetchを組み合わせることにより、開発者は特定のリソースニーズの両方を説明するより効率的な読み込み戦略を作成し、最終的にWebサイトのパフォーマンスとユーザーエクスペリエンスを改善できます。

以上がPreconnectおよびDNS-Prefetchリソースのヒントの使用を説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。