2

I have an SPA in AngularJS which loads different templates into a single SPA.

After reading this https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp?hl=en I included a onload="measureCRP()" in the body of the SPA, which is basically something like this

<body onload="measureCRP()">
  <div ng-app="app">
    <div ng-view></div>
  </div>
</body>

and I can see every time the page is loaded the time spent in building the DOM and the overall load time for the page.

But of course, when the view is updated then this is not updated. I thought about including something similar in all templates, but it doesn´t seem to work.

Any ideas in how this should be done?

EDIT.

I tried including the onload as suggested in this other post Angular js ng-view rendered event 

<body>
  <div ng-app="app" ng-controller="SpaController as spa">
    <div ng-view onload="spa.measureCRP()"></div>
  </div>
</body>

but although the function measureCRP() is executed again, the values displayed are exactly the same everytime, so my guess is that the timestamps collected remain the same. Thanks

Community
  • 1
  • 1
David
  • 3,364
  • 10
  • 41
  • 84

1 Answers1

0

this is a problem in SPA's. The "real" navigation occurs only once, and all other navigations are made by framework via AJAX. It means that the onLoad will fires when the DOM was complete but it does not mean that something was displayed.

I think this link will help you

https://www.soasta.com/blog/lessons-learned-web-performance-monitoring-single-page-applications/

bye

Fagner Schwalm
  • 51
  • 2