Lighthouse レポートの [改善案] セクションには、<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" />.
スタック固有のガイダンス
Drupal
Preconnect または dns-prefetch リソースヒントを追加するには、ユーザー エージェントのリソースヒント用の機能を提供するモジュールをインストールして設定します。
Magento
テーマのレイアウトを変更して、事前接続または DNS プリフェッチのリソースヒントを追加します。