cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

User Timing Marks in SPA

JGannon
Guide

I would like to be able to measure the time it takes for a content element being displayed in the user's browser in a Single Page App (SPA) in Angular. For example, I've created a loading spinner that is displayed while the app parses the HTML and before the SPA code is rendered. I'd like to know when the spinner began to display, when it ended, and the total duration of the event. Or I'd like to know when a content element ATF became visible. I have read that one way to measure this is the use of W3C user timing, which is supported by APPMon.
While Speed Index and Visually Complete are very useful, it would also be helpful to know when certain events occurred in the render process.

For Non-SPA sites the effort is minimal to insert the tags.

For example:

<script>window.performance && performance.mark && performance.mark("ATFAreaBegin")</script>
<!--The content I want to measure -->
<script>window.performance && performance.mark && performance.mark("ATFAreaEnd")</script>
<script>window.performance && performance.measure && performance.measure("ATFDuration", "ATFAreaBegin", "ATFAreaEnd");</script>


However, in SPA's such as Angular, simply inserting the marks into the code such as app.component.html doesn't work to display the marks since its outside of the index.html file.

Perhaps there are other ways to do this. Ideally, it would be great to know the time for a given page and display this in a dashboard along with other metrics such as Speed Index.


4 REPLIES 4

pahofmann
Leader

Have you considered creating a custom user action for the spinner?

That way you could get the exact timing the spinner is displayed.


Thanks for the info. I havent been able to find any specific examples of how to do this in the documentation - if you know of any related to this that would be appreciated.


It isn't in the public documentation. You can download the example/documentation directly from you environment.

Go to Settings -> Web & mobile monitoring -> Custom user actions:


JGannon
Guide

After more research, another way is to use perfume.js. This can detect paint events and the begin and end time can be output with W3C User timing API.