問題タブ [web-performance]

ページの HTML コードに link[rel=preconnect] を追加します。しかし、事前接続が機能しているかどうかを確認するにはどうすればよいですか?

DevTools の Network パネルに Preconnect が表示されません。chrome://tracing にも表示されません。

このイベントを表示するには、どのツールを使用できますか?

ヘッダーを使用しLinkてフォント ファイルをプリロードしていますが、ブラウザーのキャッシュが空の場合にうまく機能します。ただし、「リピート ビュー」では、フォント ファイルが 2 回読み込まれ、Chrome に警告メッセージが表示されます。どうすれば修正できますか？

Linkヘッダーと CSS ファイルは両方とも、完全な相対 URL を指しています。

最初のビュー:

繰り返し表示:

Chrome デベロッパー ツールのネットワーク タブは、ページ アセットの読み込みを記録します。

優先度列に関して、次のことを理解しようとしています。

1. アセットに優先度を割り当てる方法を決定する要因は?

2. コードを介して優先度を変更または割り当てることはできますか?

次のドキュメントを調べましたが、優先度列への参照が見つかりません。

https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading

私は現在 Web プロジェクトに取り組んでおり、サブリソースのドメインへの事前接続に関するアドバイスを探しています。

私の仮定では、理想的には、すべてのサブリソースが同じプロトコルを使用してドメインから提供され、サーバーへのラウンドトリップが節約されるはずです。ただし、私が作業しているコードの一部の領域では、一部のリソースが http 経由でロードされ、他の領域ではリソースが https 経由でロードされています。

この質問の目的のために、コードの一部のセクションにアクセスできないと想像してください。

事前接続の利点を得るには (今から同じルートを使用する他のユーザーと連携するまでの間)、以下を含めることをお勧めします。

または、次のプロトコル相対 URL を使用します。

したがって、プリロードhttps://w3c.github.io/preload/は、宣言型マークアップを介してタグとして定義できます

または HTTP ヘッダーとして

しかし、両者の間のトレードオフは何ですか? タグはどのような状況で使用する必要があり、その逆はどのような状況で使用する必要がありますか?

私は Visual Studio 2015 Web パフォーマンス テスト (.webtest) を使用しており、(内部テキストを介して) チェック番号を参照する 8 桁の番号をコンテキスト パラメーターにキャプチャするための抽出規則を用意しています。

番号が 6 桁のみの場合、小切手番号の前に 2 つの空白があります。フォーム パラメータで小切手番号を使用しており、これらの空白をゼロ (0) に切り替える必要があるため、これにより問題が発生します。

私の質問は、比較を処理する最良の方法は何ですか? コンテキスト パラメーター ("CheckNBR" という名前) を編集する方法はありますか? または、パラメーターを操作するために抽出規則を上書きできますか? 代わりに、カスタム抽出ルールを作成することはできますか? 私はこれについてあらゆる方向に進んでいますが、どのオプションが最適かはわかりません。

[更新] 最善の方法を決定する代わりに、質問をコンテキスト パラメーターの編集に向け直しています。抽出ルールからパラメータを設定したら、どのように編集できますか?