web-dev-qa-db-ja.com

preconnect vs dns-prefetchリソースヒント

https://www.w3.org/TR/resource-hints/

私が正しく理解していれば、両方を使用して早期に接続を開始し、後でリソースをより速くロードします。

事前接続は「もっと」行うだけです。

ブラウザのサポートが優れていることとは別に、事前接続ではなくdns-prefetchを使用する理由はありますか？また、可能な場合はpreconnectを使用し、そうでない場合はdns-prefetchにフォールバックするために、同じリンクタグで両方のrelを使用するWebサイトを見てきました。

<head>
  <link
    rel="dns-prefetch preconnect"
    href="https://fonts.gstatic.com"
    crossorigin
  >
</head>
google-chromenetworkingwebdnslatency
25
Robin Drexler

私は最近少しトピックを研究してきましたが、これまでのところ（理論的な）結論は次のとおりです。

ブラウザーの実際のグローバル使用をカウントする場合、ブラウザーサポートの違いは2018年半ばには無視できます（ 〜73％ vs 〜74％ ）

dns-prefetch = DNSおよびpreconnect = DNS + TCP +TLS。DNSルックアップの実行は非常に安価です（DNSサーバーへの単純なクエリ応答、 TCPおよびTLSにはサーバーリソースが含まれます）.

したがって、実際の違いは、サーバーのフェッチを知っている場合willが確実に発生し、preconnectが良いことです。まれにしか発生せず、大量のトラフィックが予想される場合、preconnectは多くの無駄なTCPおよびTLSが機能し、dns-prefetchがより適している可能性があります。

例えば：

  • ページが各ロードでhttps://backend.example.com/giveMeFreshDataを要求し、応答がキャッシュ可能でない場合、preconnectが適しています
  • ページがhttps://statics-server.example.com/some-image.jpgやhttps://statics-server.example.com/some-css.cssなどの静的リソースのみを要求し、そのリソースがユーザーのブラウザキャッシュから取得される可能性が非常に高い場合（非常に同じリソースが多くのページで使用され、ユーザーはウォームキャッシュを使用してこのような多くのページの読み込みをトリガーします。他のリソースはそのOriginからフェッチされません）、preconnectは多くの不要なTCP =サーバー上の接続（数秒後に放棄されますが、そもそもそれらは必要ありませんでした）およびTLSハンドシェイク（ただし、その場合、preloadは正確なことがわかっている場合はオプションです） URLとリソースは非常に重要です）。
  • ただし、Webサイトのトラフィックが小さい場合、この違いによる大きな影響はありません。したがって、前述の内容に関係なく、preconnectはトラフィックの少ないWebサイトに適しています。

いつものように、ユースケースについて考え、展開、測定、微調整するのが最善です。

22
jakub.g

1 Preconnect

最後に説明したいリソースのヒントは、事前接続です。 Preconnectを使用すると、HTTP要求が実際にサーバーに送信される前に、ブラウザーが早期接続をセットアップできます。これには、DNSルックアップ、TLSネゴシエーション、TCPハンドシェイクが含まれます。これにより、ラウンドトリップ遅延がなくなり、ユーザーの時間を節約できます。

2プリフェッチ

プリフェッチは優先度の低いリソースヒントであり、これにより、ブラウザは後で必要になる可能性があるバックグラウンド（アイドル時間）でリソースをフェッチし、ブラウザのキャッシュに保存できます。ページの読み込みが完了すると、追加のリソースのダウンロードが開始され、ユーザーがプリフェッチされたリンクをクリックすると、すぐにコンテンツが読み込まれます。

2.1リンクのプリフェッチ

ユーザーがリソースを要求すると仮定すると、リンクのプリフェッチにより、ブラウザーはリソースをフェッチしてキャッシュに保存できます。ブラウザは、HTMLまたはHTTPヘッダーリンクでプリフェッチを探します。

2.2 DNSプリフェッチ

DNSプリフェッチにより、ブラウザは、ユーザーが閲覧している間にバックグラウンドでページのDNSルックアップを実行できます。これにより、ユーザーがリンクをクリックするとDNSルックアップが既に実行されるため、待ち時間が最小限に抑えられます。 rel = "dns-prefetch"タグをリンク属性に追加することにより、特定のURLにDNSプリフェッチを追加できます。 Googleフォント、Googleアナリティクス、CDNなどでこれを使用することをお勧めします。

2.3事前レンダリング

プリレンダリングは、ユーザーが次にナビゲートできるリソースを収集するという点で、プリフェッチと非常に似ています。違いは、事前レンダリングでは実際にページ全体、つまりドキュメントのすべてのアセットがバックグラウンドでレンダリングされることです。

詳細： https://www.keycdn.com/blog/resource-hints/

結論

dns-prefetchとpreconnectの主な違い

Dns-prefetchとpreconnectの違いは、dns-prefetchはDNSルックアップのみを行い、preconnectはDNSルックアップ、TLSネゴシエーション、およびTCPハンドシェイクを行うことです。これは、リソースをダウンロードする準備ができたら、追加の2 RTT。

重要な側面は、dns-prefetchのサポートが事前接続のサポートよりもはるかに大きいことです。

ここにいくつかの具体的な例を見つけることができます： https://responsivedesign.is/articles/prefetch-preconnect-dns-priority/

8
Pascut