必要なオリジンに事前接続する

Lighthouse レポートの [オポチュニティ] セクションには、主要なリクエストがすべて一覧表示される まだ <link rel=preconnect> でフェッチ リクエストを優先していない場合:

Lighthouse 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 プリフェッチのリソースヒントを 追加することもできます

リソース