# 画面性能分析
IMQA MPM画面性能分析は、画面別の性能を30分単位で詳細に確認することができます。画面流入量、イベントなどユーザーに対する情報や各性能指標に対するヒートマップを通して、性能分布と低下状況を詳細に分析することができます。
## 1. 概要
{% hint style="warning" %}
現在、リアクトネイティブプロジェクトでの画面パフォーマンス分析は、ネイティブデータ中心として表示されます。 コンポーネント固有のパフォーマンス分析機能は今後のアップデート予定です。
{% endhint %}
「ダッシュボード」で特定の画面カードをクリックすると移動でき、IMQA MPM画面性能分析は、以下のとおりに構成されています。
**❶ 画面/分析時間**\
**❷ 画面性能情報**\
**❸ 画面流入情報**\
**❹ 画面イベント**\
**❺ 性能ヒートマップ**
## **2.** 画面/分析時間
分析したい画面と分析日や時間を変更することができます。変更すると、画面性能分析情報が選択した基準で更新されます。基本設定は「ダッシュボード」でクリックした「画面」「今日の日付」「現在の時間帯」に設定されており。
**❶ 分析日**\
基本設定は「今日の日付」で設定されており、\[<] \[>]をクリックすると、分析日を変更することができます。最大30日前まで選択することができます。
**❷ 選択した時間帯**\
選択した時間帯が表示されます。別の時間帯に変更することもできます。
**❸ 現在の時間帯**\
「現在の時間」が含まれた時間帯が表示されます。
**❸ 凡例**\
各時間帯ごとに集計されたデータ数によって、タイムラインのカラー濃度が4段階で表示されます。
## 3. 画面性能情報
30分間の画面ローディング時間、レスポンスタイム、CPU、メモリの性能指標の下位5%平均と全体平均が表示されます。
{% hint style="info" %}
これを通して、特定の画面にどのような性能低下が発生したのかを一目で確認することができます。また、アプリユーザーが平均的に画面ローディングに問題を抱えているか、リクエストに対するレスポンスが遅かったのかなど、性能低下の要因を分析することができます。
{% endhint %}
## 4. 画面流入情報
### 画面流入量
30分間の画面流入量を確認することができます。
* **画面流入量**Screen inflow: 30分間の当該画面のアクセス数がカウントされます。
### 画面流入分析
30分間にユーザーが移動した直前・直後のルートを上位4つまで確認することができます。
当該画面を中心に最も主となる重要なフローを探すときに役立ち、視覚的に把握することができます。画面と画面の間のエリアにカーソルを重ねると、「From：流入画面→画面の名前：アクセス数 & 画面の名前→ To：対象画面：アクセス数」のツールチープが表示されます。
* **アクセス数**: 特定の画面から特定の画面へ移動したユーザー数がカウントされます。
{% hint style="info" %}
特定のルートが大きく強調される場合は、当該ルートをたどって移動するユーザーが多いと解析することができます。アプリの目標画面基準、強調されたルートを最適化する必要があることを意味します。
{% endhint %}
## 5. 画面イベント
30分間に当該画面で発生したイベントが10個まで表示されます。発生時間順に整列され、イベント速度も同時に確認することができます。
* **イベント名**: 発生したイベントが表示されます。
* **時間**: 当該イベントが発生した時間が表示されます。
* **速度**: 当該イベントの速度が表示されます。
## 6. 性能ヒートマップ
各性能指標に対するヒートマップを通して、性能分布と性能低下状況を詳細に分析することができます。ウェブ/ハイブリッドアプリは、「ウェブビュー画面ローディング時間」が追加で表示されます。
### ネイティブ画面ローディング時間
30分間の当該ネイティブ画面の画面ローディング時間を確認することができます。セルにカーソルを重ねると、「分析日 | 分析時間 | データ数 | 性能区間」のツールチップが表示されます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「ネイティブスタック分析」のポップアップが表示されます。
* **画面ローディング時間**: 当該ネイティブの画面ローディング時間が区間で算出されます。
* **凡例**: 基準値以上の区間は赤、未満は青で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度は3段階で表示されます。
### ウェブビュー画面ローディング時間
当該ネイティブ画面に属するウェブビュー画面がある場合、ウェブビューの画面ローディング時間を確認することができます。基本的に「すべて」のウェブページ基準でヒートマップが表示され、ページを変更するとヒートマップが更新されます。セルにカーソルを重ねると、「分析日 | 分析時間 | データ数 | 性能区間」がツールチップに表示されます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「ウェブリソース分析」ポップアップが表示されます。
* **画面ローディング時間**: 当該ウェブページの画面ローディング時間が区間で算出されます。
* **凡例**: 基準値以上の区間は赤、未満は青で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度は3段階で表示されます。
{% hint style="info" %}
ウェブページは、「{host}:{port}/{path}」形式で表示され、数字形式のアドレスはアスタリスク(\*)に置き換わります。「管理 > 画面の名前変更」で理解しやすい名前に変更することができます。
{% endhint %}
### ネイティブレスポンスタイム
30分間に当該ネイティブ画面でリクエストしたHTTPレスポンスタイムを確認することができます。セルにカーソルを重ねると、「分析日 | 分析時間 | データ数 | 性能区間」がツールチップに表示されます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「詳細レスポンス分析」ポップアップが表示されます。
* レスポンスタイム: HTTPレスポンスタイムが区間で算出されます。
* 凡例: 収集されたHTTP情報でレスポンスコードが4xx番台・5xx番台の場合は赤、その他のレスポンスコードは青で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度が3段階で表示されます。
### ウェブビューレスポンスタイム
30分間に当該ウェブビュー画面でリクエストしたHTTPレスポンスタイムを確認することができます。セルにカーソルを重ねると、「分析日 | 分析時間 | データ数 | 性能区間」がツールチップに表示されます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「詳細レスポンス分析」ポップアップが表示されます。
* レスポンスタイム: HTTPレスポンスタイムが区間で算出されます。
* 凡例: 収集されたHTTP情報でレスポンスコードが4xx番台・5xx番台の場合は赤、その他のレスポンスコードは青で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度が3段階で表示されます。
### CPU
30分間に当該ネイティブ画面で消費されたCPU使用量を確認することができます。セルにカーソルを重ねると、「分析日 | 分析時間 | データ数 | 性能区間」がツールチップに表示されます。 ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「ネイティブスタック分析」ポップアップが表示されます。
* **CPU使用量**: CPU使用量が区間で算出されます。
* **凡例**: OS使用量は緑、APPは**黒**で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度が3段階で表示されます。
### メモリ
30分間に当該ネイティブ画面で消費されたメモリ使用量を確認することができます。セルにカーソルを重ねると、「分析日 | 分析時間 | データ数 | 性能区間」がツールチップに表示されます。 ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「ネイティブスタック分析」ポップアップが表示されます。
* **メモリ使用量**: メモリ使用量が区間で算出されます。
* **凡例**: OS使用量は緑、APPは**黒**で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度が3段階で表示されます。
