Lighthouse レポートの [オポチュニティ] セクションには、主要なリクエストがすべて一覧表示される
まだ <link rel=preconnect> でフェッチ リクエストを優先していない場合:
ブラウザの互換性
<link rel=preconnect> は、ほとんどのブラウザでサポートされています。詳しくは、
ブラウザの互換性。
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
ユーザー エージェント リソースヒントをサポートするモジュールを使用する です。これにより、事前接続または DNS プリフェッチのリソースヒントをインストールして構成できます。
Magento
テーマのレイアウトを変更する 事前接続または DNS プリフェッチのリソースヒントを 追加することもできます