Processing and visualization of single-page application performance metrics
View Patent ↗The disclosed embodiments provide a system for processing data. During operation, the system obtains a set of metrics related to a performance of a single-page application (SPA), wherein the set of metrics includes an initial page load time of the SPA that is calculated from a page load event and a render completion time and a subsequent page load time of the SPA that is calculated from a transition time and the render completion time. Next, the system uses the set of metrics to display a graphical user interface (GUI) comprising a chart of a performance of the SPA. The system then displays, in the chart, a representation of the page load time for the SPA.
1. A method, comprising:
obtaining a set of metrics related to a performance of a single-page application (SPA), wherein the set of metrics comprises:
an initial page load time of the SPA that is calculated from a page load event and a render completion time, and
a subsequent page load time of the SPA that is calculated from a transition time and the render completion time;
aggregating the set of metrics into one or more statistics, wherein the one or more statistics comprise a percentile representation of either the initial page load time or the subsequent page load time, wherein said percentile representation comprises a first value in percentage and a second value with a dimension of time;
using the set of metrics to display, by a computer system, a graphical user interface (GUI) comprising a chart of the performance of the SPA; and
displaying, in the chart, a representation of the page load time for the SPA, wherein the representation of the page load time includes a representation of the one or more statistics.
2. The method of claim 1 , further comprising:
obtaining one or more filters for the set of metrics from a user through the GUI;
matching the one or more filters to a predefined subset of the metrics; and
using the predefined subset of the metrics to update the chart.
3. The method of claim 2 , wherein the one or more filters comprise at least one of:
a page;
a view;
a location;
a device;
a browser;
an operating system;
a network; and
a time range.
4. The method of claim 1 , wherein aggregating the set of metrics into the one or more statistics comprises:
calculating a statistic for the set of metrics along one or more dimensions; and
recalculating the statistic along the one or more dimensions and one or more additional dimensions.
5. The method of claim 1 , further comprising:
displaying one or more values of the metrics based on a position of a cursor in the GUI.
6. The method of claim 1 , wherein the subsequent page load time is calculated by:
obtaining, from the set of metrics, download times of one or more resources associated with loading of the subsequent view; and
calculating the subsequent page load time using the transition time and a latest download time of the one or more resources.
7. The method of claim 6 , wherein the subsequent page load time is further calculated by:
identifying an inclusion of the one or more resources in a Document Object Model (DOM) of the SPA at the render completion time.
8. The method of claim 1 , wherein the chart is at least one of:
a line chart;
a scatter plot; and
a waterfall chart.
9. An apparatus, comprising:
one or more processors; and
memory storing instructions that, when executed by the one or more processors, cause the apparatus to:
obtain a set of metrics related to a performance of a single-page application (SPA), wherein the set of metrics comprises:
an initial page load time of the SPA that is calculated from a page load event and a render completion time, and
a subsequent page load time of the SPA that is calculated from a transition time and the render completion time;
aggregate the set of metrics into one or more statistics, wherein the one or more statistics comprise a percentile representation of either the initial page load time or the subsequent page load time, wherein said percentile representation comprises a first value in percentage and a second value with a dimension of time;
use the set of metrics to display a graphical user interface (GUI) comprising a chart of a performance of the SPA; and
display, in the chart, a representation of the page load time for the SPA, wherein the representation of the page load time includes a representation of the one or more statistics.
10. The apparatus of claim 9 , wherein the memory further stores instructions that, when executed by the one or more processors, cause the apparatus to:
obtain one or more filters for the set of metrics from a user through the GUI;
match the one or more filters to a predefined subset of the metrics; and
use the predefined subset of the metrics to update the chart.
11. The apparatus of claim 10 , wherein the one or more filters comprise at least one of:
a page;
a view;
a location;
a device;
a browser;
an operating system;
a network; and
a time range.
12. The apparatus of claim 9 , wherein aggregating the set of metrics into the one or more statistics comprises:
calculating a statistic for the set of metrics along one or more dimensions; and
recalculating the statistic along the one or more dimensions and one or more additional dimensions.
13. The apparatus of claim 9 , wherein the memory further stores instructions that, when executed by the one or more processors, cause the apparatus to:
display one or more values of the metrics based on a position of a cursor in the GUI.
14. The apparatus of claim 9 , wherein the chart is at least one of:
a line chart;
a scatter plot; and
a waterfall chart.
15. A system, comprising:
an analysis module comprising a non-transitory computer-readable medium comprising instructions that, when executed, cause the system to obtain a set of metrics related to a performance of a single-page application (SPA), wherein the set of metrics comprises:
an initial page load time of the SPA that is calculated from a page load event and a render completion time, and
a subsequent page load time of the SPA that is calculated from a transition time and the render completion time; and
a management module comprising a non-transitory computer-readable medium comprising instructions that, when executed, cause the system to:
aggregate the set of metrics into one or more statistics, wherein the one or more statistics comprise a percentile representation of either the initial page load time or the subsequent page load time, wherein said percentile representation comprises a first value in percentage and a second value with a dimension of time;
use the set of metrics to display a graphical user interface (GUI) comprising a chart of a performance of the SPA; and
display, in the chart, a representation of the page load time for the SPA, wherein the representation of the page load time includes a representation of the one or more statistics.
16. The system of claim 15 , wherein the non-transitory computer-readable medium of the management module further comprises instructions that, when executed, cause the system to:
obtain one or more filters for the set of metrics from a user through the GUI;
match the one or more filters to a predefined subset of the metrics; and
use the predefined subset of the metrics to update the chart.