Detailed performance analysis
Last updated
Last updated
The IMQA WPM detailed performance analysis can be checked on the performance heat map of the “Page performance analysis” - “Statistics” page. The page is displayed if you click a desired cell in the performance heat map or select a section by dragging the mouse. You can analyze rendering time and detailed responses in the detailed performance analysis page. Based on such analysis, you can identify performance issues and problems or problematic sectors.
You can also use the User Behavior Analytics to see the full behavioral flow of users on your app where performance issues are found.
Measures the rendering time when an HTML page generates an onload event or when a DOM change occurs in a web browser application implemented using the SPA method. It provides network time required to request resources such as CSS, Javascript, and Image, timing information such as FMP, FCP, and DCL, and web vital performance indicators such as LCP, LS, and FID. Therefore, users can check the external requests that were made until the web page is loaded, and accurately decide a bottleneck sector when loading a page.
User device information for a selected area in the Page Performance Analytics, Distribution Analytics, Performance Heatmaps and other features. It shows information about the page, device, OS, browser, browser version, page load time, and number of users as a list. When first entering the detailed analytics, look at the device information at the top for performance information. If you want to see other performance information, you can select a different device to find out. For devices grouped by the same condition, the user performance information with the slowest value is retrieved.
Page: Displays pages for the time zone and bin selected.
Device: They are categorized into “Desktop” and “Mobile” based on the user’s OS.
OS: Displays the user’s OS.
Browser/Version: Displays the user’s browser and its version.
Rendering Time(ms): Displays the user’s page load time. For items grouped with the same condition, it is calculated as an average.
User: Shows the number of cases. Refers to the pieces of data aggregated under the same conditions.
User information is displayed based on the user’s User-Agent information when a user visits the website. IMQA WPM categorizes users by the OS and browser they use. OSs are typically categorized into Windows, macOS, Android, iOS, and Linux.
Browsers are generally categorized into Chrome, Safari, Microsoft Edge, Firefox, and Samsung Browser.
An unspecified OS or browser may be labeled as “Unknown."
You can track a user on the selected device in the Device Information List in association with the flow of how the user interacted with your website. You can access the performance information of devices that have experienced performance degradation and identify the route cause before and after the degradation. Click [User Behavior Analytics] to track a screen flow from the session start to session end of the user on the specific device through the “Behavior Analytics” page.
For Detailed Performance Analytics to User Behavior Analytics, refer to 'Using WPM > Reverse Behavior Analysis'.
Summarizes the average network / server / dome / loading time of document for users on selected devices. Displays numerical information as KPIs when Core Web Vitals metrics LCP, FID, and LS are measured. Color-coded by Google’s recommended rating labels.
Performance Profiling allows you to view the network time it takes to request resources such as CSS, JavaScript, and Image when a web page is loaded for a user on a selected device, along with Web Vitals timing information such as FMP, FCP, DCL, LCP, FID, and LS
From the Toolbar, you can view the Performance Profiling Feature Guide, or filter by keyword search and resource type for network items.
❶ View Feature Guide You can view the core features of Performance Profiling. Feature Guide popup is shown when clicked.
❷ Search You can filter the resources displayed in the Network section with a keyword search.
❸ Resource Type Filter You can filter the resources displayed in the Network section by type.
All: Defaults to “All”; displays resource items of all types.
HTML: Shows items with a resource type of “document."
CSS: Shows items with a resource type of “css”, etc.
Media: Shows items with a resource type of “img”, “video”, “media”, etc.
JS: Shows items with a resource type of “script”.
Others: Shows items with other resource types.
The Overview/Navigation section gives you an at-a-glance view of the bottlenecks in your network and scripting while loading a web page. Once you have identified bottlenecks, you can drag the overhead area to select it for a closer look, or move a mouse left and right to navigate quickly through the section.
Overview defaults to All Bins and elements collected during resource requests/responses and scripting are shown in the same color. The more elements overlapped on the same time axis, the higher the graph is displayed.
If there is a bin of the Performance Profiling area that stands out to you, you can drag the Overhead area to see it in detail.
You can view timing information and Web Vitals metrics collected when a web page is loaded. For Core Web Vitals, the relevant information is shown together. Timing information to be collected is as follows. You can find it with the markers shown below the Overview area.
| index | label | description |
|---|---|---|
FP | First Paint | FP is the time when the browser renders the first pixels to the screen, rendering anything that is visually different from what was on the screen prior to navigation. |
FCP | First Contentful Paint | FCP is the time when the browser renders the first bit of the DOM contents (e.g., text, image, SVG, or element). |
DCL | Dom Content Loaded | The DCL event fires when the initial HTML document has been completely loaded and parsed, without waiting for style sheets, images, and subframes to finish loading. |
LOAD | Onload | Onload event corresponds a time when the initial HTML document and content, such as images, are fully loaded. |
The following web vitals information is collected: You can find it with the markers shown below the Overview area.
| index | Label | 설명 |
|---|---|---|
LCP | Largest Contentful Paint | LCP measures a time when the largest content element visible in the viewport is rendered while the page is loaded. |
FID | First Input Delay | FID measures a time when the browser responds to the first interaction made by a user on your page. |
LS | Layout Shift | LS measures a time when unexpected layout shift occurs while the page is loaded. |
Timing information can tell you about important time points in the loading of a web page. For example, good FP and FCP scores can give users the impression that the web page is responding quickly. Core Web Vitals refer to three metrics—Performance LCP, FID, and LS (CLS)—which are Google’s web performance metrics for measuring user experience on the website from different aspects: load speed, interactivity, and visual stability.
For Web Vitals metrics, you can also view a variety of relevant information affecting the Web Vitals. This allows you to identify the most influential factors in your Web Vitals assessment and improve your rating.
LCP Element: Displays the document object that is the largest content element.
FID Event: Shows the event when the interaction first occurred.
FID Delay: Displays a time when the browser responds to the first interaction made by a user on your page.
LS Element: Displays objects moved for every unexpected layout shift.
LS Score: Shows the movement score of objects moved for every unexpected layout shift.
Viewport: Displays a viewport size for the user.
<meta>: Shows a value of the meta viewport type in the head tag of the document loaded by the user
Web Vitals-related information in Performance Analytics allows you to compare and analyze the actual experience of selected individual users versus their Web Vitals ratings. If the Web Vitals have poor scores for a particular user experience, it means that your website is not optimized for such user experience. They can serve as metrics for improvement to set a target performance for your web browser application.
You can see the HTML document itself and a time taken by each resource request/response in a waterfall chart. Here is what you can see as the full DOM of the document is drawn and loaded. You can view this from the tooltip that appears when you hover over the document request element.
Request Type: Displays the resource type.
Request URL: Displays the raw URL information that the user has accessed.
Performance Information by Bin:
| Index | Label | Description |
|---|---|---|
◻︎ | Wait | Waiting time to request |
◼︎ | Network | Network search and movement time |
◼︎ | Server | Server processing time |
◼︎ | DOM | DOM parsing time |
◼︎ | Loading | Painted loading time |
◼︎ | Content download | File download time |
The following resource is collected: You can check this with the marker displayed on the timeline.
Request Type: Displays the resource type.
Request URL: Displays the URL information for which resources are requested.
Performance Information by Bin:
| Index | Label | Description |
|---|---|---|
◻︎ | Waiting | Time to wait before request |
︎◼︎ | Redirect | Time to redirect HTTP |
◼︎ | Fetch | Time to wait or look up cache before request |
◼︎ | DomainLookup | Time to search DNS for IPs corresponding to the domain |
◼︎ | Connect | Time to connect to a server |
◼︎ | Request sent | Time to request resources to the server |
◼︎ | Response | Time taken until the server responds |
You can measure the script execution time for dynamically rendered elements when a web page is loaded. You can define the functions executed during the rendering process and see how long the script takes to execute with FlameGraph.
You can measure the execution time of specific JavaScript when the web page is loaded, or check the script execution time in a configuration where A runs B, B runs C, and so on to improve inefficiently configured code. For Measuring Script Execution Time, see IMQA WPM/WCrash Installation Guide > WebAgent Setting > Measuring Script Execution Time.
IMQA MPM collects HTTP response time and response code. You can analyze the HTTP request from the client. The HTTP information is collected from the browser in ms (milliseconds). IMQA MPM displays HTTP header information and response codes. You can analyze the response time of a specific URL and check the URL that generates an error code using this information.
HTTP-related information collected from clients includes:
| Label | Description |
|---|---|
Method | HTTP Method (GET, POST, UPDATE, PUT, DELETE 등) |
Host | Domain information |
Status | HTTP response code |
Path | Request URL |
Response time | Response time to the HTTP request |
