# 性能詳細分析

IMQA MPM性能詳細分析は、「画面性能分析」「区間分析」ページの性能ヒートマップを通して確認できる機能です。性能ヒートマップで特定のセルを選択したり、マウスドラッグで区間を選択すると表示されます。性能詳細分析では、ネイティブスタック分析、ウェブリソース分析、詳細レスポンス分析を実行できます。これを通して、性能の問題点または問題となる区間を把握することができます。

また、ユーザー行動分析機能により、パフォーマンスの問題が発見されたアプリユーザーがどの移動経路でアプリを利用したか全体の行動の流れを確認することができます。

## 1. ネイティブスタック分析 <a href="#native-stack" id="native-stack"></a>

ネイティブスタック分析は、アプリケーション内でCall Stack情報を周期的に収集して、当該ヒートマップ時点のCall Stack情報を総合的に提供しています。例えば、画面がローディングされる時点のCall Stack情報を確認すると、GUI関連の関数とイメージライブラリなどの多くの関数がコールスタックとして見えるようになります。この機能を通して、時間が長くかかる画面、またはCPU、メモリが高い時点のスタック情報を確認して、どのような関数が性能を低下させているのかを確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/scX331Oz1QPANnhiXlBUWoQLX_KDiTMGFplzcGKOmqz6dT7pbCNp3I7wBcaMjL1s95qUqpxbDUOBZnoGjQkFi5qMnrYtbSou8Trb4GHxhdICa9yv_bmdPoKjavK5xftlNWiaKrca8qKL6dmNlVbJoA" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
プロガード設定/dSYM設定を通じて各バージョンのマッピングファイルに復号化された場合、実際のソースのファイルおよび位置まで正確に表示されます。 プロガード設定 / dSYM設定は、'[MPMを使用する > プロジェクトリスト > プロジェクト管理 > プロガード設定 / dSYM設定](https://docs.imqa.io/imqa-guide/jpn/user-guide/mpm-ysakaito/broken-reference)'を参照してください。
{% endhint %}

### デバイス情報リスト <a href="#device-information-list" id="device-information-list"></a>

「画面性能分析」「区間分析」ページの性能ヒートマップで選択したエリアのデバイス情報です。画面、アプリバージョン、OSバージョン、デバイス、通信会社、位置、画面レスポンスタイム、ユーザー数についての情報がリスト形式で表示されます。詳細分析に入ると、まず最初に最上部にあるデバイス情報が下のリバーススタックに表現されています。他のデバイス情報を選択すると、他のスタック情報を確認することができます。画面ローディングタイムは、「画面性能分析」「区間分析」で選択した区間の性能データが表示されます。

### ユーザー行動分析(逆追跡行動分析) <a href="#behavior" id="behavior"></a>

デバイス情報リストで選択したデバイスのユーザーがどのフローでアプリを使用したかを連携して追跡を確認できます。 性能低下があったデバイスの性能情報を確認し、性能低下現象発生前後の原因分析が可能です。 \[ユーザー行動分析]ボタンをクリックすると、該当デバイスユーザーのアプリ実行～アプリ終了までの画面フローを「行動分析」ページから確認できます。

<figure><img src="https://lh4.googleusercontent.com/ef2R9gUBfGZnpObrKLiYEqMxYCXMK2M6Tuqqwvp6jEvaFGVlmkq8w0P1Gm43VU-ZdZ5HLeVUJ9RoyYTztMhbTIfN_uwB09gsA_tKEG_G_DeFyWMcfkpXExtt_9eC_FnxpA4sSM2owZtYWdXs_CTjGZTcNZdjJxBIYb7FsuWQhKDUCzzyNphA8VmZZpnr" alt=""><figcaption></figcaption></figure>

### リバーススタック – 概要 <a href="#reverse-stack-overview" id="reverse-stack-overview"></a>

リバーススタックは、端末情報リストで選択されたデバイス情報の1分間のCall Stack情報を総合して、リバーススタック形式で詳細スタック情報を表しています。

### リバーススタック - ツリービュー <a href="#reverse-stack-tree-view" id="reverse-stack-tree-view"></a>

