ブラウザテスト結果を解釈する

ブラウザテストの結果を理解し、ウォーターフォールチャートなどの可視化でデータを解釈する方法を学びます。

ブラウザテストを実行するたびに、アプリケーションのパフォーマンスをリアルタイムで把握するのに役立つ診断セットが生成されます。

ブラウザのテスト履歴を表示する

[Test History] ページでは、カスタマイズ可能な最近の実行結果のサマリーを表示し、アプリケーションのパフォーマンスを一目で評価することができます。

テストの Test History ビューを開くには、Tests リストでその行を選択します。

特定の run の結果を見る

1 回の実行の Run results を表示するには、次のいずれかを実行します。

  • [Run results] ページで [Go to all run results] を選択し、確認する特定の run を選択します。

  • [Availability] または [Performance KPIs] チャート内のデータポイントを選択します。

  • 集約データを表示している場合(実行頻度よりも高い解像度など)は、ズームインするデータポイントを選択してから、特定の run を選択します。

  • チャートの下にある [Recent run results] の表で行を選択することもできます。

パフォーマンスKPIチャートをカスタマイズする

パフォーマンス KPI をテストするNo Content found for /db/organizations/splunk/repositories/portal-production/content/documents/ObservabilityCloud/synthetics/test-status/test-kpis.dita#df7e87604a0da415f856824dcdc52a534/test-kpis」を参照してください。

ブラウザテストの実行結果を解釈する

ブラウザテストの実行結果には次の情報が含まれています。

ウォーターフォールチャート

ブラウザテストの実行結果には、テスト実行ツールとテストの対象サイト間のインタラクションを記録する HTTP アーカイブ形式(HAR)ファイルが含まれます。HAR ファイルには、サイトの各リソースが読み込まれるまでにかかる時間が記録されます。ウォーターフォールチャートは、HAR ファイル内のデータを視覚的に表現したものです。チャートでは、ページの各リソースのタイムラインが水平バーに表示されます。

ウォーターフォールチャートには、デフォルトで実行のすべてのリクエストが表示されます。これをフィルタリングして、トランザクション、ページ、ステップに対応するエントリを表示できます。一部のステップまたはトランザクションには、関連付けられたウォーターフォールエントリがない場合があります。

リソースに関する詳細を提供するために、ウォーターフォールチャートには次の列が含まれています。

列名

説明

メソッド

GET

各リソースの HTTP メソッド。ページを読み込むリクエストのほとんどは GET リクエストですが、ユーザーや合成テストがページにデータを入力するときには POST リクエストにもなる可能性があります。

ファイル

hero.png

リソースがある URL から抽出したリソースのファイル名。セルにカーソルを合わせると、URL の全体が表示されます。

ドメイン

buttercupgames.com

リソースがホストされているドメイン。

サイズ

1.4 KB

リソースの非圧縮サイズ。

ステータス

200

リソースに対するリクエストのHTTPレスポンスコード。

タイムライン

リクエストの各パートの所要時間を示す色分けされたバー

ページロードのタイムライン。このタイムラインは、0 ms から始まり、ページの最後のリクエストのロードが完了した時点で終了します。各行の色分けされた水平バーは、リソースのロード時間を表します。各色は、リソースのロードプロセスの様々なパートを表します。タイムラインにカーソルを合わせると、詳細なリクエストタイミングがポップアップメッセージで表示されます。

ウォーターフォールチャートを使えば、次のことができます:

  • 行の詳細を展開すると、そのリソースのリクエストヘッダーとレスポンスヘッダーが表示されます。

  • タイムラインの行にカーソルを合わせると、そのリソースの詳細なリクエストタイミングがポップアップメッセージで表示されます。

  • URLに含まれるキーワードでページ内のリソースを検索します。

  • 同じアプリに APM が搭載されている場合、関連するバックエンドのスパンへの直接リンクをたどります。「合成スパンを APM スパンにリンクする」を参照してください。

  • JS、CSS、Image、Media、JSON、XMLなど、リソースのタイプによってウォーターフォールチャートをフィルタリングするには、タブを使用します。

  • [Download] ボタンのドロップダウンを使用してビデオと HAR を含むすべての実行のアーティファクトをダウンロードするか、API を使用します。

  • チャートの列を表示または非表示にする

