Screen performance analysis

* Paid plan only

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.

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.

1. Overview

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

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”.

❶ 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.

❸ 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.

3. Screen performance

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.

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.

4. Screen inflow

Screen View

You can check the screen view for 30 minutes.

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

Screen Flow

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

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.

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.

5. Screen event

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.

• 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

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

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.

• UI rendering time: Calculates the Native UI rendering time in question as a section.

• Legend: Displayed in red if the section is more than the threshold, and blue 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.

◼︎ More than the threshold ◼︎ Less than the threshold

WebView UI rendering time

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.

• UI rendering time: Calculates the UI rendering time of the web page in question as a section.

• Legend: Displayed in red if the section is more than the threshold, and blue 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.

◼︎ More than the threshold ◼︎ Less than the threshold︎

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”.

Native Response time

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.

• 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.

◼︎ 4xx, 5xx status codes ◼︎ etc.

WebView Response time

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.

• 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.

◼︎ 4xx, 5xx status codes ◼︎ etc.

CPU

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.

• CPU usage: Calculates the CPU usage as a section.

• Legend: OS usage is displayed in green, 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

◼︎ OS CPU usage ◼︎ APP CPU usage

Memory usage

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.

• 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.

◼︎ OS Memory usag ◼︎ APP Memory usag