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

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

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

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

PreconnectとDNS-Prefetchを使用することのパフォーマンスの利點(diǎn)は何ですか？

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

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

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

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

• 運(yùn)用範(fàn)囲：

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

• 使用シナリオ：

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

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

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

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

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

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

• 実裝の例： HTMLに両方の実裝を?qū)g裝する方法は次のとおりです。

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

以上がPreconnectおよびDNS-Prefetchリソースのヒントの使用を説明します。の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。