| layout | title | description | date | updated |
|---|---|---|---|---|
layouts/doc-post.njk |
要求されるオリジンへの事前接続 |
uses-rel-preconnect監査について学習します。
|
2019-05-02 |
2020-05-06 |
LighthouseレポートのOpportunitiesセクションには、<link rel=preconnect>でフェッチリクエストを優先していないすべての主要なリクエストの一覧が表示されます。
<link rel=preconnect>はほとんどのブラウザでサポートされています。ブラウザの互換性を参照してください。
重要なサードパーティオリジンへの早期接続を確立するために、preconnectまたはdns-prefetchリソースヒントを追加することを検討してください。
<link rel="preconnect">は、ページが別のオリジンへの接続を確立する意図があり、プロセスをできるだけ早く開始することをブラウザに通知します。
接続の確立には、DNSルックアップ、リダイレクト、およびユーザーの要求を処理する最終サーバーへの数回のラウンドトリップが含まれる可能性があるため、特に接続を保護する際に、低速ネットワークであればかなりの時間がかかることがよくあります。
これらすべてを事前に処理しておけば、帯域幅の使用に悪影響が及ぶことなくアプリケーションの読み込みがより迅速に行われている感触をユーザーに与えることができます。接続の確立にかかる時間の大伴は、データやり取りではなく、待機に費やされるためです。
ページにリンクタグを追加するのと同じくらい簡単に、ブラウザに意図を通知することができます。
<link rel="preconnect" href="https://example.com">
これでブラウザはページがexample.comに接続し、コンテンツを取得する意図を認識できます。
<link rel="preconnect">はかなり低コストですが、特に安全な接続では貴重なCPU時間を消費する可能性があることに注意してください。これは特に、ブラウザが閉じられる際に、接続が10秒以内に使用されていない場合に問題であり、早期接続の処理がすべて無駄になってしまいます。
一般的には、<link rel="preload">を使用してみてください。これは、より包括的にパフォーマンスを調整できますが、次のようなエッジケースの場合は、ツールベルトに<link rel="preconnect">を保持してください。
<link rel="dns-prefetch">は、接続に関連する<link>のタイプの一つです。これはDNSルックアップのみを処理しますが、より幅広いブラウザーサポートを備えているため、優れたフォールバックとして機能する可能性があります。使用方法はまったく同じです。
<link rel="dns-prefetch" href="https://example.com">.ユーザーエージェントのリソースヒントをサポートするモジュールを使用すると、事前接続またはDNSプリフェッチリソースヒントをインストールして構成できます。
テーマのレイアウトを変更し、事前接続またはDNSプリフェッチリソースヒントを追加します。