4

I have an angular two app with typescript and systemjs.

My apps only 800kb and takes 4 seconds to long a page with text only.

All my js and css is small / minified and I have 11 requests in total with hardly any images

All images are compressed and in cdn firebase.

I host with firebase and use cloudflare for ssl and performance.

Has anyone experienced poor angular2 performance on load and caching.

I don't get any caching improvements either in speed.

Below is screen shot of files and load time:

enter image description here

This is the speed test results: https://www.webpagetest.org/result/161205_0H_S4H/

Requests on load: 17 (see below screen grab of network tab on load)

enter image description here

AngularM
  • 15,982
  • 28
  • 94
  • 169
  • How long does each request take when downloading the files? – byxor Dec 05 '16 at 09:45
  • what does your network tab show in developer tools? – shusson Dec 05 '16 at 09:47
  • The requests are very small. Looking at network tab it shows a lag of 3 seconds where it does nothing – AngularM Dec 05 '16 at 09:55
  • can you tell us what kind of nothing based on https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing ? – shusson Dec 05 '16 at 10:01
  • @shusson I've added a screen shot about. Also, this is the url : thepoolcover.co.uk . Also I've added the speed test result: https://www.webpagetest.org/result/161205_0H_S4H/ – AngularM Dec 05 '16 at 11:18
  • Possible duplicate of [How can I improve load performance of Angular2 apps?](http://stackoverflow.com/questions/40894704/how-can-i-improve-load-performance-of-angular2-apps) – silentsod Dec 05 '16 at 15:20
  • Some pointers https://stackoverflow.com/a/63279047/5043867 – Pardeep Jain Aug 10 '20 at 05:40

2 Answers2

6

this usually happens when developers are careless with imports. One major error here is importing the entire RxJS lib when you only want to use a small part of it.

For example, you should NOT import ..

import { Observable } from 'rxjs/Rx';

This imports the entire RXJS lib which is massive.

import { Observable } from 'rxjs/Observable';

Will just import what you need.

Remove all references to 'rxjs/Rx' and you will see a massive speedup in page load times.

danday74
  • 52,471
  • 49
  • 232
  • 283
0

do not use systemjs for production.

use ahead of time (AOT) compilation.

https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

user1990
  • 49
  • 1
  • 4
  • Thanks I will take a look. Why is systemjs not ideal for production? – AngularM Dec 05 '16 at 09:55
  • 1
    SystemJS is fine for production if used correctly. SystemJS supports on demand lazy loading of packages. For example, you could import inside a mouse click when a module is needed for the first time. Also, the Angular2 router now supports lazy loading entire routes with SystemJS. If you set your app up correctly SystemJS is absolutely fine. – danday74 Dec 05 '16 at 10:33
  • @danday74 could you add a link to an example of the routing your refering to for the lazy loading of routes, then I will compare with mine. Also, I will add mine to the question above – AngularM Dec 05 '16 at 10:51
  • you asked the right person - here's some code specifically i wrote simply to explore lazy loading of routes - https://github.com/danday74/angular2-router-modular/tree/master/app - ill find you the docs link too – danday74 Dec 05 '16 at 11:08
  • Heres the link for the docs - https://angular.io/docs/ts/latest/guide/router.html#!#lazy-loading-route-configuration - my example is bare minimum and shud be easy to follow - the docs are pretty verbose and not that clear - use whichever u prefer :) God bless – danday74 Dec 05 '16 at 11:10
  • @danday74 I've added an image of my files and traffic above. the url is thepoolcover.co.uk – AngularM Dec 05 '16 at 11:14
  • @danday74 thanks for sending this link: github.com/danday74/angular2-router-modular/tree/master/app - I already do this with my routes. Also, I checked if I use observable's and I don't. Can you have a look at my speed test above? anything else I can try... – AngularM Dec 05 '16 at 11:59
  • how many requests do you get in your NET tab on page load, and what are the requests for? – danday74 Dec 05 '16 at 12:57
  • @danday74 in total I have 17 requests. I have also attached a new screen grab above of these requests. The requests are minified app.js (700kb of my app js files), shim.js, sprite image which is very small, minified css, some favicon and one external fonts script which is small request – AngularM Dec 05 '16 at 15:28
  • what is the loading time for each, any taking a long time? – danday74 Dec 05 '16 at 17:16
  • All my files are really small and the actually app loads in 500 milliseconds. Seems like it takes a while for the apps routes to load – AngularM Dec 05 '16 at 17:23
  • Hosting is fast and cloudflare is fine – AngularM Dec 05 '16 at 17:24
  • sorry i tried to access your site to take a look but my proxy wont let me access it. I suggest using online tools that determine why your site is loading slow. hopefully that will help identify any bottlenecks. try this https://developers.google.com/speed/pagespeed/insights/ – danday74 Dec 05 '16 at 18:19
  • @danday74 I tried all the speed tests. They all say its very fast. But angular2 is not showing the site. It just shows a blue screen while its loading. This is one of my pages I speed tested: https://www.webpagetest.org/result/161205_AD_19H8/1/performance_optimization/#first_byte_time – AngularM Dec 05 '16 at 19:47
  • @danday74 could my app be slow because I have 59 routes? I have more than one route name for one app component e.g. I have for homepage: / and /home and /homepage – AngularM Dec 05 '16 at 20:08
  • i dont know, i suggest reducing the number fo routes and see if it speeds things up then at least u know what the issue is – danday74 Dec 06 '16 at 09:29