# Screen performance analysis

The IMQA MPM screen performance analysis page enables you to check the performance of each screen in detail every 30 minutes. You can analyze the performance rating and the degradation status in detail using user information, such as the screen inflow and event, and heat map of each performance index.

{% hint style="warning" %}
Screen performance analysis in current React Native projects is presented as native data-centric. The performance analysis function for each component will be updated in the future.
{% endhint %}

## 1. Overview <a href="#overview" id="overview"></a>

![](https://lh4.googleusercontent.com/9ySI7tA337ijwJJY6MxJVy5TBshDqmL8SSWR53YujwBlHdIUSJ4jCD-u-8Z84xry5TenUWZtacYiA9JvmsASj5dYo-_0aD_YozBbXpC49yc-WvMpT1nRK6Iq9ybaIOxGUNjySs0x0qyoU0Soki1RCyI)

You can open this page if you click a specific screen card in the “Dashboard” page. The IMQA MPM screen performance analysis page consists of the following:

**❶ Screen/Analysis time**\
**❷ Screen performance**\
**❸ Screen inflow**\
**❹ Screen event**\
**❺ Performance heat map**

## **2.** Screen/Analysis time <a href="#screen-time" id="screen-time"></a>

You can change the screen to analyze and the analysis date and time. If changed, the screen performance analysis information is updated according to the selected standard. The standard is set to the “screen” clicked on the default “Dashboard”, “today’s date”, and “current time zone”.

![](https://lh7-us.googleusercontent.com/4wFWKLdLRhVxMVxpVwgqF0ndMnP6CEEVrOSaZToPWp44VdKBFs4Shfvy_78W672zOoDXRpud7LAZrXs7awS1-Vx8p37fNO0aVdPs7OfrR-jhLtOrM2vUE-RCd683Tg4J_g3x4WtMO38bjsi5Mcippg)

![](https://lh6.googleusercontent.com/U5CxEZqsYnOWTwWcMHXnCpdNeNKv_OuMPAyfwKPTZtsXm45HwsJQ5BrIUXa__QaXzh5_zzU8khu09riXePcxr7wxK0IflfJHQojeU8aenkgj_X2ECso5-OaR8CqG7Uydf_KQwV5QuenyX7lbGogQcS0)

**❶ Analysis date**\
“Today’s date” is set by default. You can change the analysis date by clicking \[<] \[>]. You can select up to the past 30 days.

**❷ Selected time zone**\
Displays the selected time zone. You can change to a different time zone.&#x20;

**❸ Current time zone**\
Displays the time zone that includes the “current time”.

**❹ Legend**\
Color density is displayed in 4 steps according to the number of aggregated data by time zone.

![](https://content.gitbook.com/content/X3ORtb1pce7Cpo11Ufww/blobs/rg4MN1bloZwYEsJU3Cz6/image.png)

## 3. Screen performance <a href="#screen-performance" id="screen-performance"></a>

Displays the average of the bottom 5% and the total average of the performance indexes (UI rendering time, response time, and CPU) for the past 30 minutes.

<figure><img src="https://lh7-us.googleusercontent.com/u5EpkEKqhNgNmswf1CGNajvU9_LL9eYkbKR3VI91EQq0sAE7Z4YHZ39RDOPoGnKiplTT8O0rsbaNnhs5IVyVAWKVIjOPAwkEqheiSWFi8QqAWlda-bsc4OKhBVIOfLKrJSOouzqEG4Q-MXOYq5BXQw" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Based on this, you can check the performance degradation on a specific screen at a glance. In addition, you can analyze performance degradation factors, such as whether the app users experienced problems in rendering on average, and whether the response to requests was slow.
{% endhint %}

## 4. Screen inflow <a href="#screen-inflow" id="screen-inflow"></a>

### Screen View <a href="#screen-view" id="screen-view"></a>

You can check the screen view for 30 minutes.

<figure><img src="https://lh7-us.googleusercontent.com/8ZNSyNCknWr94_1GFxheKnmGbA_hvhDMwVImUztrTMUZENhsddAziJGMh7H1cYFiLk_ItqMsUTj71Te9BgPuVSPYXhzFeilNOjoW0RkvsV0jIz0T1ZyEn6XpvO3itmODnD7PnpWVGM4QJvAipGIKMQ" alt=""><figcaption></figcaption></figure>

* **Screen view**: Counts the number of visits to the screen in question for 30 minutes.

### Screen Flow <a href="#screen-flow2" id="screen-flow2"></a>

You can check up to four previous/next screen paths of the user for the past 30 minutes.

![](https://lh6.googleusercontent.com/hRHLZ7RWoa-WDa-xh441Xqqay3VkLgJA5cV44LUnW1N9Pf4ZdQ7lJ8icI_EcFF-GWsX0SIFnKPuPORaxYgq1TEK3uiFQV4SnXySa7YT7XL_maOvEUOpxD7tEdiM8y-mVZPu9IbuzLr-4aAcSGbK5JOI)

It is useful to find the major and the most important flow while focusing on the screen in question, and you can check the flow visually. If you hover the mouse over the area between screens, a tooltip is displayed as “From: Inflow screen → Screen name: Number of visits & screen name → To: Target screen: Number of visits”.

* **Number of visits**: Counts the number of users who moved from a specific screen to a specific screen.

{% hint style="info" %}
If a specific path is strongly emphasized, it can be understood that many users are using the path in question, which means that the target screen criteria of the app and emphasized path should be optimized.
{% endhint %}

## 5. Screen event <a href="#screen-event" id="screen-event"></a>

Displays up to 10 events that occurred on the screen in question for the past 30 minutes. Events are sorted by occurrence time, and the event speed is also displayed.

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

* **Event name**: Displays occurred events.
* **Time**: Displays the time when the event in question occurred.
* **Speed**: Displays the speed of the event in question.

## 6. Performance heat map <a href="#heatmap" id="heatmap"></a>

You can analyze the performance rating and performance degradation situation in details using the heat map of each performance index. For the WebView/hybrid app, the “WebView UI Rendering Time” is also displayed.

### Native UI rendering time <a href="#native-rendering-time" id="native-rendering-time"></a>

You can check the UI rendering time of the native screen in question for the past 30 minutes. If you hover the mouse over a cell, a tooltip is displayed that shows “Analysis date | Analysis time | Number of data | Performance section”. If you click a desired cell in the heat map area or select a section by dragging the mouse, the “Native stack analysis” pop-up window will be displayed.

![](https://lh6.googleusercontent.com/EgpMZHCVS6V5tSAA36kNv6p400JPWMHZw-thY9uZxPDouHSS4DgahzYooQb4GvKPKGcpJOav0nGV6Io1elIBuFiWJoz6SK8SOnwpHgHoQ2_EU3xfWNfDsnLv-1XhzDsCsNsqF7MNe0ohNih3yjHutPg)

* **UI rendering time**: Calculates the Native UI rendering time in question as a section.
* **Legend**: Displayed in <mark style="color:red;">red</mark> if the section is more than the threshold, and <mark style="color:blue;">blue</mark> if it is less than the threshold. Color density is displayed in 3 steps according to the ratio of the data collected in the same-time axis.

&#x20;      <mark style="color:red;">◼︎</mark> More than the threshold <mark style="color:blue;">◼︎</mark> Less than the threshold

### WebView UI rendering time <a href="#webview-rendering-time" id="webview-rendering-time"></a>

You can check the WebView UI rendering time if there is any WebView screen that belongs to the Native screen in question. By default, the heat map is displayed based on “all” web pages, and the heat map is updated if a page is changed. If you hover the mouse over a cell, a tooltip is displayed that shows “Analysis date | Analysis time | Number of data | Performance section”. If you click a desired cell in the heat map area or select a section by dragging the mouse, the “Web resource analysis” pop-up window will be displayed.

![](https://lh4.googleusercontent.com/dqmGQCNzefi1nV7YmqnOZjCmYtSXKhgNnsA0RhShwUsiNz3kKZQ_g-Qo708znXNFt7W-9_0c0J0reCopnzeNaMr4WduFBO7cNsL7FR1LuyCfb687doJX7KZ2Ey7EQ4C-dtQ5DwaKjpQuLbFYWA68dBM)

* **UI rendering time**: Calculates the UI rendering time of the web page in question as a section.
* **Legend**: Displayed in <mark style="color:red;">red</mark> if the section is more than the threshold, and <mark style="color:blue;">blue</mark> if it is less than the threshold. Color density is displayed in 3 steps according to the ratio of the data collected in the same-time axis.

&#x20;      <mark style="color:red;">◼︎</mark> More than the threshold  <mark style="color:blue;">◼︎</mark> Less than the threshold︎&#x20;

{% hint style="info" %}
Web pages are displayed in the form of ”{host}:{port}/{path}”, and addresses in the form of numbers are replaced with an asterisk (\*). You can change the web page name into the one that is easy to understand by selecting “Manage > Screen Name”.
{% endhint %}

### Native Response time <a href="#native-response-time" id="native-response-time"></a>

You can check the HTTP response time of the Native screen in question for the past 30 minutes. If you hover the mouse over a cell, a tooltip is displayed that shows “Analysis date | Analysis time | Number of data | Performance section”. If you click a desired cell in the heat map area or select a section by dragging the mouse, the “Detailed response analysis” pop-up window will be displayed.

![](https://lh3.googleusercontent.com/V1oMpt9MViuTFvika3l9wOxpgYIE326U68Fa_O3jmWM4VBBSaNfQonFe0rUqniD_oodRpe52TQbKWA47GFP3tJY5xzx-RH0Kffi7OgExTnUH0fqM7snn9JLr0X-b4WAnrWAsef8hOVz_5ci1zOVYi3o)

* **Response time**: Calculates the HTTP response time as a section.
* **Legend**: If the collected HTTP is in 4xx, 5xx status codes, it will be displayed in red. Otherwise, it will be displayed in blue. Color density is displayed in 3 steps according to the ratio of the data collected in the same-time axis.

&#x20;      <mark style="color:red;">◼︎</mark> 4xx, 5xx status codes  <mark style="color:blue;">◼︎</mark> etc.

### WebView Response time <a href="#webview-response-time" id="webview-response-time"></a>

You can check the HTTP response time of the WebView screen in question for the past 30 minutes. If you hover the mouse over a cell, a tooltip is displayed that shows “Analysis date | Analysis time | Number of data | Performance section”. If you click a desired cell in the heat map area or select a section by dragging the mouse, the “Detailed response analysis” pop-up window will be displayed.

![](https://lh6.googleusercontent.com/m1jUV7oaSJ_KATHnfCzEVpTRbX3AvanYTHSw_rn-gqsfoEPKFTz2l6e9igVzDNEaw1ocxJPh6ZpWc8gNNogEPleAQzeNkkTt9BSf2z0KZ-XPJNs5h-TYvHvb7BTshtT9-Gj8pKIZdnPQ0osCdTCRZBQ)

* **Response time**: Calculates the HTTP response time as a section.
* **Legend**: If the collected HTTP is in 4xx, 5xx status codes, it will be displayed in red. Otherwise, it will be displayed in blue. Color density is displayed in 3 steps according to the ratio of the data collected in the same-time axis.

&#x20;      <mark style="color:red;">◼︎</mark> 4xx, 5xx status codes  <mark style="color:blue;">◼︎</mark> etc.

### CPU <a href="#cpu" id="cpu"></a>

You can check the CPU usage of the Native screen in question for the past 30 minutes. If you hover the mouse over a cell, a tooltip is displayed that shows “Analysis date | Analysis time | Number of data | Performance section”. If you click a desired cell in the heat map area or select a section by dragging the mouse, the “Native stack analysis” pop-up window will be displayed.

![](https://lh6.googleusercontent.com/C1NqgRnDNlpqZxUEZ2VhupFGAuolVuJD6ywAO7I7tB9wCjIZioqoNgzK5N_8u4c3tf4EaljxwUPGsXyMyMFocWtCX0y6GFOSL_8YZyH8Q1K9y5m6BiuCd9M1BTuFXX0wtTh2-7PLRsDTA70dC0hekNA)

* **CPU usage**: Calculates the CPU usage as a section.
* **Legend**: OS usage is displayed in <mark style="color:green;">green</mark>, while apps are displayed in black. Color density is displayed in 3 steps according to the ratio of the data collected in the same-time axis

&#x20;     <mark style="color:green;">◼︎</mark> OS CPU usage  ◼︎ APP CPU usage

### Memory usage <a href="#memory" id="memory"></a>

You can check the memory usage of the Native screen in question for the past 30 minutes. If you hover the mouse over a cell, a tooltip is displayed that shows “Analysis date | Analysis time | Number of data | Performance section”. If you click a desired cell in the heat map area or select a section by dragging the mouse, the “Native stack analysis” pop-up window will be displayed.

![](https://lh3.googleusercontent.com/SKb02-kf_UrKpKGlONIRh39KP2WlxHTPku3k0u4PYe9RqBYsVAymxi0P0QlqI3-IRS8OWS9IYzmHcn_Q_4uOEld1PI8D6vr6anZIbvolnRh3pQlf0lADPsJg6lIktEX3fJLZCYo-3HbAQNqCg5EN6qY)

* **Memory usage**: Calculates the memory usage as a section.
* **Legend**: OS memory usage is displayed in green, while the app memory usage is displayed in black. Color density is displayed in 3 steps according to the ratio of the data collected in the same-time axis.

&#x20;     <mark style="color:green;">◼︎</mark> OS Memory usag  ◼︎ APP Memory usag


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.imqa.io/imqa-guide/eng/user-guide/using-mpm/screen-analysis.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.