Google Lighthouse のパフォーマンス レポートでは、次の推奨事項が示されました。
「任意のオリジンへの複数の費用のかかるラウンドトリップを回避する」...次に、8 つのオリジンのリストに進みます。
そこで、サイトのセクションの上部に次のコードを追加しまし<head>た。href は各オリジンに対応しています。
<link rel='preconnect' href='https://connect.facebook.net' />
<link rel='preconnect' href='https://img.secureserver.net' />
<link rel='preconnect' href='https://advertise.bingads.microsoft.com' />
<link rel='preconnect' href='https://advertiseonbing.blob.core.windows.net' />
<link rel='preconnect' href='https://www.gstatic.com' />
<link rel='preconnect' href='https://js.calltrk.com' />
<link rel='preconnect' href='https://px.ads.linkedin.com' />
<link rel='preconnect' href='https://www.facebook.com' />
<link rel='preconnect' href='https://accounts.google.com' />
<link rel='dns-prefetch' />また、それと他のブラウザのヒントを組み合わせて試してみました。
ただし、しばらくしてから再度実行しても、Lighthouse レポートには何も変化がありませんでした。Lighthouse でその問題を解決し、完璧なレポートに一歩近づくことができるように、誰かが私を正しい方向に導くことができますか?!
編集: これを行っても Lighthouse Report に違いが生じない理由は推測できます。それは、事前接続が完了する前にドキュメントでリソースが呼び出されるためです。したがって、技術的には少し早く開始され、数ミリ秒節約されますが、ドキュメントの残りの部分は非常に小さく、プリフェッチまたはプリコネクトが完了する前にそれらのリソースを要求します。論理的に聞こえますか？