title: Page load performance issues with large AngularJS application
body: <p>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.</p>
  
  <p>One reason (along the other usual suspects such as too many watchers) might be the following:</p>
  
  <p>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).</p>
  
  <p>If we disable ngTemplates the perceived page speed is much better since Angular has "smaller" bits to process and display.</p>
  
  <p>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 (<a href="https://stackoverflow.com/questions/19793227/angularjs-directive-templates-loading-regardless-of-ng-if-condition">AngularJS: Directive templates loading regardless of ng-if condition</a>).</p>
  
  <p>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").</p>
  
  <p><a href="https://i.stack.imgur.com/MyaQ1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MyaQ1.png" alt="Chrome timeline/flame chart"></a></p>
  
  <p>Do any of you guys have similar issues? Or any input on how we could improve our page load?</p>
  
  <p>We appreciate any inputs!</p>
  
  <p>Michael</p>