Angular2 slow initial page load caused of load sequence

Question

I have angular2 project created from seed and I've added several angular components on my initial page. Some of them load images - which is relatively slow, but the actual problem is:

1. I have a bundle which is big (~1mb) and I am currently working on it to make it smaller following a guide on the subject.
2. The initial load makes just a few requests, loads the bundle (usually ~ 3 seconds) and waits to the Angular application to bootstrap (~1.4 seconds). After that it starts loading all components and load their resources (fonts, images, etc.). Here is how the request looks like:

I am afraid even after I reduce the bundle size the application would still be bootstrapping for 1.5 seconds without making any requests and then again wait a ~1 seconds for the resources of the components to load. That I assume will lead to about 3+ seconds of load time. With my app being relatively simple I found this not acceptable.

Q1: Is there a way to load the component resources earlier and just reference them on component load?

Q2: Is there a way to make the application bootstrap faster?

I'm open to other suggestions too :)

Edit:

I am using AoT compilation, provided with the seed and I have taken steps to lower the size of the app.js file. The problem remains with the gap between the end of app.js downloaded and the first component's resources calls.

UPDATE (2016-12-19):

What I did (for now) is only on the server:

• Enabled the HTTP2 support which resulted in major speed improvement.
• Enabled GZIP which reduced the size of the JS by more than 5 times.

Those server configurations were trivial on NGINX and Apache so its worth giving them a try.

Now although the site loads a lot faster those changes don't solve the initial problems (Problem 1 and Problem 2). Hence I am looking on some other approaches that you may also want to follow if you are in my spot:

• Prerendering with Gulp
• Prerendering in Amazon
• AoT vs JIT compilation - some insights.

UPDATE (2018-06-11):

Here are some materials that helped me boosting the initial load:

• Angular Performance Workshop - Manfred Steyer
• Angular — Faster performance and better user experience with Lazy Loading - by Ashwin Sureshkumar

In my case the Lazy Loading plays the big role.

Answer 1

Q2: You can make the application bootstrap faster and decrease the bundle size by implementing Ahead of Time compilation: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Just like it sounds, the templates are precompiled and all the scripts generated beforehand which reduces processing time after the initial load. Additionally, the Angular 2 compiler is not included in your bundle which should cut down on the bundle size itself by a large amount.

Q1: There is lazy loading support of components but I haven't looked into what it entails, someone else may be able to answer that part for you.

Answer 2

Buy CloudFlare DNS, We were able to reduce load time from 50sec to 4 sec. also able to reduce the refresh speed to around 1 sec.

There is a free version for it, it works fine.

Answer 3

also considering the minifying/bundling of the js, enable gzip compression at server side will decrease the load time.

Answer 4

You have to reduce as much of your main.js package as possible, the more information in main.js the longer it will take to process it. Check your imports in app.module and use lazy loading.