Page load performance issues with large AngularJS application

Question

We are working on quite a large AngularJS application. Currently we are investigating some page load performance issues. It takes quite some time until our page is ready.

One reason (along the other usual suspects such as too many watchers) might be the following:

We use ngTemplates to preload all the directive templates. Since we have so many directives (around 100, we like declarative programming ;-) the ngTemplate JS file is around 170KB and thus takes about 2 seconds to process and parse at page load (see attached flame chart).

If we disable ngTemplates the perceived page speed is much better since Angular has "smaller" bits to process and display.

But I think in production it is quite bad practice to do these 100 XHR calls to load the directive templates. The annoying thing is that Angular even loads/parses directive templates that are not actually rendered using ngIf ( AngularJS: Directive templates loading regardless of ng-if condition ).

I have attached a screenshot of the Chrome timeline/flame chart of our page load. You'll notice that there is a big yellow bar at the top of the flame chart. If we would not use ngTemplates, this bar would be divided into smaller parts (which seems to result in a better "perceived page speed").

Do any of you guys have similar issues? Or any input on how we could improve our page load?

We appreciate any inputs!

Michael

Answer 1

What you are facing is the downside of SPA applications.

SPA frameworks usually try to grant a fast and fluent experience when they are initially loaded - but for the cost of worse loading times, since they normally load all files in the first place. No matter if they will be needed or not. AngularJS itself does not provide any solution for this problem (other than Angular2 by the way, which does provide some options)

There are two (neither perfect) options you have:

1. You can try to speed up your initial loading time by server-side rendering of the landing-page: https://github.com/runvnc/angular-on-server

2. I am not sure if this approach actually works, it's just an idea which just came to my mind and has to be verified: You can try to cheat a bit on the ngTemplates approach: Initially fill the Angular templates-cache with a bunch of empty templates which hopefully should be faster than the loading of 170k worth templates.

After that find out which page you currently are on and fetch the needed templates and replace them in the cache. (maybe a rootScope.$digest() is neccessary after that?) After that fetch/update all remaining templates. This clearly isn't the cleanest solution but it may be the "last chance" if you darely need a performance boost here and server-side rendering isn't an option