- 「応答性」は、ユーザーがアプリを操作したときに、アプリがどのくらいすばやく反応するかを測定します。ユーザーは、ボタンを押してからUIが更新されるまでの間に体感的な遅延がないことを期待しています。
- 「滑らかさ」は、アニメーション、スクロール、ビデオ再生が、途切れやジャンク、ドロップフレームを生じることなく、どのくらいスムーズにレンダリングされるかを測定します。
- KPI Visualizerの使用
- アプリの主要業績評価指標の測定と理解
- 測定のセットアップ
- 結果の解釈
前提条件
Vega App KPI Visualizerを使用する前に、以下を完了してください。-
VegaパフォーマンスAPIモジュールをインストールします。
-
次のセクションに目を通してください。
- 各KPIが測定する内容とそのターゲットのガイドライン。アプリのKPI指標とガイドラインを参照してください。
- さまざまなシナリオでのアプリの起動方法。起動シナリオを参照してください。
- パフォーマンスマーカーを設定するタイミング。描画完了マーカーを参照してください。
- フォアグラウンドメモリ、ビデオの滑らかさ、またはUIの滑らかさを測定するには、滑らかさとフォアグラウンドメモリの測定の手順に従ってください。
- 測定方法を選択します。
アプリのKPI指標とガイドライン
次の表は、主なKPIとそれに関連するマイクロKPIの両方を示しています。メインKPIは全体的なパフォーマンス指標を測定し、マイクロKPIはメインKPIに寄与する特定の測定可能なコンポーネントを表します。 たとえば、Application JavaScript bundle load timeは、描画完了までの時間(TTFD)のKPI全体に影響するマイクロKPIです。マイクロKPIのセルが空の場合、そのメインKPIに寄与する特定のサブコンポーネントはないことを示します。
起動シナリオ
KPI Visualizerは、TTFFとTTFDのパフォーマンスを評価するために、次の2種類のアプリ起動シナリオを測定します。- クールスタート - ユーザーが初めてアプリを起動し、システムがすべてのリソースと依存関係をメモリに読み込むとき。
- ウォームスタート - 一部のリソースと依存関係がすでにメモリにある状態で、ユーザーがアプリをバックグラウンド(非アクティブ状態)からフォアグラウンド(アクティブ状態)に移行するとき。
描画完了マーカー
描画完了マーカーは、アプリがユーザー操作を受け付けられる状態になったことを知らせます。マーカーは以下の役割を果たします。- アプリの必須コンポーネントの読み込みが完了したことを示す。
- ユーザーがアプリの操作を開始できるタイミングを示す。
- TTFDパフォーマンスの測定に役立つ。
useReportFullyDrawnフックをアプリに追加します。- 次のキーポイントにマーカーを配置します。
- クールスタート - 初期データを読み込んでメイン画面をレンダリングした後。
- ウォームスタート - フォアグラウンド移行後にアプリが応答可能になったとき。
VS CodeでのKPIの測定
手順1:VS Codeでコマンドパレットを開く
- Macの場合:Shift+Command ⌘+P
- Linuxの場合:Ctrl+Shift+P
手順2:「Vega: Launch App KPI Visualizer」と入力する
手順3:Enterキーを押す
[Vega Studio] パネルから [App KPI Visualizer] を選択することもできます。
手順4:ユースケースを選択する
フォアグラウンドメモリとビデオストリーミングの滑らかさを測定するには、ユーザーによるアプリの操作方法に合わせたカスタムテストシナリオを作成します。
以下に例を示します。
- メモリテスト用 - ビデオ再生または画像読み込みを含めます。
- ストリーミング用 - 一般的なビデオ視聴パターンを含めます。
クールスタートKPI
- デバイス上でテストアプリを起動します。
- テストアプリが読み込まれるまで10秒待ちます。
- テストアプリを閉じます。
- KPIを処理します。
ウォームスタートKPI
- デバイス上でテストアプリを起動します。
- デバイス上で別のアプリを起動して、テストアプリをバックグラウンドに移行させます。
- テストアプリを起動して、フォアグラウンドに移動します。
- テストアプリが読み込まれるまで15秒待ちます。
- テストアプリを閉じます。
- KPIを処理します。
フォアグラウンドメモリKPI
- デバイス上でテストアプリを起動します。
- テストシナリオに指定されている手順を実行します。
- 分析とレポートのためにKPIをキャプチャします。
- テストアプリを閉じます。
- KPIを処理します。
バックグラウンドメモリKPI
- デバイス上でテストアプリを起動します。
- デバイス上で別のアプリを起動して、テストアプリをバックグラウンドに移行させます。
- テストアプリのKPIが収集されるまで15秒待ちます。
- テストアプリを閉じます。
- KPIを処理します。
UIの滑らかさKPI
- デバイス上でテストアプリを起動します。
-
テスト方法を選択します。
- カスタムテスト - 独自のUI操作シナリオを使用する
- デフォルトテスト - 標準のスクロールパターンを使用する
- 水平スクロール2セット(左5回、右5回)
- 垂直スクロール2セット(下5回、上5回)
- アクション間隔900ミリ秒
-
[Cancel] をクリックするか Escキーを押してテストを終了します。
- 分析とレポートのためにKPIをキャプチャします。
- テストアプリを閉じます。
- KPIを処理します。
ビデオ再生の滑らかさKPI
- デバイス上でテストアプリを起動します。
- ビデオ再生テストシナリオに指定されている手順を実行します。
- 分析とレポートのためにKPIをキャプチャします。
- テストアプリを閉じます。
- KPIを処理します。
手順5:テスト中のトレースロスを無視するかどうかを選択する
アプリにパフォーマンス上の問題があると、トレースが大幅に失われる可能性があります。この場合、Vega App KPI Visualizerはトレースを読み込まず、レポートにはKPIがN/Aとして表示されます。
KPIレポートを生成して指標を表示するときに、トレースロスを無視するかどうかを選択できます。ただし、トレースロスを無視すると、実際のパフォーマンスよりも優れたKPI値が生成されます。
手順6:VisualizerのウィンドウでKPIスコアを確認する
ウィンドウには、3回のテストから計算されたp90(90パーセンタイル)値が表示されます。手順7:結果を評価する
結果を評価するには、パフォーマンスレポートの理解を参照してください。CLIコマンドによるKPIの測定
手順1:デバイスの準備状態を確認する
コマンドプロンプトでvega exec perf doctorコマンドを実行して、ホストとターゲットデバイスの準備が整っているかどうかを確認します。
--app-nameには、manifest.tomlファイルから取得したパッケージIDを指定します。複数のデバイスが実行されている場合は、デバイスのシリアル番号を指定します。perfコマンドで--device-serial-numberパラメーターを使用してください。
デバイスが1台だけ接続されている場合の例:
手順2:Vega App KPI Visualizerを起動する
app-nameが唯一の必須パラメーターです。[app-name] は、manifest.tomlファイルにあるデフォルトの対話型コンポーネントのIDに置き換えます。
手順3:(任意)イテレーション回数を指定する
デフォルトのイテレーション回数は3回で、--certificationを使用した場合は30回になります。
手順4:(任意)測定するKPIを指定する
手順5:利用可能なすべてのオプションを表示する
stdoutにレポートの概要が表示されます。
レポートの例:
パフォーマンスレポートの理解
Vega App KPI Visualizerには、以下を含むパフォーマンスレポートが表示されます。-
Test information
- Date - システムがKPIデータをキャプチャした日付。
- Device Serial ID - アプリを実行しているデバイスの一意の識別子。
- App - KPIデータが表示されるアプリの名前。
- Number of iterations - KPI測定プロセスが実行された回数。
- KPI Name - KPIの名前と単位。
- Test Name - テストまたは実行されたユースケースの名前。
-
KPI Health - 各KPIの健全性を示す色分け表示。
- 🟢(緑)- 推奨ガイドラインを満たしている
- 🟡(黄色)- ガイドラインの10%以内
- 🔴(赤)- ガイドラインを10%超過
- KPI Score - KPIの数値。KPI名に指定されている単位で表されます。VisualizerでKPIを計算できない場合、KPIスコアは「N/A」と表示され、KPIの健全性は「Unknown」と表示されます。
- Guideline - 推奨されるKPIスコアの値または範囲。業界標準または業績目標に基づきます。
結果の例
以下の画像は、各ユースケースの結果のサンプルを示しています。ガイドラインに関連するKPIの健全性指標とスコアに注目してください。ユースケース:クールスタート時のTTFFとTTFD
次の結果は、起動時のパフォーマンス指標を示しています。緑色のインジケーターは、アプリが起動時間のガイドラインを満たしていることを示します。
ユースケース:ウォームスタート時のTTFFとTTFD
次の結果は、アプリがバックグラウンド状態からどのように再開するかを示しています。TTFFとTTFDの時間を比較して、最適化の必要性を評価してください。
ユースケース:フォアグラウンドメモリ
次の結果は、アクティブに使用されているときのアプリのメモリ使用量を示しています。この指標をモニタリングして、メモリを過剰に消費することによるパフォーマンスの問題を回避してください。
ユースケース:バックグラウンドメモリ
次の結果は、バックグラウンド状態でのアプリのメモリ使用量を示しています。非アクティブ状態のアプリがシステムリソースに与える影響を理解すると、バックグラウンド動作の最適化に役立ちます。
ユースケース:UIの滑らかさ
次の結果は、アプリがユーザー操作をどの程度スムーズに処理できるかを示しています。パーセンテージは、スクロールおよびナビゲーション中に正常にレンダリングされたフレームを示します。
ユースケース:ビデオ再生の滑らかさ
次の結果は、アプリがビデオコンテンツをどの程度スムーズに再生できるかを示しています。パーセンテージは、意図した再生レートでのフレーム配信が成功したことを示します。このシナリオには、メディアプレーヤーと入力イベントのマイクロKPIも含まれます。
KPIレポートを開く
Vega App KPI Visualizerがテストシナリオを完了すると、以下のレポートファイルが生成されます。- aggregated-kpi-report-<タイムスタンプ>.json - すべてのテストシナリオのKPIデータを統合する。
- <テスト名>-kpi-report-<タイムスタンプ>.json - 個々のテストシナリオごとに1つのファイルを作成する。<テスト名> は特定のシナリオを表します。
オプション1(推奨):クイックオープンを使用する
この方法では、VS CodeのインターフェイスまたはCLIから記録にアクセスできます。VS Codeの場合
- KPIレポートファイル(例:
app-launch-kpi-report-[timestamp].json)を、VS Codeクイックオープンを使用して、またはプロジェクトのgeneratedディレクトリで見つけます。 - ファイルを1回クリックしてプレビューするか、2回クリックしてアクティブモードで開きます。
CLIの場合
-
ターミナルウィンドウを開き、次のように入力します。
ターミナルで
codeコマンドが認識されない場合は、VS Codeコマンドパレットを開きます(MacではCmd+Shift+P、LinuxではCtrl+Shift+Pを押します)。 - 「Shell Command: Install code command in PATH」を選択します。
- コマンドを再試行します。
オプション2:VS Codeコマンドパレットを使用する
この方法では、VS Codeに組み込みのコマンドインターフェイスを使用して記録にアクセスできます。また、クイックオープンを利用できない場合にも使用できます。- VS Codeを開きます。
- コマンドパレットを開きます(MacではCmd+Shift+P、LinuxではCtrl+Shift+Pを押します)。
- 「Vega: Open Recording View」と入力します。
-
app-launch-kpi-report-[timestamp].jsonなど、開くファイルを選択します。