メトリクス

ブラウザテストを実行するたびに、ウェブサイトのパフォーマンスを示す 40 以上のメトリクスが生成されます。ブラウザテストメトリクスの完全なリストは「ブラウザテストメトリクス」を参照してください。

ビデオ

注: Enterprise Editionで利用できる機能です

リアルタイムで読み込まれるサイトのビデオは、特定のテストが実行される場所とデバイスからのユーザーエクスペリエンスを示しています。このビデオを .mp4 ファイルとしてダウンロードするには、ビデオの縦の三点リーダーを選択し、[Download] を選択します。

フィルムストリップ

注: Enterprise Editionで利用できる機能です

フィルムトリップは、1 つの実行の [Run results] の上部にあります。選択した頻度で録画され、合成トランザクション、ページ、ステップによってフィルタリングされたビデオのフレームを提供します。

  • スクリーンショットの頻度を設定するには、[Frequency] プルダウンメニューから値を選択します。サポートされる頻度は 100 ミリ秒、500 ミリ秒、1 秒です。

  • 画像のサブセットが表示されるようにフィルムストリップをフィルタリングするには、[Filter by synthetic transaction, page, or step] メニューから値を選択します。

パフォーマンスとフィルムストリップでの表示を最適にするには、ブラウザのテストを最大 35 ステップまでに制限します。

フィルムストリップのフレームは、ステップの詳細(ステップ名と期間)の注釈が付けられます。フレームのキャプチャ時間と次のフレームのキャプチャ時間以内にステップが開始された場合、ステップの開始フレームには、基準に一致する他のステップとともにそのステップの注釈が含まれます。たとえば、ステップ 4 の実行が 3.5 秒に開始され、フィルムストリップが 1 秒ごとの画像を示している場合、3 秒でのフレームは、3 秒のマークの後、4 秒のマークの前で開始されたので、ステップ 4 の詳細で注釈が付けられます。

フィルムストリップはビデオから派生し、最大サイズは 3 GB です。ビデオがその制限を超えると、制限に達した後にキャプチャされたものは保存されませんが、他のすべてのメトリクスは保存されたままです。

実行結果が失敗した場合、実行に失敗したステップはフィルムストリップにエラースタイルで強調表示されます。失敗したステップは、フィルムストリップフレームの頻度によって前のフレームに含まれていたとしても、常にそれ自体のフレームに表示されます。

また、リアルタイムで読み込まれているサイトのビデオを表示することもできます。リアルタイムで読み込まれるサイトのビデオは、特定のテストが実行される場所とデバイスからのユーザーエクスペリエンスを示しています。このビデオを .mp4 ファイルとしてダウンロードするには、ビデオの縦の三点リーダーを選択し、[Download] を選択します。

合成メトリクスを検出およびレポートする

合成メトリクスからさらに値を引き出すには、メトリクスエンジンを使用して、カスタムメトリクス、チャート、ディテクターを作成します。詳細については、次のリンクを参照してください。

(オプション) Splunk RUM と統合する

Splunk Synthetics は、ブラウザテストのために Web バイタルを自動的に収集します。Web バイタルは、ユーザーエクスペリエンスに影響を与える主要なメトリクスを取得し、サイトの全体的なパフォーマンスを評価します。実行結果に対して Web バイタルメトリクスも測定する場合は、Splunk RUM と統合します。手順については「Splunk RUM で実行結果をウェブバイタルと比較するNo Content found for /db/organizations/splunk/repositories/portal-production/content/documents/ObservabilityCloud/synthetics/test-config/rum-synth.dita#d0b5265993a1941a1ab8993fd4cd9a294/rum-synth」を参照してください。