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"> は、接続に関連するもう 1 つの <link> タイプです。これは DNS ルックアップのみを処理しますが、ブラウザのサポート範囲が広いため、適切なフォールバックとして使用できます。使い方はまったく同じです。
<link rel="dns-prefetch" href="https://example.com" />.
スタック固有のガイダンス
Drupal
事前接続または DNS プリフェッチのリソースヒントをインストールして構成できるように、ユーザー エージェントのリソースヒントをサポートするモジュールを使用します。
Magento
テーマのレイアウトを変更し、事前接続または DNS プリフェッチのリソースヒントを追加します。