![](https://lh4.googleusercontent.com/4slb0-ytiDBC5FI7jN-YaS7Ttg_4rmvE8mC9Ke-EKtZ7nzrtB6_-fdy7dlYEmOxha_KLC-SMoSvB7n_tH4kcetTMVwvoLqvSl-UKljnIIdlwYXIKop487TLtQHRH8wMsDUuBY89WOjMQ1ZSeGNHCH4A)

ツリービューでは、詳細なCall Stack情報がツリー形式で表示されます。(括弧)の中にある数字はパーセンテージ(%)を表しており、呼び出された関数の比率を表しています。最後に呼び出された関数からTop-Down形式で関数が並べられています。\
ツリービューを通して、問題が発生する可能性が最も高い関数を推定でき、関連する他の関数から実際にアプリに影響を与える程度を確認することができます。

### リバーススタック - サンバーストビュー <a href="#reverse-stack-sunburst-view" id="reverse-stack-sunburst-view"></a>

サンバーストグラフは、全スレッドのコールスタックを合わせたもので、どの関数が実行中に最も多く占めているのかを一目で確認することができます。グラフをマウスオーバーすると、その関数が画面下部に表示されます。

<figure><img src="https://lh7-us.googleusercontent.com/ON8NEpWio0HDEeWwX0x9vAq6wOZkruuF7cJC_rurAI98wrWoPlKSQQdzHupwI7rAStozr2XyxdIgeId0reFZ7LAfGq85w18lbZiuyAakl2juuAV-cMWSmkr9CDyhLttTCXtJouXCsZ2UKoLI7D_Qyg" alt="" width="375"><figcaption></figcaption></figure>

関数が発生した位置、関数が発見された回数、関連する他の関数情報を通して、アプリが実行中にどのような動作をしているのかを把握することができます。これをもとに、性能問題の原因を分析することができます。

**❶ すべて** \
全Threadに対するCall Stack情報が表示されます。主に全体的な関数使用量を確認するときに使用されます。

**❷ アクティビティコール** \
待機中を意味する関数(ループを回っていたり、Waitを呼び出している関数)を除いた残りの情報だけが表示されます。\
Active Call情報を活用すると、影響力の少ない情報を除いて、実際に影響を及ぼす関数を把握することができます。

**❸ 全スレッド**\
UIと非UIにかかわらず、すべてのスレッドの情報を確認することができます。

**❹ UIスレッド**\
UIに関連する関数情報のみを把握することができます。

**❺ 非 UIスレッド**\
UIを除いた関数情報を確認でき、バックグラウンドでリソースを使用する関数を把握することができます。

**❻ リソース使用量** \
サンバーストグラフとともに提供されるCPU、Memory、Networkエリアは、選択された時間の端末の平均使用量を表しており、これらはOSエリアとAppエリアに分けて表示されます。

## 2. ウェブリソース分析 <a href="#web-resource" id="web-resource"></a>

<figure><img src="https://lh7-us.googleusercontent.com/s1lB4F2BOkKIgQMANzTcuV_p0A98f2Yrm3pmzl6QgPY2ytSfqAWRZT4tpkLlqTX-AbV5WbGREx4ANPPqfsoZyX8fTLLCOC82B16pBFQMlpDhDs6b_1IVSdFDrhkeWIccfu22KVQXfXj-hJg99W1m9w" alt=""><figcaption></figcaption></figure>

HTMLページがonloadイベントを発生する時点までのデータを収集します。CSS、Javascript、Imageなどのリソースをリクエストするときにかかる時間、FMP、FCP、DCLなどのタイミング情報も表示されます。

そのため、ユーザーはウェブページのload時点までどのような外部リクエストがあったのかを把握でき、ページをロードすると遅くなるボトルネック区間を正確に判断することができます。

### デバイス情報リスト <a href="#device-information-list" id="device-information-list"></a>

「画面性能分析」「区間分析」性能ヒートマップで選択したエリアのデバイス情報です。画面、アプリバージョン、OSバージョン、デバイス、通信会社、位置、画面ローディング時間、ユーザー数についての情報がリスト形式で表示されます。詳細分析に入ると、まず最初に最上部にあるデバイス情報が下のタイムラインに表現されています。他のタイムラインを確認したい場合は、他のデバイス情報を選択すると確認することができます。

### ユーザー行動分析(逆追跡行動分析) <a href="#behavior2" id="behavior2"></a>

デバイス情報リストで選択したデバイスのユーザーがどのフローでアプリを使用したかを連携して追跡を確認できます。 性能低下があったデバイスの性能情報を確認し、性能低下現象発生前後の原因分析が可能です。 \[ユーザー行動分析]ボタンをクリックすると、該当デバイスユーザーのアプリ実行～アプリ終了までの画面フローを「行動分析」ページから確認できます。

<figure><img src="https://lh4.googleusercontent.com/ef2R9gUBfGZnpObrKLiYEqMxYCXMK2M6Tuqqwvp6jEvaFGVlmkq8w0P1Gm43VU-ZdZ5HLeVUJ9RoyYTztMhbTIfN_uwB09gsA_tKEG_G_DeFyWMcfkpXExtt_9eC_FnxpA4sSM2owZtYWdXs_CTjGZTcNZdjJxBIYb7FsuWQhKDUCzzyNphA8VmZZpnr" alt=""><figcaption></figcaption></figure>

### 要約情報 <a href="#summary-information" id="summary-information"></a>

平均ページロード時間とネットワーク / サーバー / DOM / ローディング時間を要約して表します。また、当該時点のデバイス性能情報も要約され表示されます。

![](https://lh5.googleusercontent.com/_HJarboUgxqiyle6ZakIqCqXSQW8yrNUPUftQWJ_uiUvS6j-m1Lt_zhlbdfJkJ24KjXPNPf1w4wFg47HKYS4mKUaRWGB-GBVjF5NC0opksECY1ePyiSHiyC50pNm32H6-GshDitg9HQZKJwO5xbyW4o)

### タイムライン <a href="#timeline" id="timeline"></a>

![](https://lh5.googleusercontent.com/AnrdsOrKlkAsoWBspGBgnWtrPFmebJpbRFfyi947mGRXRqb00q4qxPSsa6AiIKhtn242cVRfOOITAlCt-SztoXivaCigENPCeTMQu6PsOavYTvECzPULckQWy0r3BuTHdYCxlys3lsZn1pBnfBH2mwU)

Documentの全体DOMが描かれ、ロードされる過程で確認できる情報は以下の通りです。 Document requestタイムラインにマウスポインタをアップロードすると、表示されるツールチップで確認できます。

<table><thead><tr><th width="90.60000000000002" align="center">表示</th><th width="189" align="center">ラベル</th><th align="center">説明</th></tr></thead><tbody><tr><td align="center"><strong>◻︎</strong></td><td align="center"><strong>待機 (Wait)</strong></td><td align="center">リクエスト前の待ち時間</td></tr><tr><td align="center"><mark style="color:orange;"><strong>◼︎</strong></mark></td><td align="center"><strong>ネットワーク</strong></td><td align="center">ネットワーク探索および接続時間</td></tr><tr><td align="center"><mark style="color:purple;"><strong>◼︎</strong></mark></td><td align="center"><strong>サーバー</strong></td><td align="center">サーバーから要請を処理した時間</td></tr><tr><td align="center"><mark style="color:green;"><strong>◼︎</strong></mark></td><td align="center"><strong>DOM</strong></td><td align="center">HTML解析およびDOM構築時間</td></tr><tr><td align="center"><mark style="color:blue;"><strong>◼︎</strong></mark></td><td align="center"><strong>ローディング</strong></td><td align="center">表示されるローディング時間</td></tr><tr><td align="center"><mark style="color:yellow;"><strong>◼︎</strong></mark></td><td align="center"><strong>コンテンツダウンロード</strong></td><td align="center">画面が描かれる時間</td></tr></tbody></table>

![](https://lh6.googleusercontent.com/_zmKj46vc909lJ-iWZe40D-q6t5hgUI3VDHVEynly1R8JKuny4ZAmoTuaPPEVxRmRnpvawTb-6RA5bcNEHfpC13kFmSNGq6ZjN1iCbuFFPm3tcG5rH68Uv9YtvzaE_teiy3Nod0LNKYfUuAp3kHQUww)

各リソースについて確認できる情報は以下のとおりです。 各リソースタイムラインにマウスポインタを上げると表示されるツールチップで確認できます。

<table><thead><tr><th width="150" align="center">表示</th><th width="150" align="center">ラベル</th><th width="418.34426229508193" align="center">説明</th></tr></thead><tbody><tr><td align="center"><strong>◻︎</strong></td><td align="center"><strong>Waiting</strong></td><td align="center">リクエスト前の待ち時間</td></tr><tr><td align="center"><mark style="color:purple;"><strong>︎</strong><strong>◼︎</strong></mark></td><td align="center"><strong>Redirect</strong></td><td align="center">HTTPリダイレクト実行時間</td></tr><tr><td align="center"><mark style="color:purple;"><strong>◼︎</strong></mark></td><td align="center"><strong>Fetch</strong></td><td align="center">リクエスト前に待機する時間またはキャッシュ照会時間</td></tr><tr><td align="center"><strong>◼︎</strong></td><td align="center"><strong>DomainLookup</strong></td><td align="center">ドメインに該当するIPをDNSで検索する時間</td></tr><tr><td align="center"><mark style="color:orange;"><strong>◼︎</strong></mark></td><td align="center"><strong>Connect</strong></td><td align="center">サーバー接続にかかった時間</td></tr><tr><td align="center"><mark style="color:green;"><strong>◼︎</strong></mark></td><td align="center"><strong>Request sent</strong></td><td align="center">サーバにリソースを要請する時間</td></tr><tr><td align="center"><mark style="color:yellow;"><strong>◼︎</strong></mark></td><td align="center"><strong>Response</strong></td><td align="center">サーバー応答時間</td></tr></tbody></table>

収集するタイミング情報は以下の通りです。 タイムラインに表示されたマーカーで確認できます。

<table><thead><tr><th width="75" align="center">表示</th><th width="179.77851944387422" align="center">ラベル</th><th width="356.9912912078743" align="center">説明</th></tr></thead><tbody><tr><td align="center"><mark style="color:green;"><strong>⬇︎</strong></mark></td><td align="center"><strong>First-Paint (FP)</strong></td><td align="center">FPはブラウザが探索前に画面にあったものと視覚的に異なるものでも、最初のビットをレンダリングするときの地点です。</td></tr><tr><td align="center"><strong>⬇︎</strong></td><td align="center"><strong>First-Contentful-Paint (FCP)</strong></td><td align="center">FCPは最初のコンテンツ(テキスト、画像など)がレンダリング完了時点です。</td></tr><tr><td align="center"><strong>⬇︎</strong></td><td align="center"><strong>First-Meaningful-Paint (FMP)</strong></td><td align="center">FMPはフォントが適用されるなどの主要コンテンツがユーザに見られる時点です。これはブラウザごとに測定する基準が異なります。</td></tr><tr><td align="center"><mark style="color:blue;"><strong>⬇︎</strong></mark></td><td align="center"><strong>Dom-Content-Loaded (DCL)</strong></td><td align="center">DCLイベントは、最初のHTML文書が完全にロード及びパーキングされた時に発生し、スタイルシートやイメージ及びサブフレームロードが終わるのを待ちません。</td></tr></tbody></table>

## 3. 詳細レスポンス分析 / コンポーネントローディング分析 <a href="#response-analysis" id="response-analysis"></a>

IMQA MPM は、HTTPレスポンスタイムとレスポンスコードを収集するため、クライアントからのHTTPリクエストを分析することができます。端末で収集されたHTTP情報はms単位で収集され、HTTPヘッダ情報とレスポンスコードが表示されます。これを利用して、特定のURLで発生するレスポンスタイム分析、エラーコードが発生するURLなどを把握することができます。

リアクトネイティブの場合、コンポーネントローディング分析が可能です。 リアクトネイティブでネイティブUIコンポーネントを使用してUIをレンダリングする場合、最も優先的にレンダリングされる親コンポーネント（親コンポーネント）と、そのコンポーネントからインポートして使用されるコンポーネント（子コンポーネント）を区別して分析できます。

![](https://lh3.googleusercontent.com/yfJpbh-v1qnaw03xlCcdK_FtJ5fRUzwiUBIkClSdB6bO9tcJG_cDkeX0DYO08Mtkn-OJa2Y3e1kFxlx3-xeAkX77R1N1LjMDyo50XrBNgM5KL_kU2hcRg71ZDiJwNqe_mXPF9CfpM-moCj8kWuMY4Ec)

クライアントが収集するHTTP関連情報は以下のとおりです。

<table><thead><tr><th width="160" align="center">ラベル</th><th width="459" align="center">説明</th></tr></thead><tbody><tr><td align="center"><strong>メソッド</strong></td><td align="center">HTTP Method (GET, POST, UPDATE, PUT, DELETEなど)</td></tr><tr><td align="center"><strong>ホスト</strong></td><td align="center">ドメイン情報</td></tr><tr><td align="center"><strong>状態</strong></td><td align="center">HTTPレスポンスコード</td></tr><tr><td align="center"><strong>ルート</strong></td><td align="center">リクエストURL</td></tr><tr><td align="center"><strong>レスポンスタイム</strong></td><td align="center">HTTPリクエストに対するレスポンスタイム</td></tr></tbody></table>