Page performance analysis
IMQA WPM Page Performance Analytics provides a detailed view of your page’s performance in 30-min increments. You can view information about your users, such as page views and average performance, and heatmaps for each performance metric to analyze performance distribution and degradation further. You can also view Core Web Vitals collected on specific pages and analyze the factors that caused the degradation.
1. Overview
You can open this page if you click a specific screen card in the “Dashboard” page. The IMQA WPM page performance analysis page consists of the following:
❶ Page/Analysis time ❷ Page performance ❸ Page Views ❹ Core Web vitals ❺ Performance heat map ❻ Web vitals
2. Page/Analysis time
You can change the page to analyze and the analysis date and time. If changed, the page performance analysis information is updated according to the selected standard.
❶ Analysis Date Defaults to “Today." You can change the date by clicking [<] and/or [>]. Can select a date up to 30 days ago
❷ 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. Page performance
Displays the average of the bottom 5% and the total average of the performance indexes (rendering time, response time) 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. Page Views
You can check the page view for 30 minutes.
Page view: Counts the number of visits to the page in question for 30 minutes.
5. Core Web vitals
You can see the 30-min average and percentages for each status label of three Core Web Vitals metrics—LCP, FID, and CLS—measured on a specific page for 30 minutes.
The Core Web Vitals page consists of the following:
❶ Device filter Dore Web Vitals metrics collected on a specific page for 30 minutes can be analyzed on the basis of user experience. Defaults to “All,” can be filtered by “Desktop” or “Mobile." Changing the metric updates Average and Percentage for Each Status Label shown below.
❷ Average Averages the Values for each Core Web Vitals metric collected on a specific page for 30 minutes. Color-coded by Google’s recommended rating labels.
❸ 1-min Peak Shows the values for each Core Web Vitals metric collected in the last 30 minutes at the time of the lowest performance. Color-coded by Google’s recommended rating labels.
Core Web Vitals refer to three metrics—LCP, FID, and CLS—which are Google’s web performance metrics for measuring user experience on the website from different aspects: load speed, interactivity, and visual stability.
| Core Web Vitals | Good | Needs improvement | Poor |
|---|---|---|---|
LCP | Less than 2,500 ms | 2,500ms ~ 4,000ms | More than 4,000ms |
FID | Less than 100 ms | 100ms ~ 300ms | More than 300ms |
CLS | Less than 0.1 | 0.1 ~ 0.25 | More than 0.25 |
6. Performance heat map
You can analyze the performance rating and performance degradation situation in details using the heat map of each performance index.
Rendering time
You can view the rendering times measured on individual pages or SPA-based web browser applications over a 30-minute period. Heatmap is displayed on a per web page basis. 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 “Page rendering analysis” pop-up window will be displayed.
Rendering Time: Calculates the loading time taken until the corresponding HTML page fires an onload event or a DOM change as a bin.
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
Response time
You can check the HTTP response time of the page 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.
7. Web Vitals
You can view the performance distribution of each Web Vitals metric, along with a variety of relevant information that affects the Web Vitals. This allows you to identify the most influential factors in your Web Vitals assessment and improve your rating.
LCP Distribution / LCP Related Information
LCP Distribution Graph
Displays a histogram of the distribution of LCP data collected on a specific page over a 30-minute period. A histogram plots ranks on the horizontal axis and counts on the vertical axis, and then bins the aggregated data to create ranks and counts as the pieces of data that fall into each rank. Histograms are useful for understanding or comparing the distribution of an entire population. Color-coded by Google’s recommended rating labels.
| Web vitals | Good | Needs improvement | Poor | Y-axis |
|---|---|---|---|---|
LCP | Less than 2,500 ms | 2,500ms ~ 4,000ms | Over 4,000ms | Number of data collected |
LCP Relevant Information
You can see a variety of relevant information that affects the LCP collected on a specific page over a 30-minute period together. This allows you to identify the most influential factors in your LCP assessment and improve your rating.
Element: Displays the information and percentage of document object that is the largest content element.
Screen Resolution: Displays the information and percentage of screen resolution that the user is using to view the page.
LCP measures the amount of time to render the largest content element visible in the viewport while the page is loaded. The largest element is typically the main content of the web page. Optimized LCP allows a visitor to experience a quick loading speed and perceive such interaction with the web page.
Optimization of image resources or resources management by user experience may help you fix LCP issues. To provide a good user experience, the site should strive to have LCP of 2,500 ms or less.
FID Distribution / FID Related Information
FID Distribution Graph
Displays a histogram of the distribution of FID data collected on a specific page over a 30-minute period. A histogram plots ranks on the horizontal axis and counts on the vertical axis, and then bins the aggregated data to create ranks and counts as the pieces of data that fall into each rank. Histograms are useful for understanding or comparing the distribution of an entire population. Color-coded by Google’s recommended rating labels.
| Web vitals | Good | Needs improvement | Poor | Y-axis |
|---|---|---|---|---|
FID | Less than 100 ms | 100ms ~ 300ms | Over 300ms | Number of data collected |
FID Relevant Information
You can see a variety of relevant information that affects the FID collected on a specific page over a 30-minute period together. This allows you to identify the most influential factors in your FID assessment and improve your rating.
Event: Shows the event when the interaction first occurred.
Screen Resolution: Displays the information and percentage of screen resolution that the user is using to view the page.
FID measures a time from when a user first interacts with your page to the time when the browser responds to such interaction. A good FID score can give visitors a good impression of a site’s interactivity and responsiveness.
Useful strategies for improving FID scores include optimizing resource delivery and breaking up long tasks to reduce the JavaScript execution time. To provide a good user experience, the site should strive to have FID of 100 ms or less.
CLS Distribution / CLS Related Information
CLS Distribution Graph
Displays a histogram of the distribution of CLS data collected on a specific page over a 30-minute period. A histogram plots ranks on the horizontal axis and counts on the vertical axis, and then bins the aggregated data to create ranks and counts as the pieces of data that fall into each rank. Histograms are useful for understanding or comparing the distribution of an entire population. Color-coded by Google’s recommended rating labels.
| Web vitals | Good | Needs improvement | Poor | Y-axis |
|---|---|---|---|---|
CLS | Less than 0.1 | 0.1 ~ 0.25 | Over 0.25 | Number of data collected |
CLS Relevant Information
You can see a variety of relevant information that affects the CLS collected on a specific page over a 30-minute period together. This allows you to identify the most influential factors in your CLS assessment and improve your rating.
Element: Displays the information and percentage of objects moved for every unexpected layout shifts.
Screen Resolution: Displays the information and percentage of screen resolution that the user is using to view the page.
CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs while the page is loaded. A low CLS score can give visitors a good impression of a site’s visual stability.
Resource delivery optimization by user experience and optimized placement of dynamically injected content can be useful solutions to common CLS issues. To provide a good user experience, the site should strive to have CLS of 0.1 or less.
Performance Profiling - Scripting
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 > 2.3. [WPM] Measuring Script Execution Time.
Last updated
